Сегодня мы создадим стильный подвал сайта на CSS3,который всегда остаётся в нижней части браузера,независимо от того,сколько раз вы прокрутили сайт по вертикали.Так,что этот подвал будет всегда у всех на виду.

Посмотреть demo | Скачать скрипт

Мы будем использовать CSS3 тени.Так,что при наведении курсора мыши на пункт меню оно будет осветлятся / затемнятся.

HTML разметка подвала сайта

<div id="stickey_footer">
<!-- Begin Footer Menu -->
<ul id="footer_menu">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#">Services</a>
<li><a href="#">Portfolio</a>
<li><a href="#">Friends</a>
<li><a href="#">Blog</a>
<li><a href="#">Testimonials</a>
<li><a href="#">Contact</a>
</ul>

<ul id="social_icons">
<!--Social Icons -->
<li><a href="#" ><img src='images/twitter.png' alt="" /><span>Twitter</span></a></li>
<li><a href="#" ><img src='images/digg.png' alt="" /><span>Digg</span></a></li>
<li><a href="#" ><img src='images/flickr.png' alt="" /><span>Flickr</span></a></li>
<li><a href="#" ><img src='images/facebook.png' alt="" /><span>Facebook</span></a></li>
</ul>

</div>

CSS

Сначала мы должны сделать так,чтобы подвал сайта всегда был внизу окна браузера,а не ещё где-то.

#stickey_footer { 
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 40px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed;
text-shadow: 1px 1px 1px #000000;
width: 960px;
}

Использование css функций margin и position- это небольшая хитрость в этом уроке;

Фиксированное положение подвала позволяет ему двигаться при масштабировании. Довольно просто,не правда ли?

Дальше мы добавим к нашему подвалу различные визуальные эффекты.

/* border curves */
#stickey_footer {
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}

/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}

/* shadow for the footer*/
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}

#footer_menu {
margin: 0;
padding: 0;
width:auto;
}

#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}

#footer_menu .imgmenu {
padding:5px 8px 3px 14px;
float:left;
background:url("images/home.png") 13px 5px no-repeat;
width:36px;
height:30px;
border:none;
border-right:1px solid rgba(0, 0, 0, 0.4);
cursor:pointer;
}

#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}

#footer_menu .imgmenu:hover {
background:url("images/home_hover.png") 13px 5px no-repeat;
}

#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}

#footer_menu li a:hover {
color: #ffffff;
}

#footer_menu li span {
display:none;
}

#stickey_footer #social_icons {
float:right; /* social icons positions */
width:auto;
margin:5px 15px 0px;
padding:0px;
overflow:hidden;
}

#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /*for IE6 */
}

Наш стильный подвал сайта,который всегда находится в нижней части браузера,готов!Полный скрипт(со всеми рисунками и стилями) вы можете скачать у меня на сайте.