Многие видели, как при наведении на элемент он выделяется путём отбрасывания тени, делается это при помощи css. Выделение тенью можно сделать при создании сайта для любого класса css путём добавления ему :hover. К примеру наш класс будет иметь имя tab
Как выглядит в неактивном положении:
.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);
/* элемент тени если наведен курсор конец */
}
О том какие именно параметры у box-shadow и что они означают, возможно я опишу позже.
