Приложение 1: box-shadow

Здесь браузеры воспринимают каждый свой синтаксис:

Google Crome и Safari
```
-webkit-box-shadow: 5px 5px 5px #ABC;
```

Internet Explorer

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";

В Опере и Firefox
```
box-shadow: 5px 5px 5px #ABC;
```

.ten {
-webkit-box-shadow: 5px 5px 5px #40310a; 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#40310a,direction=125,strength=5)";
box-shadow: 5px 5px 5px #40310a;
}

<div class="ten">...</div>

Фильтр IE я буду в дальнейшем опускать.

box-shadow: смещение_вправо смещение_вниз размытие ширина цвет inset;

Смещение вправо и вниз
box-shadow: 15px 10px #40310a;

Смещение вправо и вверх
box-shadow: 15px -10px #40310a;

Смещение влево и вверх
box-shadow: -15px -10px #40310a;

Размытие 5px
box-shadow: 0 0 5px #40310a;

Размытие 20px
box-shadow: 0 0 20px #40310a;

Размытие 50px
box-shadow: 0 0 50px #40310a;

Ширина 1px
box-shadow: 0 0 0 1px #40310a;

Ширина 5px
box-shadow: 0 0 0 5px #40310a;

Ширина 10px
box-shadow: 0 0 0 10px #40310a;

Объединение
box-shadow: 2px 5px 5px 3px #40310a;

Тень внутри блока
box-shadow: 0px 0px 20px #40310a inset;

Можно задать несколько параметров, разделённых запятой.

box-shadow: 5px 5px 5px #40310a, -5px -5px 5px #40310a;

box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

Мне понравился два примера на Habrahabr.ru

кнопка CSS

<style type="text/css">
.box1 {
background: #404040;
border-radius: 15px;
box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px,
inset rgba(0,0,0,0.5) -8px -8px 18px 5px;
-webkit-box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px,
inset rgba(0,0,0,0.5) -8px -8px 18px 5px;
font-size: 20px;
text-align: center;
color: #fff;
text-indent: 0px;
padding: 20px 40px;}
</style>

<span class="box1">кнопка CSS</span>

как сделать тень

<style type="text/css">
.box2 {
background: #804020;
border: 1px solid #ffffff;
border-radius: 40px;
box-shadow:
/* линии внутри */
inset #804020 0 0 0 3px,
inset #ffffff 0 0 0 4px,
inset #804020 0 0 0 7px,
inset #ffffff 0 0 0 8px,
/* линии снаружи */
#804020 0 0 0 3px,
#ffffff 0 0 0 4px,
#804020 0 0 0 7px,
#ffffff 0 0 0 8px,
#804020 0 0 0 15px;
-webkit-box-shadow:
inset #804020 0 0 0 3px,
inset #ffffff 0 0 0 4px,
inset #804020 0 0 0 7px,
inset #ffffff 0 0 0 8px,
#804020 0 0 0 3px,
#ffffff 0 0 0 4px,
#804020 0 0 0 7px,
#ffffff 0 0 0 8px,
#804020 0 0 0 15px;
font-size: 20px;
text-align: center;
color: #fff;
text-indent: 0px;
padding: 20px 40px;}
</style>

<span class="box1">как сделать тень</span>

Автор http://www.zurb.com/ предложил вариант куба:

<style type="text/css">

ul.peri-boxes { margin: 0 auto; margin-top: 100px; }

ul.peri-boxes li{ float: left; width: 100px; height: 52px; margin: 0px; list-style: none; }

ul.peri-boxes li a{ float: left; width: 100px; height: 37px; font-size: 16px; text-decoration: none;}

ul.peri-boxes li a.box { 
  background-color: #1b2a34; 
  color: #fff; 
  font-weight: bold; 
  text-align: center; 
  vertical-align: middle; 
  padding-top: 15px; 
  cursor: pointer; 
  left:0px; 
  top:0px; 
  position: relative;
  -webkit-box-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000;
  box-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000;
  -webkit-transition: all 0.12s ease-out;
  -moz-transition: all 0.12s ease-out;
  -o-transition: all 0.12s ease-out;
  -webkit-border-radius: 0px;
  text-shadow: 0 -1px #000;
  border: 1px solid #000;
}
  
ul.peri-boxes li a.box:hover { 
  left:-23px;
  top:-23px; 
  width: 100px; 
  height: 47px;
  z-index: 1;
  font-size: 1.5em;
  -webkit-animation-name: boxPulse;
  -webkit-animation-duration: .7s; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .12s; 
}
  </style>

<ul class="peri-boxes">
<li><a href="" class="box">наведите</a></li>
<li><a href="" class="box">на</a></li>
<li><a href="" class="box">каждый</a></li>
<li><a href="" class="box">куб</a></li>
</ul>

А также, конечно, нельзя пройти мимо решения http://nicolasgallagher.com.

Lifted corners

<style type="text/css">

.container {
  position:relative;           
  z-index:1;
}        
        
.drop-shadow {
  position:relative;
  float:left;
  width:40%;    
  padding:1em; 
  margin:2em 10px 4em; 
  background:#fff;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before, .drop-shadow:after {
  content:"";
  position:absolute; 
  z-index:-2;
}
        
.drop-shadow p {
  font-size:16px;
  font-weight:bold;
}

.lifted {border-radius:4px;}
        
.lifted:before,  .lifted:after { 
  bottom:15px;
  left:10px;
  width:50%;
  height:20%;
  max-width:300px;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform:rotate(-3deg);    
  -moz-transform:rotate(-3deg);   
  -ms-transform:rotate(-3deg);   
  -o-transform:rotate(-3deg);
  transform:rotate(-3deg);
}
        
.lifted:after {
right:10px; 
left:auto;
-webkit-transform:rotate(3deg);   
-moz-transform:rotate(3deg);  
-ms-transform:rotate(3deg);  
-o-transform:rotate(3deg);
transform:rotate(3deg);
}     
</style>
<div class="container"><div class="drop-shadow lifted">
            <p>Lifted corners</p>
</div></div>

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

Curled corners

<style type="text/css">

.curled {
  border:1px solid #efefef; 
  border-radius:0 0 120px 120px / 0 0 6px 6px;
}
      
.curled:before, .curled:after {
  bottom:12px;
  left:10px;
  width:50%;
  height:55%;
  max-width:200px;
  -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
  box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
  -webkit-transform:skew(-8deg) rotate(-3deg);
  -moz-transform:skew(-8deg) rotate(-3deg);
  -ms-transform:skew(-8deg) rotate(-3deg);
  -o-transform:skew(-8deg) rotate(-3deg);
  transform:skew(-8deg) rotate(-3deg);
} 
      
.curled:after { 
  right:10px; 
  left:auto;
  -webkit-transform:skew(8deg) rotate(3deg); 
  -moz-transform:skew(8deg) rotate(3deg);     
  -ms-transform:skew(8deg) rotate(3deg);     
  -o-transform:skew(8deg) rotate(3deg); 
  transform:skew(8deg) rotate(3deg);
}
</style>
<div class="container"><div class="drop-shadow curled">
            <p>curled corners</p>
</div></div>

Vertical curves

<style type="text/css">

.curved:before {
  top:10px;
  bottom:10px;
  left:0;
  right:50%;
  -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
  box-shadow:0 0 15px rgba(0,0,0,0.6);
  border-radius:10px / 100px;
}

.curved-vt-2:before {right:0;}
</style>
<div class="container"><div class="drop-shadow curved curved-vt-2">
            <p>Vertical corners</p>
</div></div>

Horizontal curves

Вместо

.curved-vt-2:before {right:0;}

в вышеуказанном коде напишим

.curved-vt-2:before {
  top:0;
  bottom:0;
  left:10px;
  right:10px;
  border-radius:100px / 10px;
}

Single horizontal curve

Аналогично вместо

.curved-vt-2:before {right:0;}

в укажите

.curved-vt-2:before {
  top:50%;
  bottom:0;
  left:10px;
  right:10px;
  border-radius:100px / 10px;
}

Perspective corners

<style type="text/css">

.perspective:before {
  left:80px;
  bottom:5px;
  width:50%;
  height:35%;
  max-width:200px;
  -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  -webkit-transform:skew(50deg);
  -moz-transform:skew(50deg);
  -ms-transform:skew(50deg);
  -o-transform:skew(50deg);
  transform:skew(50deg);
  -webkit-transform-origin:0 100%;
  -moz-transform-origin:0 100%;
  -ms-transform-origin:0 100%;
  -o-transform-origin:0 100%;
  transform-origin:0 100%;
}
       
.perspective:after {display:none;}
</style>
<div class="container"><div class="drop-shadow perspective">
            <p>perspective corners</p>
</div></div>

Приложение 1

Страницы

box-shadow

Нет комментариев.

Комментарии

Комментарии

Отправить комментарий