16 рамок на CSS3 для оформления содержания. Часть 2 из 2

:

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

 

Box 9

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

Рамка для офрмления содержания №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);

}

 

Box 10

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

Рамка для оформления содержания №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;

}



/* Данные псевдо классы (before и 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)	;

}

 

Box 11

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

Рамка для оформления сожержания №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);

}

 

Box 12

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

Рамка для оформления сожержания №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);

}

 

Box 13

В данном варианте скомбинированы эффект смятой буамги со сгибом в нижнем правом углу. Рамка "пришпилена" к стене двумя прозрачными ленточками по обеим сторонам.

Рамка для оформления сожержания № 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 можно размещать объекты не только горизонтально или вертикально, но и под углом. В данном варианте прозрачная ленточка "наклеена" под углом.

Рамка для офрмления содержания №14

/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */

.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);

}

 

Box 15

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

Рамка для оформления содержания № 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);

}

 

Box 16

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

Рамка для оформления сожержания №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);

}