Тень при наведении курсора

 

Многие видели, как при наведении на элемент он выделяется путём отбрасывания тени, делается это при помощи css. Выделение тенью можно сделать при создании сайта для любого класса css путём добавления ему :hover. К примеру наш класс будет иметь имя tab

Как выглядит в неактивном положении:

<div class="box effect1">
   <h3>Эффект 1</h3>
</div> 

CSS

.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

/*==================================================
* Effect 1
* ===============================================*/
.effect1
{
position: relative;
}
.effect1:before
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}

 

Уголок справа

<div class="box effect2">
     <h3>Эффект 2</h3>
</div> 

 

CSS

.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

/*==================================================
* Effect 2
* ===============================================*/
.effect2
{
position: relative;
}
.effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
} 

 Уголок с двух сторон

HTML

<div class="box effect3">
     <h3>Эффект 3</h3>
</div>

CSS

.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

/*==================================================
* Effect 5
* ===============================================*/
.effect3
{
position: relative;
}
.effect5:before, .effect3:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.effect3:after
{
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
} 

<hr>

Тень при наведении курсора

Многие видели, как при наведении на элемент он выделяется путём отбрасывания тени, делается это при помощи 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); 
 /* элемент тени если наведен курсор конец */ 
 }

 Взято http://www.miditator.ru/blog/css/

Добавить комментарий

Защитный код
Обновить