CSS3

CSS3 для начинающих. Часть 5.2. Боксы на CSS3

admin

Have a question? Ask in chat with AI!

CSS3 для начинающихИ вновь продолжаем изучать CSS3 с циклом статей CSS3 для начинающих. Сегодня мы разберем создание так называемых боксов с помощью CSS3 без использования изображений. Можно с уверенностью сказать, что боксы которые мы сегодня сделаем прекрасно отображаются во всех браузерах за исключением IE. Поэтому если вы до сих используете Internet Explorer — смените браузер. Итак, перейдем к нашей статье.

[adsense]
Посмотреть демо  Скачать исходники

 

Делать мы сегодня будем 16 различных боксов. Материал будет дан кратко: описание бокса, скрин, код css. Если у вас появятся вопросы — задавайте их в комментариях.

Бокс №1

css3 box 1

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

/* Зададим общие значения для всех боксов */
.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: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: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

css3 box 2

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

/* Здесь мы задаем параметры второго бокса */
.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 box 3

В третьем боксе мы немного закруглим углы и сделаем тени под верхними углами, что создаст ощущение приподнятого листа бумаги.

/* Опишем третий бокс */
.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

css3 box 4

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

/* Зададим параметры для четвертого бокса */
.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

css3 box 5

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

/* Определение для пятого бокса */
.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

css3 box 6

Добавим небольшую тень сверху. Загиб в правом нижнем углу сделаем так же как и до этого.

/* Шестой бокс */
.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

css3 box 7

Сейчас перейдем на уровень выше. Имитируем липкую ленту, которой наш лист будет приклеен к стене.

/* Седьмой бокс */
.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

css3 box 8

А теперь сделаем бокс очень похожий на фото сделанное Полароидом (Polaroid).

/* восьмой бокс */
.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

css3 box 9

Теперь добавим прозрачную рамку для нашего девятого бокса.

/* девятый бокс */
.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

css3 box 10

В десятом боксе попробуем имитировать несколько листков подложенных под основной. Выглядеть это будет как книга.

/* Десятый бокс */
.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;
}

/* здесь мы создаем имитацию нескольких подложенных листов*/
.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

css3 box 11

Теперь скомбинируем серо-белый градиент с прозрачной клейкой пленкой, что даст очень красивый эффект.

/* одиннадцатый бокс */
.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

css3 box 12

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

/* двенадцатый бокс*/
.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

css3 box 13

Сейчас мы сделаем бокс с загибом справа снизу и прикрепим его к стене вертикальными клейкими лентами.

/* тринадцатый бокс */
.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 box 14

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

/* четырнадцатый бокс */
.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

css3 box 15

Сейчас мы имитируем несколько листков прилепленных к стене за левый угол с помощью клейкой ленты.

/* пятнадцатый бокс */
.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

css3 box 16

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

/* шестнадцатый бокс */
.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);
}

Посмотреть демо  Скачать исходники

 


Полезная информация:

  1. CSS3 для начинающих. Часть 5.1. Drop-shadow — простые примеры
  2. Геометрические фигуры с помощью CSS и CSS3. Продолжение
  3. CSS3 для начинающих. Часть 4.2. 3D ленты
  4. Геометрические фигуры с помощью CSS и CSS3
  5. CSS3 для начинающих. Часть 6.1. Кнопки на CSS3
В, , ,

4 комментария для “0”

  1. Уведомление: CSS3 для начинающих. Часть 5.2. Боксы на CSS3 | Grabr
  2. Уведомление: progg.ru
  3. Уведомление: CSS3 для начинающих | RusDigi.org Блог Гилязетдинова Руслана

  4. Замечательный у Вас сайт. Очень полезная информация. Добавила в закладки. Спасибо, Вам!

    Ответить

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Вращающиеся лучи с помощью анимации CSS3 и JavaScript
Следующая запись ВКонтакте: нововведения апреля

Связанная запись

CSS3

Вертикальное меню с помощью CSS3

admin
CSS3

CSS3 кнопки. 4 варианта анимированных кнопок

admin
CSS3

CSS для начинающих: CSS кнопки — 4 интересных примера

admin
CSS3

Эффекты при наведении для изображений с использованием CSS3

admin
CSS3

CSS: как сменить цвет выделения текста в современных браузерах

admin
CSS3

3D аккордеон на CSS3

admin

Последняя запись

ЩО ТАКЕ КОМПЕТЕНТНІСНИЙ ПІДХІД У НАВЧАННІ ВІДПОВІДАЄ ДЕРЖАВНА СЛУЖБА ЯКОСТІ ОСВІТИ?

ЩО ТАКЕ ПРИКЛАДНІ ПРОГРАМИ І ЩО ДО НИХ ВІДНОСИТЬСЯ?

ХТО ЗНАЄ ВСІ МОВИ СВІТУ?

КАК ОПРЕДЕЛИТЬ СДОХ АККУМУЛЯТОР ИЛИ НЕТ?

ЯКИЙ ПРОДУКТ ЗБИВАЄ ТИСК?

Лучшая рубрика