Ролловер-ссылка с эффектом тени на CSS

rolloverwshad.gif

Возможно, название не совсем точное, но чтобы не мудрить излишне с заголовком поста, обозвал это так.

На самом деле фишка вот в чем: есть обычный список, где пункты являются ссылками. То есть, обычное такое меню. Черный шрифт на белом фоне. А при наведении мыши, фон меняется на серый, шрифт на белый и плюс к шрифту добавляется легкая тень.

В результате выглядит все это достаточно эффектно и даже объемно.

Сделать такой эффект проще пареной репы. Вот описание стилей, ответственных за сам эффект (все остальное опущено, ибо просто):

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;
}

Рабочий пример можно посмотреть здесь.

Похожие записи:

Оставить комментарий: