Ролловер-ссылка с эффектом тени на CSS
Возможно, название не совсем точное, но чтобы не мудрить излишне с заголовком поста, обозвал это так.
На самом деле фишка вот в чем: есть обычный список, где пункты являются ссылками. То есть, обычное такое меню. Черный шрифт на белом фоне. А при наведении мыши, фон меняется на серый, шрифт на белый и плюс к шрифту добавляется легкая тень.
В результате выглядит все это достаточно эффектно и даже объемно.
Сделать такой эффект проще пареной репы. Вот описание стилей, ответственных за сам эффект (все остальное опущено, ибо просто):
ul {
width: 400px;
list-style: none;
border: #ccc solid 1px;
}
li a {
text-decoration: none;
color: #404040;
padding: 15px;
display: block;
}
li a:hover {
background: #dedede;
color: #fff;
text-shadow: 0 1px 1px #665;
text-decoration: none;
}
Рабочий пример можно посмотреть здесь.
