Blur Menu

Introduction

Ce petit tuto permet de faire un menu avec un style flou qui devient net au survole de la souris

Voici un exemple :


demo : https://jsfiddle.net/sabalotelli/3bm4dL7q/

Tuto

Création du menu HTML

<div class="blur-menu">
	<h2><a href="#presentation">Présentation</a></h2>
	<h2><a href="#developpement">Développement</a></h2>
	<h2><a href="#illustrator">Illustrator</a></h2>
	<h2><a href="#photographie">Photographie</a></h2>
	<h2><a href="#contact">Contact</a></h2>
</div>

Création du CSS

.blur-menu a{
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-ms-filter: blur(3px);
	-o-filter: blur(3px);
	filter: blur(3px);
	color: inherit;
	text-decoration: inherit;
	transition-duration: 0.5s;
}

.blur-menu a:hover{
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	-ms-filter: blur(0);
	-o-filter: blur(0);
	filter: blur(0);
	transition-duration: 0.5s;
}

En bonus, le style du texte

.blur-menu{
	text-align: right;
}

.blur-menu h2{
	color: white;
	font-family:"Roboto";
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: 15px;
	font-size: 50px;
	margin: 0;
	padding: 30px;
}

Vous pouvez rajouter la police Roboto de google directement en insérant la ligne suivante dans le head de votre fichier HTML :

<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>

Fin du tuto :)