Как выглядит в неактивном положении:
.tab {
margin-bottom:18px;
position:relative;
overflow:hidden;
/* элемент тени */
-webkit-box-shadow: 0 5px 2px -3px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 2px -3px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 2px -3px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(0, 0, 0, 0.1);
/* элемент тени конец */
}
Создаём элемент с таким же именем и добавляем к нему :hover (если навели мышкой).
Как будет выглядеть если на него навести мышкой:
.tab:hover {
/* элемент тени если наведен курсор */
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(0, 0, 0, 0.1);
/* элемент тени если наведен курсор конец */
}
Автор: Павел Хорошилов
Комментариев нет