Использование свойства CSS тени блока
19 мая 2016 | Опубликовано в css | 1 Комментарий »
Сегодня мы поговорим об использовании свойства CSS тени применительно к блокам. Так же, как свойство тени текста создает тень тексту, свойство тени блока создает тень всем остальным объектам. Для него даже используется подобный простой синтаксис с пятью значениями:
box-shadow: horizontal offset vertical offset blur spread color;
Перевод значений: горизонтальный отступ, вертикальный отступ, размытие, распространение, цвет.
Если использовать свойство тени блока вместе с различными трансформациями и другими свойствами CSS3, можно свести к минимуму обработку изображений в таких программах, как Photoshop, и код CSS, который гораздо проще менять и поддерживать, который имеет малый объем, и обработка которого занимает мало вычислительных ресурсов, может использоваться для создания большей части визуальных эффектов на странице.
Обратите внимание, что в коде HTML все является блоком, даже если его не видно, или если он только подразумевается. Все изображения — блоки:
img#greek-temple { width: 400px; height: 259px; border: 15px solid #ffd; box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3); }
Если задать значение вертикального или горизонтального отступа как 0 и добавить много размытия, можно создать эффект свечения, а также изобразить эффекты от подразумевающегося освещения. Таким же образом можно создавать эффекты и для свойства тени текста. У свойства тени блока есть также возможность создавать внутренние тени, благодаря которым создается ощущение выпуклости:
h3#inception-logo { font-family: "Arial Black", Arial, sans-serif; text-align: center; letter-spacing: .3em; padding: 0 2em; font-weight: 900; font-size: 55px; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset; }
Анимация свойства тени блока требует значительных вычислительных ресурсов, у Tobias Ahlin есть несколько интересных идей для плавного анимирования свойства тени блока.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
193