box-shadow и text-shadow в CSS3


box-shadow и text-shadow в CSS3
box-shadow и text-shadow в CSS3


В обоих случаях всегда код строится так:

...-shadow:<сдвиг по x> <сдвиг по y> <радиус размытия>  <цвет>;


inset - выворачивает тень, направляя ее внутрь блока. У text-shadow такого свойства нет и это единственное различие между ними. Цвет является не обязательным параметром по умолчанию идет черный.

По умолчанию тень стремится сверху слева и вниз направо. Для изменения стороны можно применять знак минуса:

box-shadow:-8px -8px 20px #ff0000;


Исходный код блоков на скрине выше:

<div style="
width:450px;
border:1px solid #ccc;
background:#f2f2f2;
font:20px verdana;
padding:50px 10px;
box-shadow:8px 8px 20px #ff0000;
text-shadow:5px 5px 5px #333;">
box-shadow:inset 8px 8px 20px #ff0000;
<br/>
text-shadow:5px 5px 5px #333;
</div>


Чем выше радиус размытия, тем тень светлее и прозрачнее, а если уменьшить радиус в половину, от исходного выше, тогда получим скрин ниже. Как видно, тень приобрела более насыщенный тон и более не стремится слиться с фоном сайта!

box-shadow и text-shadow в CSS3


Применяем еще одно удивительное свойство: border-radius и получаем уже совсем другой дизайн!

box-shadow и text-shadow в CSS3

box-shadow и text-shadow в CSS3


Для закрепления:
- первое число всегда сдвигает тень вбок (x)
- второе - по вертикали(y)
- третье - размытие, чем чило выше, тем светлее и прозрачнее будет тень
- четвертое - это код цвета. Если не указать, подставит по умолчание - черный
Понравилась статья "box-shadow и text-shadow в CSS3" из раздела Создание сайта » Работа с кодом? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 1 •  Просмотров: 2080   Дата: 11-июн-2013, 13:36

Похожие статьи

Комментарии

#1 Ahlam   

Гости
This is crsytal clear. Thanks for taking the time!
(24 июля 2013 10:39) • цитировать • •
b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit
© 2010-2015 artemmian.ru v 7.0: flexyflat tpl Designed by artstudios
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика