11:51
Сегодня мы получим прекрасный и простой расплывчатый эффект меню через CSS. В дополнение к этому мы получим полезный многократный эффект границ.
Смотри ДЕМО
Предупреждаю! что фон станет таким же как и в ДЕМО, если вы хотите изменить его , то просто замените картинку "bg.jpg" в прописываемых стилях, если же вы хотите чтобы фон сайта остался прежним , то удалите вот эту строчку:
Code
{
background: #1a1a1a url(http://www.1stwebdesigner.com//wp-content/uploads/2011/04/blurry-effect/demo/bg.jpg);
}
Приступим к установке:
Это вставляем в head и /head:
Code
<style type="text/css">
body {
background: #1a1a1a url(http://www.1stwebdesigner.com//wp-content/uploads/2011/04/blurry-effect/demo/bg.jpg);
}
#blur {
position: relative;
top: 50px;
width: 100%;
border: 1px solid #000000;
border-style: solid none;
}
#blur:before {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
border-top: 1px solid #212121;
content: '';
}
#blur:after {
position: absolute;
width: 100%;
height: 100%;
top: 1px;
border-bottom: 1px solid #212121;
content: '';
}
#blur ul {
position: relative;
top: 0;
width: 960px;
margin: 0 auto;
list-style-type: none;
overflow: hidden;
}
#blur li {
float: left;
position: relative;
}
#blur a {
position: relative;
float: left;
padding: 20px 25px;
margin-left: 10px;
text-decoration: none;
font-family: "trebuchet ms";
font-variant: small-caps;
color: transparent;
text-shadow: 0 0 2px #cacaca;
z-index: 100;
}
/* normal styles */
#blur a:hover, #blur a:focus {
color: #ffffca;
text-shadow: 0 0 0 transparent;
}
/* active styles */
#blur .active a, #blur .active a:hover {
color: #cacaca;
text-shadow: 0 0 2px #cacaca;
}
</style>
Это вставляем туда, где хотим видеть наше меню:
Code
<div id="blur">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li class="active">
<a href="#">Pet Projects</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
