Шаг 1 - Установим HTML: Для начало нам следует создать основной контейнер div, которому мы пропишем основной класс box и класс effect1, который отвечает в нашем примере за ту или иную тень: HTML
<divclass="box effect1">
<h3>Пример с тенью №1</h3>
</div>
Шаг 2 - Установим CSS: А теперь для начало пропишем нашему примеру, основные стили классу box и тегу hr3 который размещается внутри контейнера и является заголовком: CSS-Code
.box {
width:70%;
height:200px;
background:#F0F0F0;
margin:40pxauto;
}
.box h3{
text-align:center;
position:relative;
top:80px;
}
отлично, пол дела сделано, теперь ниже давайте выберем один из восьми примеров отображения тени у контейнера div: Пример с тенью №1: CSS-Code
/* Пример с тенью №1
------------------------------------------*/
.effect1{
-webkit-box-shadow:010px6px-6px#777;
-moz-box-shadow:010px6px-6px#777;
box-shadow:010px6px-6px#777;
}
Пример с тенью №1: CSS-Code
/* Пример с тенью №1
------------------------------------------*/
.effect1{
-webkit-box-shadow:010px6px-6px#777;
-moz-box-shadow:010px6px-6px#777;
box-shadow:010px6px-6px#777;
}
Пример с тенью №2: CSS-Code
/* Пример с тенью №2
------------------------------------------*/
.effect2
{
position: relative;
}
.effect2:before,.effect2:after
{
z-index:-1;
position: absolute;
content:"";
bottom:15px;
left:10px;
width:50%;
top:80%;
max-width:300px;
background:#777;
-webkit-box-shadow:015px10px#777;
-moz-box-shadow:015px10px#777;
box-shadow:015px10px#777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right:10px;
left:auto;
}
Пример с тенью №3: CSS-Code
/* Пример с тенью №3
------------------------------------------*/
.effect3
{
position: relative;
}
.effect3:before
{
z-index:-1;
position: absolute;
content:"";
bottom:15px;
left:10px;
width:50%;
top:80%;
max-width:300px;
background:#777;
-webkit-box-shadow:015px10px#777;
-moz-box-shadow:015px10px#777;
box-shadow:015px10px#777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
Пример с тенью №4: CSS-Code
/* Пример с тенью №4
------------------------------------------*/
.effect4
{
position: relative;
}
.effect4: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:015px10px#777;
-moz-box-shadow:015px10px#777;
box-shadow:015px10px#777;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
Пример с тенью №5: CSS-Code
/* Пример с тенью №5
------------------------------------------*/
.effect5
{
position: relative;
}
.effect5:before,.effect5:after
{
z-index:-1;
position: absolute;
content:"";
bottom:25px;
left:10px;
width:50%;
top:80%;
max-width:300px;
background:#777;
-webkit-box-shadow:035px20px#777;
-moz-box-shadow:035px20px#777;
box-shadow:035px20px#777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.effect5:after
{
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right:10px;
left:auto;
}
Пример с тенью №6: CSS-Code
/* Пример с тенью №6
------------------------------------------*/
.effect6
{
position:relative;
-webkit-box-shadow:01px4px rgba(0,0,0,0.3),0040px rgba(0,0,0,0.1) inset;
-moz-box-shadow:01px4px rgba(0,0,0,0.3),0040px rgba(0,0,0,0.1) inset;
box-shadow:01px4px rgba(0,0,0,0.3),0040px rgba(0,0,0,0.1) inset;
}
.effect6:before,.effect6:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0020px rgba(0,0,0,0.8);
-moz-box-shadow:0020px rgba(0,0,0,0.8);
box-shadow:0020px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px/10px;
border-radius:100px/10px;
}
.effect6:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
Пример с тенью №7: CSS-Code
/* Пример с тенью №7
------------------------------------------*/
.effect7
{
position:relative;
-webkit-box-shadow:01px4px rgba(0,0,0,0.3),0040px rgba(0,0,0,0.1) inset;
-moz-box-shadow:01px4px rgba(0,0,0,0.3),0040px rgba(0,0,0,0.1) inset;
box-shadow:01px4px rgba(0,0,0,0.3),0040px rgba(0,0,0,0.1) inset;
}
.effect7:before,.effect7:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0020px rgba(0,0,0,0.8);
-moz-box-shadow:0020px rgba(0,0,0,0.8);
box-shadow:0020px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px/10px;
border-radius:100px/10px;
}
.effect7:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
Пример № 8 в файле rar скачайте его!!!
| 
· 
22:40
