CSS Box Shadow онлайн урок.


Используется при отбрасывании теней от элементов уровня блока (например, div).

.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
  1. Горизонтальное смещениетени, положительное означает, что тень будет справа от поля, отрицательное смещение поместит тень слева от поля.
  2. Вертикальное смещениетени, отрицательное означает, что тень окна будет выше поля, положительная означает, что тень будет ниже поля.
  3. Радиус размытия(опционально), если установлено значение 0, тень будет резкой, чем выше число, тем более размытым будет.
  4. Радиус распространения(необязательный), положительные значения увеличивают размер тени, отрицательные значения уменьшают размер. Значение по умолчанию равно 0 (тень такого же размера, как размытие).
  5. Цвет

# Пример

# Внутренняя тень

.shadow {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}

# Пример

# Internet Explorer Box Shadow

Вам нужны дополнительные элементы...

<div class="shadow1">
<div class="content">
Box-shadowed element
</div>
</div>

.shadow1 {
margin: 40px;
background-color: rgb(68,68,68); /* Needed for IEs */

-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
.shadow1 .content {
position: relative; /* This protects the inner element from being blurred */
padding: 100px;
background-color: #DDD;
}

# Только одна сторона

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

.one-edge-shadow {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}

# Связанный