Ever wanted to create a good creative and amazing menu? well you are in treat for today.Today iam going to show you how to create an amazing blur menu with CSS.Alright so lets start with the markup i.e, HTML.
A simple HTML will do the work now but you can customize your own menu.
The HTML :
<html>
<head>
<link rel="stylesheet" href="blurmenu.css"
type="text/css"/>
</head>
<body>
<ul class="bmenu">
<li><a href="#">About</a></li>
<li><a href="#">Illustrations</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Personal Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
The CSS:
Now lets go the CSS and add this
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.bmenu li{
font-size: 50px;
display: block;
}
You'll get something like this
.bmenu li a{
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 2px #111;
color: #ddd;
padding: 5px 20px;
margin: 2px;
background: rgba(0,0,0,0.7);
letter-spacing: 1px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
You'll get the picture like this
Now it looks quite good isn't it? You can customize your own colors in it according to your design.Now lets add the magic of the blur effect.Whenever you hover or put your cursor on each menuitem other menuitems will become blur.To get this effect just add this code
.bmenu:hover li a{
text-shadow: 0px 0px 10px #eeb213;
color: transparent;
background: rgba(0,0,0,0.2);
}
.bmenu li a:hover{
background: rgba(0,0,0,1.0);
text-shadow: 0px 0px 1px #eeb213;
}
Great isn't it?...you can customize your menu vertically and according to your design and coloring.Thanks for reading and keep visiting my blog for more articles.
No comments:
Post a Comment