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

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

@charset "utf-8";
 
@import url(reset.css); 

/******************************************/
/*** Стили для демонстрационной страницы **/
/******************************************/

body{
    background: url(background.png);
}
 
.wrapper{
    width: 960px;
    overflow: hidden;
    margin: auto;
    padding: 60px 0 100px;
}
.set_item{
    width: 400px;
    float: left;
}
.clear{
    clear:both;
}
h1 {
    text-align:center;
}
/*** Конец общей секции ***/

Box 1
Рамка с легкими тенями в противоположных углах и небольшой складкой в правом нижнем углу, также она имеет еле заметную внутреннюю тень для придания объема.

Рамка для оформления содержания №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.
   В нашем случае здесь определяются параметры тени, которая лежит под рамкой. */
.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);
}

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

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

Box 3
Данная рамка имитирует немного помятый листок, что хорошо заметно вверху и внизу. И все эффекты созданы с помощью CSS3.

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

Box 4
Отличный эффект листа бумаги, разложенного на столе. Достигается с помощью размещением теней.

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

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

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

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

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

Box 7
Теперь можно поработать и над более интересными моделями. Как насчет того, чтобы имитировать кусочки прозрачного скотча, которым прихватывают листочки к стене?

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

Добавлено: 09 Апреля 2018 20:04:45 Добавил: Андрей Ковальчук Нравится 0

Добавить