Tweet Здравствуйте
Tweet Здравствуйте. Сегодня я продолжу обзор новинок из стана CSS3. Мы уже рассмотрели: border-radius и text-shadow. Сегодня очередь CSS тени под названием: box-shadow. Его функциональность близка к text-shadow, но охватывает больше объектов для возможных операций. С вашего позволения я буду рассказывать в похожем стиле, как и о text-shadow.
Стандартный синтаксис css тени: box-shadow
Положительные значения css тени: box-shadow
| 1 | {box-shadow: 3px 4px 2px #000} |
- 3px – это смещение тени по горизонтали (вправо на 3px); 4px – это смещение тени по вертикали (вниз на 4px); 2px – это растушевка тени (чем больше пикселей, тем более размытая тень); #000 – это собственно цвет тени (черный цвет);
Пример: Синий квадрат на белом фоне и черная тень HTML:
| 1 | =”prov”>> |
Стили:
| 1 2 3 4 5 6 | .prov{ width:50px; height:50px; background:blue; box-shadow:6px 6px 2px #000; } |
Результат:
Отрицательные значения css тени: box-shadow
| 1 | {box-shadow: -3px -4px 2px #000} |
- -3px – это смещение тени по горизонтали (влево на 3px); -4px – это смещение тени по вертикали (вверх на 4px); 2px – это растушевка тени (чем больше пикселей, тем более размытая тень); #000 – это собственно цвет тени (черный цвет);
Пример: Синий квадрат на белом фоне и черная тень HTML:
| 1 | =”prov”>> |
Стили:
| 1 2 3 4 5 6 | .prov{ width:50px; height:50px; background:blue; box-shadow:-6px -6px 2px #000; } |
Результат:
Внутренняя тень
Для того, что бы тень уходила внутрь нужно добавить команду inset HTML:
| 1 | =”prov”>> |
Стили:
| 1 2 3 4 5 6 | .prov{ width:50px; height:50px; background:blue; box-shadow:inset 6px 6px 2px #000; } |
Результат:
Расширенный стандартный синтаксис box-shadow
| 1 | {box-shadow: 3px 4px 2px 5px #000} |
- 3px – это смещение тени по горизонтали (влево на 3px); 4px – это смещение тени по вертикали (вниз на 4px); 2px – это растушевка тени (чем больше пикселей, тем более размытая тень); 5px — радиус действия тени; #000 – это собственно цвет тени (черный цвет);
Что понять, что такое «радиус действия тени» и где его можно применить посмотрите на примеры: Пример: Синий квадрат на белом фоне и черная тень HTML: Стили: .prov{ width:50px; height:50px; background:blue; box-shadow:{6px 6px 2px 8px #000;} Результат: Пример не слишком нагляден. Даже сбивает с толку. Смотрим на другой: HTML:
| 1 | =”prov”>> |
Стили:
| 1 2 3 4 5 6 | .prov{ width:50px; height:50px; background: blue; box-shadow:{0 0 2px 8px #000; } |
Результат: Как видим у нас получилось эффект обводки. Чем больше значения, тем сильнее тень расширяется во все стороны.
Один объект и несколько css теней от box-shadow
box-shadow поддерживает множественные тени. Располагаются они следующим образом: первая по списку тень первая и к объекту, а вторая по списку уже будет за первой и так далее … Давайте лучше посмотрим на примере: Пример: синий квадрат, первая тень черная, вторая тень красная HTML:
| 1 | =”prov”>> |
Стили:
| 1 2 3 4 5 6 | .prov{ width:50px; height:50px; background: blue; box-shadow:{0 0 2px 8px #000, 0 0 2px 16px #F00 } |
Результат:
Обязательные и необязательные параметры box-shadow
В box-shadow обязательны только два параметра:
| 1 | box-shadow {inset 1 2 3 4 #5} |
Обязательные:
- 1 — сдвиг по горизонтали; 2 — сдвиг по вертикали;
Не обязательные:
- inset — направление тени внутырь; 3 – растушевка тени (если не указана, то тень максимально жесткая как при 0px); 4 — радиус действия тени(если не указано тень не расширяется); 5 – цвет тени (если не указана, берется цвет текста);
На этом закончу. Удачи!!! С уважением Тригуба Сергей! Интересное — девка гонит blah Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email