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

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

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

11.12.2009

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

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

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

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