16 рамок на CSS3 для оформления содержания. Часть 2 из 2
В данном уроке мы сделаем 16 различных рамочек для оформления соодержания пользуясь только средствами 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); }
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; } /* Данные псевдо классы (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
Если скомбинировать градиент от серого к белому и прозрачную ленточку, то получится отличный эффект.
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */ .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
Еще один вариант рамки для оформления содержания с загибами, тенями и прозрачной ленточкой.
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */ .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
В данном варианте скомбинированы эффект смятой буамги со сгибом в нижнем правом углу. Рамка "пришпилена" к стене двумя прозрачными ленточками по обеим сторонам.
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */ .box13{ margin: 50px; width: 300px; min-height: 150px; padding: 0 0 1px 0; position:relative; background:#fff; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3); border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; -webkit-border-top-left-radius: 60px 5px; -moz-border-radius-topleft:60px 5px; border-top-left-radius:60px 5px; -webkit-border-top-right-radius: 60px 5px; -moz-border-radius-topright:60px 5px; border-top-right-radius:60px 5px; -webkit-border-bottom-right-radius: 60px 60px; -moz-border-radius-bottomright:60px 60px; border-bottom-right-radius: 60px 60px; -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; } /* Нижний правый загиб */ .box13:before{ content:''; width: 25px; height: 20px; position: absolute; bottom:0; right:0; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-bottomright: 30px; border-bottom-right-radius: 30px; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); } /* Тень загиба */ .box13:after{ content: ''; z-index: -10; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2); box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); transform: rotate(0deg) translate(-45px,-20px) skew(20deg); } /* Верхняя тень слева */ .box13_corner_lf{ width: 100px; height: 100px; top:0; left:0; position:absolute; z-index:-6; display: inline-block; -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg); -o-transform: rotate(2deg) translate(20px,25px) skew(20deg); transform: rotate(2deg) translate(20px,25px) skew(20deg); } /* Верхняя тень справа */ .box13_corner_rt{ content: ''; width: 50px; height: 50px; top:0; right:0; position:absolute; display: inline-block; z-index:-6; -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); transform: rotate(2deg) translate(-14px,20px) skew(-20deg); } /* Левая прозрачная ленточка */ .box13_tape:before{ content: ''; position:absolute; top:0; left: 0; width: 130px; height: 40px; background:rgba(0,0,0,0.2); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px); -moz-transform: rotate(90deg) skew(0,0) translate(100px,65px); -o-transform: rotate(90deg) skew(0,0) translate(100px,65px); transform: rotate(90deg) skew(0,0) translate(100px,65px); } /* Правая прозрачная ленточка */ .box13_tape:after{ content: ''; position:absolute; top:0; right: 0; width: 130px; height: 40px; background:rgba(0, 0, 0, 0.1); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px); -moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px); -o-transform: rotate(90deg) skew(0,0) translate(100px,-65px); transform: rotate(90deg) skew(0,0) translate(100px,-65px); }
Вох 14
Но с помощью CSS3 можно размещать объекты не только горизонтально или вертикально, но и под углом. В данном варианте прозрачная ленточка "наклеена" под углом.
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */ .box14{ 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
Данный вариант выглядит как стопка заметок, прикрепленных к стене кусочком прозрачного скотча.
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */ .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
В заключение сделаем рамку в виде фотографии Полароида, которая прикреплена к стене двумя кусочками скотча (один поверх другого).
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */ .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); }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/UQ2bnB8JEL8/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.