Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/snowpact/blur-menu
https://github.com/snowpact/blur-menu
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/snowpact/blur-menu
- Owner: snowpact
- Created: 2015-02-20T17:35:02.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2020-04-13T17:20:50.000Z (over 4 years ago)
- Last Synced: 2023-08-13T14:33:26.279Z (over 1 year 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
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 :)