https://github.com/snowpact/blur-menu

https://github.com/snowpact/blur-menu

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/snowpact/blur-menu
• Owner: snowpact
• Created: 2015-02-20T17:35:02.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-04-13T17:20:50.000Z (about 5 years ago)
• Last Synced: 2025-02-19T12:56:18.320Z (5 months ago)
• Language: CSS
• Size: 706 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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 :

![preview](https://raw.githubusercontent.com/snowpact/blur-menu/master/img/demo.png)


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

Tuto


Création du menu HTML


	


		
Présentation

		
Développement

		
Illustrator

		
Photographie

		
Contact

	

	

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 :

	

    

	

Fin du tuto :)