Возможно, название не совсем точное, но чтобы не мудрить излишне с заголовком поста, обозвал это так. На самом деле фишка вот в чем: есть обычный список, где пункты являются ссылками. То есть, обычное такое меню. Черный шрифт на белом фоне. А при наведении мыши, фон меняется на серый, шрифт на белый и плюс к шрифту добавляется легкая тень. В результате выглядит все это достаточно эффектно и даже объемно.
Сделать такой эффект проще пареной репы. Вот описание стилей, ответственных за сам эффект (все остальное опущено, ибо просто):
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;
}
Рабочий пример можно посмотреть здесь.
Родная болгария фотографии. Как давно я там не был!
В ИЕ text-shadow не работает :(
Ответить
Увы… увы… Но не ИЕ единым сыт человек! :)
Ответить
Совершенно согласен, ни один осел, даже 8ой, к сожалению всех верстальщиков не понимает text-shadow. Да, не IE единым сыт человек, но как объяснить заказчику, это отсталый браузер, когда данная “программа” (да именно в кавычках) установлену у 13% юзверей РУНЕТА. Так что так или иначе, а приходится львиную долю времени тратить на поправление верстки под ослика.
Ответить
AlaXiZ, тут каждый поступает как считает более правильным. Можно не заморачиваться с такими заказчиками, а можно и объяснить, что да, дескать, можем и под ИЕ заточить, но вот этого, того и вот этого эффекта у вас на странице не будет. В любом случае все индивидуально.
Ответить
Прикольно спасибо за код
Ответить
А по-моему, многие даже не поймут, что есть там тень или нет. Выделяется и хорошо, а тень в других браузерах как приятное дополнение.
Ответить
Легко и красиво, вот только в IE8 с промежутками между li можно как-то бороться?
Ответить