| Kosten | Суббота, 10 Февраля 2018, 02:26 | Сообщение 1 |
| За последние несколько лет CSS3 сделал огромные улучшения и получил огромную популярность. Большинство разработчиков включают их на свои веб сайты для повышения производительности. Помимо разработки уникального стиля, CSS3 теперь используется для разработки интересных интерфейсных прототипов. CSS3 box shadows - уникальная и мощная функция языка, что может быть использована для создания высокоэффективных конструкций, которые могут использоваться в различных браузерах.
Что именно является свойством CSS3 для тени
Коробки теней являются свойством CSS3, которые можно использовать для формирования теневых эффектов для произвольных компонентов, используемых при проектировании сайта. Тень коробки может принимать форму элемента с четко определенными границами. Основная тень коробки состоит из шести различных свойств, как вставки, левого, верхнего, размытия, размера и цвета. Разработчики также могут создавать эффект всплывающих окон или слоев, используя эффект теневого тэга CSS3.
Для этого используйте свойство тени с несколькими полями или свойство теневой тени на элементах сайта. В первый раз когда эффект используется, он появится в верхней части элемента. Когда остальные эффекты будут применены, он будет постепенно стекаться, придавая элементу всплывающее окно или некоторые довольно творческие эффекты, которые зависят от различных стилей в зависимости от того как они применяются. При применении тени тэга CSS3 к элементу он остановится, когда достигнет конца элемента. Эта особенность особенно полезна при попытке создать эффект тени над белым или монохроматическим фоном.
Как это работает?
Команды теневого тэга обычно должны быть записаны в значениях длины 2-4 с каждым разделенным запятой. При желании можно создавать различные виды эффектов, а также цветовые схемы и эффекты вставки. Просто запишите различные значения, что обеспечивают горизонтальные эффекты, вертикальные эффекты и расстояние размытия соответственно и определяют цвет тени, которая падает, путем записи значения write после значения длины 2-4.
Тот факт, что эти эффекты совместимы с большинством ведущих браузеров, упрощает работу с ними.
Тень:
Код <div class="wrap"> <div class="box box1 shadow1"> <h3>ZORNET.RU 1</h3> </div> <div class="box box2 shadow2"> <h3>ZORNET.RU 2</h3> </div> <div class="box box3 shadow3"> <h3>ZORNET.RU 3</h3> </div> <div class="box box4 shadow4"> <h3>ZORNET.RU 4</h3> </div> <div class="box box5 shadow5"> <h3>ZORNET.RU 5</h3> </div> <div class="box box6 shadow6"> <h3>ZORNET.RU 6</h3> </div> <div class="box box7 shadow7"> <h3>ZORNET.RU 7</h3> </div> <div class="box box8 shadow8"> <h3>ZORNET.RU 8</h3> </div> </div>
CSS
Код .wrap{
margin-left:20px;
}
.box{
width:40%;
height:200px;
float:left;
background-color:white;
margin:25px 15px;
border-radius:5px;
}
.box h3{
font-family: 'Didact Gothic', sans-serif;
font-weight:normal;
text-align:center;
padding-top:60px;
color:#fff;
}
.box1{
background-color: #ad726e;
}
.box2{
background-color: #bdb42d;
}
.box3{
background-color: #69ad6b;
}
.box4{
background-color: #76b591;
}
.box5{
background-color: #5da0b5;
}
.box6{
background-color: #9EB3EB;
}
.box7{
background-color: #b581c3;
}
.box8{
background-color: #8655b9;
}
.shadow1, .shadow2, .shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
position:relative;
}
.shadow1,.shadow2,.shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
/*****************************************************************dashed border
****************************************************************/
.shadow1 h3, .shadow2 h3, .shadow3 h3, .shadow4 h3, .shadow5 h3, .shadow6 h3, .shadow7 h3, .shadow8 h3{
width:87%;
height:100px;
margin-left:6%;
border:2px dashed #F7EEEE;
border-radius:5px;
}
/****************************************************************
*styling shadows
****************************************************************/
.shadow1:before, .shadow1:after{
position:absolute;
content:"";
bottom:12px;left:15px;top:80%;
width:45%;
background:#9B7468;
z-index:-1;
-webkit-box-shadow: 0 20px 15px #9B7468;
-moz-box-shadow: 0 20px 15px #9B7468;
box-shadow: 0 20px 15px #9B7468;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
transform: rotate(-6deg);
}
.shadow1:after{
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
right: 15px;left: auto;
}
.shadow2:before{
position:absolute;
content:"";
width:80%;
top:140px;bottom:15px;left:30px;
background-color:#9F8641;
z-index:-1;
-webkit-box-shadow:0 23px 17px 0 #9F8641;
-moz-box-shadow:0 23px 17px 0 #9F8641;
box-shadow: 0 23px 17px 0 #9F8641;
-webkit-transform:rotate(-4deg);
-moz-transform:rotate(-4deg);
transform:rotate(-4deg);
}
.shadow3:before, .shadow3:after{
content:"";
position:absolute;
bottom:0;top:2px;left:15px;right:15px;
z-index:-1;
border-radius:100px/30px;
-webkit-box-shadow:0 0 30px 2px #479F41;
-moz-box-shadow:0 0 30px 2px #479F41;
box-shadow: 0 0 30px 2px #479F41;
}
.shadow4:before, .shadow4:after{
position:absolute;
content:"";
top:14px;bottom:14px;left:0;right:0;
box-shadow:0 0 25px 3px #548E7F;
border-radius:100px/10px;
z-index:-1;
}
.shadow5:before, .shadow5:after{
position:absolute;
content:"";
box-shadow:0 10px 25px 20px #518C96;
top:40px;left:10px;bottom:50px;
width:15%;
z-index:-1;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.shadow5:after{
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;left: auto;
}
.shadow6:before, .shadow6:after{
position:absolute;
content:"";
top:100px;bottom:5px;left:30px;right:30px;
z-index:-1;
box-shadow:0 0 40px 13px #486685;
border-radius:100px/20px;
}
.shadow7:before, .shadow7:after{
position:absolute;
content:"1";
top:25px;left:20px;bottom:150px;
width:80%;
z-index:-1;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
transform: rotate(-6deg);
}
.shadow7:before{
box-shadow:10px -10px 30px 15px #984D8E;
}
.shadow7:after{
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
transform: rotate(7deg);
bottom: 25px;top: auto;
box-shadow:10px 10px 30px 15px #984D8E;
}
.shadow8{
box-shadow:
-6px -6px 8px -4px rgba(250,254,118,0.75),
6px -6px 8px -4px rgba(254,159,50,0.75),
6px 6px 8px -4px rgba(255,255,0,0.75),
6px 6px 8px -4px rgba(0,0,255,2.75);
}
Демонстрация:
| | Страна: (RU) |
| |
