Эксперименты с CSS3 box shadow

25.11.2011 00:00

Содержание
Эксперименты с CSS3 box shadow
Страница 2
Страница 3
Страница 4
Все страницы

Страницы с 1 по 4

Как вы уже, возможно, знаете, теперь с помощью CSS3 и HTML5 можно разрабатывать сложные и красивые интерфейсы без использования графических программ и полностью полагаться на код. На сегодняшнем уроке мы покажем вам, как сделать привлекательный набор блоков с использованием только CSS3 и добиться того же результата, для которого раньше понадобился бы графический редактор, такой как Photoshop. Важно отметить, что пока эти блоки выглядят безупречно в Safari, Chrome и Firefox, поэтому мы предлагаем вам использовать один из этих браузеров, чтобы посмотреть демо, а теперь давайте начнем этот урок.

Представленные здесь 16 различных примеров, в полной мере демонстрируют силу CSS3. Ниже мы собираемся показать вам css-код, который был использован для создания каждого из этих симпатичных блоков.

Блок 1

Блок с тонкими тенями в противоположных углах и небольшим изгибом в нижнем правом углу, он также имеет небольшой эффект тени, чтобы добавить некоторую глубину.

box1

/* Определяем стили для параграфов в блоках */
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p, .box9 p, .box10 p, .box11 p, .box12 p, .box13 p, .box14 p, .box15 p, .box16 p{
margin: 30px;
color: #aaa;
outline: none;
}
 
/* В этих селекторах мы определяем ширину, высоту, границы, положение, цвет фона, цвет и тени */
.box1{
 width: 300px;
 margin: 40px;
 min-height: 200px;
 position:relative;
 display: inline-block;
 background:#fff;
 background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
 background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
 border: 1px solid #ccc;
 -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
 -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
 box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
 -webkit-border-bottom-right-radius: 6px 50px;
 -moz-border-radius-bottomright: 6px 50px;
 border-bottom-right-radius:6px 50px;
}
 
/* В этом псевдо классе мы определим дизайн того, что будет предшествовать классу box1.
В данном случае здесь определяются параметры тени, которая лежит под блоком. */
.box1:before{
 content: '';
 width: 50px;
 height: 100px;
 position:absolute;
 bottom:0; right:0;
 -webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
 box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
 z-index:-1;
 -webkit-transform: translate(-35px,-40px)
 skew(0deg,30deg)
 rotate(-25deg);
 -moz-transform: translate(-35px,-40px)
 skew(0deg,32deg)
 rotate(-25deg);
 -o-transform: translate(-35px,-40px)
 skew(0deg,32deg)
 rotate(-25deg);
}
 
/* В этом псевдо классе определяется дизайн того, что следует за классом box1.
В нашем случае здесь определяются парметры тени, которая будет лежать поверх блока */
.box1:after{
 content: '';
 width: 100px;
 height: 100px;
 top:0; left:0;
 position:absolute;
 display: inline-block;
 z-index:-1;
 -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
 box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
 -webkit-transform: rotate(2deg)
 translate(20px,25px)
 skew(20deg);
 -moz-transform: rotate(7deg)
 translate(20px,25px)
 skew(20deg);
 -o-transform: rotate(7deg)
 translate(20px,25px)
 skew(20deg);
 transform: rotate(7deg)
 translate(20px,25px)
 skew(20deg);
}

Блок 2

Этот блок имеет большой изгиб в его правом нижнем углу, с соответствующей по размеру тенью, внутренняя тень была заменена небольшим наложением градиента.

box2

/* Здесь мы задаем ширину, высоту, отступы, цвет фона и др. для второго блока */
.box2{
 margin: 50px;
 width: 300px;
 min-height: 150px;
 padding: 0 0 1px 0;
 position:relative;
 background: #f3f3f3;
 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
 background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 -webkit-border-bottom-right-radius: 60px 60px;
 -moz-border-radius-bottomright: 60px 60px;
 border-bottom-right-radius: 60px 60px;
 -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
 box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
 
}
.box2:before{
 content:'';
 width: 25px;
 height: 20px;
 position: absolute;
 bottom:0;
 right:0;
 -webkit-border-bottom-right-radius: 30px;
 -moz-border-radius-bottomright: 30px;
 border-bottom-right-radius: 30px;
 -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
 box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
 -webkit-transform:  rotate(-20deg)
 skew(-40deg,-3deg)
 translate(-13px,-13px);
 -moz-transform: rotate(-20deg)
 skew(-40deg,-3deg)
 translate(-13px,-13px);
 -o-transform:   rotate(-20deg)
 skew(-40deg,-3deg)
 translate(-13px,-13px);
 transform:
 rotate(-20deg)
 skew(-40deg,-3deg)
 translate(-13px,-13px);
}
 
/* Здесь мы делаем тень для изгиба */
.box2:after{
 content: '';
 z-index: -1;
 width: 100px;
 height: 100px;
 position:absolute;
 bottom:0;
 right:0;
 background: rgba(0, 0, 0, 0.2);
 display: inline-block;
 -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
 box-shadow: 20px 20px 8px rgba()0,0,0,0.2;
 -webkit-transform: rotate(0deg)
 translate(-45px,-20px)
 skew(20deg);
 -moz-transform: rotate(0deg)
 translate(-45px,-20px)
 skew(20deg);
 -o-transform: rotate(0deg)
 translate(-45px,-20px)
 skew(20deg);
 transform: rotate(0deg)
 translate(-45px,-20px)
 skew(20deg);
}

Блок 3

Этот блок имитирует немного мятую текстуру, которую можно заметить в верхней и в нижней части окна. Что особенно удивительно, всё это вы можете создать с помощью одного только CSS3.

box3

/* Здесь задаются размеры, фон и градиенты для третьего блока */
.box3{
 margin: 50px;
 width: 300px;
 padding: 5px 0 ;
 position:relative;
 background:#fff;
 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
 border: 1px solid #ccc;
 -webkit-border-radius: 60px 5px;
 -moz-border-radius: 60px/5px;
 border-radius:60px/5px;
 -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
 -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
 box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}
 
/* В этом псевдо классе мы создаем правую верхнюю тень */
.box3:before{
 content: '';
 width: 50px;
 height: 50px;
 top:0; right:0;
 position:absolute;
 display: inline-block;
 z-index:-1;
 -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
 -webkit-transform: rotate(2deg)
 translate(-14px,20px)
 skew(-20deg);
 -moz-transform: rotate(2deg)
 translate(-14px,20px)
 skew(-20deg);
 -o-transform: rotate(2deg)
 translate(-14px,20px)
 skew(-20deg);
 transform: rotate(2deg)
 translate(-14px,20px)
 skew(-20deg);
}
 
/* В этом псевдо классе мы создаем левую верхнюю тень */
.box3:after{
 content: '';
 width: 100px;
 height: 100px;
 top:0; left:0;
 position:absolute;
 z-index:-1;
 display: inline-block;
 -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
 -webkit-transform: rotate(2deg)
 translate(20px,25px)
 skew(20deg);
 -moz-transform: rotate(2deg)
 translate(20px,25px)
 skew(20deg);
 -o-transform: rotate(2deg)
 translate(20px,25px)
 skew(20deg);
 transform: rotate(2deg)
 translate(20px,25px)
 skew(20deg);
}

Блок 4

Хороший эффект, имитирует лист бумаги, с приподнятыми уголками. Данный эффект достигается при помощи правильно размещенных теней.

box4

/* Здесь мы задаем стили для четвертого блока: размеры, цвета, тени и рамки */
.box4{
 margin: 50px;
 min-height: 100px;
 width: 300px;
 padding: 5px 0 ;
 position:relative;
 background: #fff;
 background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
 background: -moz-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
 border: 1px solid #ccc;
 -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
 
/* Это верхняя правая тень */
.box4:before{
 content: '';
 width: 50px;
 height: 50px;
 top:0; right:0;
 position:absolute;
 z-index: -1;
 -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
 box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
 -webkit-transform: rotate(2deg)
 translate(-14px,20px)
 skew(-20deg);
 -moz-transform: rotate(2deg)
 translate(-14px,20px)
 skew(-20deg);
 -o-transform: rotate(2deg)
 translate(-14px,20px)
 skew(-20deg);
 transform: rotate(2deg)
 translate(-14px,20px)
 skew(-20deg);
}
 
/* Это верхняя левая тень */
.box4:after{
 content: '';
 width: 50px;
 height: 50px;
 top:0; left:0;
 position:absolute;
 z-index:-1;
 display: inline-block;
 -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
 box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
 -webkit-transform: rotate(2deg)
 translate(12px,25px)
 skew(20deg);
 -moz-transform: rotate(2deg)
 translate(12px,25px)
 skew(20deg);
 -o-transform: rotate(2deg)
 translate(12px,25px)
 skew(20deg);
 transform: rotate(2deg)
 translate(12px,25px)
 skew(20deg);
}
 
/* Это нижняя правая тень  */
.shr_box4{
 width: 100px;
 height: 100px;
 bottom:0; right:0;
 position:absolute;
 z-index: -1;
 -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
 box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
 -webkit-transform: rotate(0deg)
 translate(-20px,-15px)
 skew(20deg);
 -moz-transform: rotate(0deg)
 translate(-20px,-15px)
 skew(20deg);
 -o-transform: rotate(0deg)
 translate(-20px,-15px)
 skew(20deg);
 transform: rotate(0deg)
 translate(-20px,-15px)
 skew(20deg);
}
 
/* Это нижняя левая тень */
.shl_box4{
 content: '';
 width: 100px;
 height: 100px;
 bottom:0; left:0;
 position:absolute;
 z-index: -1;
 -webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
 box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
 -webkit-transform: rotate(0deg)
 translate(20px,-15px)
 skew(-20deg);
 -moz-transform: rotate(0deg)
 translate(20px,-15px)
 skew(-20deg);
 -o-transform: rotate(0deg)
 translate(20px,-15px)
 skew(-20deg);
 transform: rotate(0deg)
 translate(20px,-15px)
 skew(-20deg);
}