Добро пожаловать на портал вебмастеров WebmastersBY
  • 17
  • апр
  • 2026
Верстка сайта

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

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

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

На сегодняшнем уроке мы покажем вам, как сделать привлекательный набор блоков с использованием только 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);
}

Блок 5

Используя серо-белый градиент, вы можете сочетать его вместе с тенями и изгибами, чтобы сделать более реалистичный бумажный лист.

box5

/* Задаем правила для пятого блока */
.box5 {
    margin: 50px;
    width: 300px;
    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;
    -webkit-border-bottom-left-radius: 60px 60px;
    -moz-border-radius-bottomright: 60px 60px;
    -moz-border-radius-bottomleft: 60px 60px;
    border-bottom-left-radius: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);
}

/* Это для левого изгиба */
.box5:before {
    content:'';
    width: 25px;
    height: 20px;
    background: white;
    position: absolute;
    bottom:0; right:0;
    background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
    -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);
}

/* Этот псевдо класс создает тень для левого изгиба */
.box5:after {
    content: '';
    z-index: -10;
    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);
}

/* Здесь создаем нижнюю правую тень */
.fold_box5 {
    z-index: -10;
    width: 50px;
    height: 50px;
    position:absolute;
    bottom:0; left:0;
    -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(40px,-20px)
    skew(-20deg);
    -moz-transform: rotate(0deg)
    translate(40px,-20px)
    skew(-20deg);
    -o-transform: rotate(0deg)
    translate(40px,-20px)
    skew(-20deg);
    transform: rotate(0deg)
    translate(40px,-20px)
    skew(-20deg);
}

/* Эти правила создают изгиб с нижнего левого бока */
.fold2_box5 {
    content:'';
    width: 25px;
    height: 20px;
    background: white;
    position: absolute;
    bottom:0; left:0;
    background: #fff;
    background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
    -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(103deg)
    skew(-3deg,-40deg)
    translate(-13px,-15px);
    -moz-transform: rotate(103deg)
    skew(-3deg,-40deg)
    translate(-13px,-15px);
    -o-transform: rotate(103deg)
    skew(-3deg,-40deg)
    translate(-13px,-15px);
}

Блок 6

Еще один эффект мятого листка.

box6

/* Это правила для шестого блока: фон, цвет, рамки, тени, как и в предыдущих примерах */
.box6 {
	margin: 50px;
	width: 300px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background:#fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-border-top-left-radius: 60px 5px;
	-webkit-border-top-right-radius: 60px 5px;
	-webkit-border-bottom-right-radius: 60px 60px;
	-moz-border-radius-topleft: 60px 5px;
	-moz-border-radius-topright: 60px 5px;
	-moz-border-radius-bottomright: 60px 60px;
	border-top-left-radius: 60px 5px;
	border-top-right-radius: 60px 5px;
	border-bottom-right-radius: 60px 60px;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
}

/* В этом псевдо классе мы создаем изгиб для нижней части блока */
.box6: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);
}

/* В этом псевдо классе мы создаем тень для изгиба */
.box6:after {
	content: '';
	z-index: -10;
	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 8px 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);
}

/* В этом классе мы создаем тень в вернем правом углу */
.box6_corner_lf {
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-6;
	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 20px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg)
	translate(20px,25px)
	skew(20deg);
	-moz-transform: rotate(2deg)
	translate(20px,20px)
	skew(20deg);
	-o-transform: rotate(2deg)
	translate(20px,20px)
	skew(20deg);
	transform: rotate(2deg)
	translate(20px,20px)
	skew(20deg);
}

/* В этом классе мы определяем тень для верхней левой области */
.box6_corner_rt {
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-6;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px -10px 18px 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,15px)
	skew(-20deg);
	-o-transform: rotate(2deg)
	translate(-14px,15px)
	skew(-20deg);
	transform: rotate(2deg)
	translate(-14px,15px)
	skew(-20deg);
}

Блок 7

А теперь перейдем к более интересным примерам, что если мы добавим небольшие прозрачные кусочки скотча, имитирующие приклеенный бумажный листок к стене?

box7

/* Это правила для седьмого блока */
.box7 {
	margin: 50px;
	width: 320px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

/* Это для верхней левой полоски */
.box7:before {
	content: '';
	position:absolute;
	width: 130px;
	height: 30px;
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform:translate(-50px,10px)
	skew(10deg,10deg)
	rotate(-50deg);
	-moz-transform:translate(-50px,10px)
	skew(10deg,10deg)
	rotate(-50deg);
	-o-transform:translate(-50px,10px)
	skew(10deg,10deg)
	rotate(-50deg);
	transform:translate(-50px,10px)
	skew(10deg,10deg)
	rotate(-50deg);
}

/* это для нижней правой полоски */
.box7:after {
	content: '';
	position:absolute;
	right:0;
	bottom:0;
	width: 130px;
	height: 30px;
	background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(50px,-20px)
	skew(10deg,10deg)
	rotate(-50deg);
	-moz-transform: translate(50px,-20px)
	skew(10deg,10deg)
	rotate(-50deg);
	-o-transform: translate(50px,-20px)
	skew(10deg,10deg)
	rotate(-50deg);
	transform: translate(50px,-20px)
	skew(10deg,10deg)
	rotate(-50deg)
}

Блок 8

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

box8

/* Это правила для восьмого блока */
.box8 {
	margin: 70px 50px;
	width: 300px;
	min-height: 250px;
	position:relative;
	border: 2px solid #ccc;
	background: rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
}

/* Это псевдо класс для рамки */
.box8:before {
	content: '';
	width: 110%;
	left: 0;
	height: 125%;
	z-index:-1;
	position:absolute;
	border: 1px solid #ccc;
	background: #f3f3f3;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	background: -moz-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
	-webkit-transform: translate(-5%,-5%);
	-moz-transform: translate(-5%, -5%);
	-o-transform: translate(-5%, -5%);
	transform: translate(-5%, -5%);
}

/* Это псевдо класс для тени рамки */
.box8:after {
	content: '';
	width: 100%;
	left: 0;
	height: 115%;
	z-index:-2;
	background: none;
	position:absolute;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);
}

Блок 9

Усложним еще немного пример и добавим прозрачную рамку вокруг нашего блока.

box9

/* Это правила для девятого блока */
.box9 {
    margin: 70px 50px;
    width: 300px;
    min-height: 250px;
    position:relative;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius:20px;
    background: white;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
    box-shadow:0px 0px 5px rgba(0,0,0,0.3);
}

/* Это граница, которая окружает блок */
.box9:before {
    content: '';
    width: 110%;
    left: 0;
    height: 111%;
    z-index:-1;
    position:absolute;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius:20px;
    border: 1px solid rgba(0,0,0, 0.1);
    background: rgba(0, 0, 0, 0.0);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -webkit-transform:  translate(-5%,-5%);
    -moz-transform: translate(-5%, -5%);
    -o-transform: translate(-5%, -5%);
    transform: translate(-5%, -5%);
}

/* Это полоска в верхней части блока */
.box9:after {
    content: '';
    position:absolute;
    top:-25px; left: 30%;
    width: 130px;
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
    background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
    background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
}

Блок 10

Теперь создадим эффект сложенных в стопку листков. Для придания реалистичности мы будем использовать градиенты.

box10

/* Это правила для десятого блока */
.box10 {
    margin: 50px;
    width: 320px;
    min-height: 150px;
    padding: 0 0 1px 0;
    position:relative;
    background: #fff;
    background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
    background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
    border: 1px solid #ccc;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    -webkit-border-bottom-right-radius: 60px 5px;
    -moz-border-radius-bottomright: 60px 5px;
    border-bottom-right-radius: 60px 5px;
}

/* Эти (before and after ) псевдо классы создают эффект стопки листков */
.box10:before {
    content: '';
    width: 98%;
    z-index:-1;
    height: 100%;
    padding: 0 0 1px 0;
    position: absolute;
    bottom:0; right:0;
    background: #fff;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
    border: 1px solid #ccc;
    -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
    -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
    box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
    -webkit-border-bottom-right-radius: 60px 5px;
    -moz-border-radius-bottomright: 60px 5px;
    border-bottom-right-radius: 60px 5px;
    -webkit-transform: skew(2deg,2deg)
    translate(3px,8px);
    -moz-transform: skew(2deg,2deg)
    translate(3px,8px);
    -o-transform: skew(2deg,2deg)
    translate(3px,8px);
    transform: skew(2deg,2deg)
    translate(3px,8px);
}

.box10:after {
    content: '';
    width: 98%;
    z-index:-1;
    height: 98%;
    padding: 0 0 1px 0;
    position: absolute;
    bottom:0; right:0;
    background: #fff;
    background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
    border: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
    box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
    -webkit-transform: skew(2deg,2deg);
    translate(-1px,2px);
    -moz-transform: skew(2deg,2deg);
    translate(-1px,2px) ;
    -o-transform: skew(2deg,2deg);
    translate(-1px,2px) ;
    transform: skew(2deg,2deg);
    translate(-1px,2px) ;
}

Блок 11

В данном примере объединим серо-белый градиент и прозрачную ленту.

box11

/* Это правила для одиннадцатого блока */
.box11 {
    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 white;
    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);

}

/* Этот псевдо класс создает нижний изгиб */
.box11:before {
    content:'';
    width: 25px;
    height: 20px;
    background: white;
    position: absolute;
    bottom:0; right:0;
    background:#fff;
    background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
    -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);
    transform: rotate(-20deg)
    skew(-40deg,-3deg)
    translate(-13px,-13px);
    -moz-transform: rotate(-20deg)
    skew(-40deg,-3deg)
    translate(-13px,-13px);
    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);
    transform: rotate(-20deg)
    skew(-40deg,-3deg)
    translate(-13px,-13px);
    transform: rotate(-20deg)
    skew(-40deg,-3deg)
    translate(-13px,-13px);
}

/* Это тень изгиба */
.box11: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 17px rgba(0,0,0,0.2);
    box-shadow: 20px 20px 17px rgba(0,0,0,0.2);
    -webkit-transform: rotate(0deg)
    translate(-45px,-20px)
    skew(20deg);
    -moz-transform: rotate(0deg)
    translate(-40px,-17px)
    skew(20deg);
    -o-transform: rotate(0deg)
    translate(-40px,-17px)
    skew(20deg);
    transform: rotate(0deg)
    translate(-40px,-17px)
    skew(20deg);
}

/* Это верхняя полоска на блоке */
.box11_tape {
    position:absolute;
    top:-25px; left: 30%;
    width: 130px;
    height: 40px;
    background:#ccc;
    background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
    background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

Блок 12

Еще один вариант листка бумаги с изгибами, тенями и прозрачной лентой.

box12

/* Это правила для двенадцатого блока */
.box12 {
    margin: 50px;
    width: 300px;
    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-border-bottom-left-radius: 60px 60px;
    -moz-border-radius-bottomleft: 60px 60px;
    border-bottom-left-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);
}

/* Это нижный левый изгиб */
.box12:before {
    content:'';
    width: 25px;
    height: 20px;
    background: white;
    position: absolute;
    bottom:0; right:0;
    background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
    -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);
}

/* Это тень правого изгиба */
.box12:after {
    content: '';
    z-index: -10;
    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 17px 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(-40px,-17px)
    skew(20deg);
    -o-transform: rotate(0deg)
    translate(-40px,-17px)
    skew(20deg);
    transform: rotate(0deg)
    translate(-45px,-20px)
    skew(20deg);
}

/* Это тень левого изгиба */
.fold_box12 {
    z-index: -10;
    width: 50px;
    height: 50px;
    position:absolute;
    bottom:0; left:0;
    -webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -20px 20px 17px rgba(0, 0, 0, 0.2);
    box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
    translate(40px,-20px)
    skew(-20deg);
    -moz-transform: rotate(0deg)
    translate(40px,-17px)
    skew(-20deg);
    -o-transform: rotate(0deg)
    translate(40px,-17px)
    skew(-20deg);
    transform: rotate(0deg)
    translate(40px,-20px)
    skew(-20deg);
}

/* Это нижний левый изгиб */
.fold2_box12 {
    width: 25px;
    height: 20px;
    z-index:20;
    background: white;
    position: absolute;
    bottom:0; left:0;
    background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
    -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(103deg)
    skew(-3deg,-40deg)
    translate(-13px,-15px);
    -moz-transform: rotate(103deg)
    skew(-3deg,-40deg)
    translate(-13px,-15px);
    -o-transform: rotate(103deg)
    skew(-3deg,-40deg)
    translate(-13px,-15px);
    transform: rotate(103deg)
    skew(-3deg,-40deg)
    translate(-13px,-15px);
}

/* Это верхняя полоска на блоке */
.box12_tape {
    content: '';
    position:absolute;
    top:-25px; left: 30%;
    width: 130px;
    height: 40px;
    background: #ccc;
    background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
    background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

Блок 13

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

box13

/* Это правила для тринадцатого блока */
.box13 {
    margin: 50px;
    width: 300px;
    min-height: 150px;
    padding: 0 0 1px 0;
    position:relative;
    background:#fff;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
    background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    -webkit-border-top-left-radius: 60px 5px;
    -moz-border-radius-topleft:60px 5px;
    border-top-left-radius:60px 5px;
    -webkit-border-top-right-radius: 60px 5px;
    -moz-border-radius-topright:60px 5px;
    border-top-right-radius:60px 5px;
    -webkit-border-bottom-right-radius: 60px 60px;
    -moz-border-radius-bottomright:60px 60px;
    border-bottom-right-radius: 60px 60px;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
}

/* Это нижний левый изгиб */
.box13: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);
}

/* Это тень изгиба */
.box13:after {
    content: '';
    z-index: -10;
    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);
}

/* Это верхняя левая тень */
.box13_corner_lf {
    width: 100px;
    height: 100px;
    top:0; left:0;
    position:absolute;
    z-index:-6;
    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(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);
}

/* Это верхняя правая тень */
.box13_corner_rt {
    content: '';
    width: 50px;
    height: 50px;
    top:0; right:0;
    position:absolute;
    display: inline-block;
    z-index:-6;
    -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);
}

/* Это полоска на левой стороне */
.box13_tape:before {
    content: '';
    position:absolute;
    top:0; left: 0;
    width: 130px;
    height: 40px;
    background:rgba(0,0,0,0.2);
    background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
    background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px);
    -moz-transform: rotate(90deg) skew(0,0) translate(100px,65px);
    -o-transform: rotate(90deg) skew(0,0) translate(100px,65px);
    transform: rotate(90deg) skew(0,0) translate(100px,65px);
}

/* Это полоска на правой стороне */
.box13_tape:after {
    content: '';
    position:absolute;
    top:0; right: 0;
    width: 130px;
    height: 40px;
    background:rgba(0, 0, 0, 0.1);
    background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
    background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
    -moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
    -o-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
    transform: rotate(90deg) skew(0,0) translate(100px,-65px);
}

Блок 14

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

box14

/* Это правила для четырнадцатого блока */
.box14 {
	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));
	background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
	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;
}

/* Это верхняя правая тень */
.box14: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);
	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);
}

/* Это верхняя левая тень */
.box14: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);
	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);
}

/* Этот класс определяет правила для полоски вверху блока */
.box14_tape {
	position:absolute;
	top:0; right: 0;
	width: 130px;
	height: 40px;
	background: rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	-webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
	-moz-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
	-o-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
	transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
}

Блок 15

Этот пример выглядит как стопка листков с заметками, приклеенная к стене куском прозрачного скотча.

box15

/* Это правила для пятнадцатого блока */
.box15 {
	margin: 50px;
	width: 320px;
	min-height: 150px;
	padding: 0 0 1px 0;
	position:relative;
	background:#fff;
	background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
	border: 1px solid #ccc;
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
	-webkit-border-bottom-right-radius: 60px 5px;
	-moz-border-radius-bottomright: 60px 5px;
	border-bottom-right-radius:  60px 5px;
}

/* Этот класс создает эффект стопки листов */
.box15:before {
	content: '';
	width: 98%;
	z-index:-1;
	height: 100%;
	padding: 0 0 1px 0;
	position: absolute;
	bottom:0; right:0;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
	border: 1px solid #ccc;
	-webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
	-moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
	-webkit-border-bottom-right-radius: 60px 5px;
	-moz-border-radius-bottomright: 60px 5px;
	border-bottom-right-radius:  60px 5px;
	-webkit-transform: skew(2deg,2deg)
	translate(3px,8px);
	-moz-transform: skew(2deg,2deg)
	translate(3px,8px);
	-o-transform: skew(2deg,2deg)
	translate(3px,8px);
	transform: skew(2deg,2deg)
	translate(3px,8px);
}

.box15:after {
	content: '';
	width: 98%;
	z-index:-1;
	height: 98%;
	padding: 0 0 1px 0;
	position: absolute;
	bottom:0; right:0;
	background: #f3f3f3;
	background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
	background: -moz-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
	border: 1px solid #ccc;
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
	-webkit-transform: skew(2deg,2deg)
	translate(-1px,2px);
	-moz-transform: skew(2deg,2deg)
	translate(-1px,2px);
	-o-transform: skew(2deg,2deg)
	translate(-1px,2px);
	transform: skew(2deg,2deg)
	translate(-1px,2px);
}

/* Этот класс создает верхнюю левую полоску */
.box15_tape {
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background:rgba(0, 0, 0, 0.1);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	-webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
	-moz-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
	-o-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
	transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
}

Блок 16

В последнем примере мы создадим рамку в виде фотографии Polaroid, которая приклеена к стене двумя кусками скотча (один поверх другого).

box16

/* Это правила шестнадцатого блока */
.box16 {
	margin: 70px 50px;
	width: 300px;
	min-height: 250px;
	position:relative;
	border: 2px solid #ccc;
	background: rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 12px rgba(0,0,0,0.1);
	box-shadow: 0px 1px 12px rgba(0,0,0,0.1);
}

/* Это рамка изображения */
.box16:before {
	content: '';
	width: 110%;
	left: 0;
	height: 125%;
	z-index:-1;
	position:absolute;
	border: 1px solid #ccc;
	background:#fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
	-webkit-transform: translate(-5%,-5%);
	-moz-transform: translate(-5%,-5%);
	-o-transform: translate(-5%,-5%);
	transform: translate(-5%,-5%);
}

/* Это псевдо класс создает тень рамки */
.box16:after {
	content: '';
	width: 100%;
	left: 0;
	height: 115%;
	z-index:-2;
	background: none;
	position:absolute;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);
}

/* Этот класс и псевдо класс создает полоску в верхней левой области */
.box16_tape {
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background: rgba(0,0,0,0.2);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	-webkit-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
	-moz-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
	-o-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
	transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
}

.box16_tape:before {
	content: '';
	position:absolute;
	top:0; left: 0;
	width: 130px;
	height: 40px;
	background:rgba(0,0,0,0.2);
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
	-webkit-transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
	-moz-transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
	-o-transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
	transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
}

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

Комментарии 0
Комментарии отсутствуют

Новый комментарий

Ваш комментарий будет доступен для редактирования 10 минут