Главная > CSS/Style Sheets > Создаем привлекательные эффекты с помощью CSS3 box-shadow
Создаем привлекательные эффекты с помощью CSS3 box-shadow24 июля 2012, 16:55. Разместил: Design FactoRy |
Тень и внутренняя тень – это пара эффектов, с которыми вы можете быть знакомыми еще из программы Photoshop. Но сейчас, когда CSS3 во всех заголовках, нам все меньше и меньше приходится обращаться за помощью к Photoshop, и даже эти эффекты сегодня можно добавить при помощи чистого кода. Параметр box-shadow Параметр box-shadow позволяет нам добавлять несколько теней (внутренних или внешних) к блочным элементам. Для того чтобы сделать это, нам потребуется указать значения color, size, blur и offset.
Ядерная наука? Не совсем. Давайте посмотрим небольшой пример:
Это объявление CSS сгенерирует для нас следующую тень: * положительное значение горизонтального смещения позволяет нам отодвинуть тень от блока в правую сторону, отрицательное – в левую. * следующее значение отвечает за вертикальное смещение. Положительное значение вертикального отступа просто смещает тень элемента вниз, отрицательное - вверх. * нам запрещено пользоваться отрицательными значениями для радиуса размытия. Чем больше значение – тем больше тень размыта, как это можно наблюдать выше. * положительные значения дистанции размытия позволяют вам увеличить размытие по указанному радиусу. * отрицательные значения позволяют нам сделать тень более четкой. * параметр color отвечает за цвет тени. * ключевое слово inset (которое мы опустили выше) позволяет нам изменять тип тени с внутренней на внешнюю. Вышеприведенная теория – это всего лишь небольшая часть информации, и если вам хочется узнать подробнее, то вам следует ознакомиться со спецификацией W3C. Довольно теории, давайте творить! Теперь же давайте посмотрим, какие преимущества можно извлечь из этого параметра CSS3. Ниже мы продемонстрируем вам, каким образом вы можете улучшить собственные дизайны с помощью box-shadow. Добавляем ощущение глубины Ссылка на материал
Тени Следующие статьи нас вдохновляют: * Тени на CSS3 (автор Дивья Маньян) * CSS-тени без изображений (автор Николас Гэллахер)
Подсказки Попробуйте усовершенствовать тени в собственных проектах с помощью RGBa. Параметр box-shadow может быть использован при помощи CSS3 RGBa-цветов для создания теней разных уровней плотности. Если ваш браузер поддерживает параметр box-shadow, то он обязательно должен поддерживать режим RGBa. Используйте несколько теней в одном CSS-объявлении:
Браузерная поддержка * Internet Explorer 9/10 * Firefox (от 3.5) * Safari/Chrome * Opera (от 10.5) В завершение Мы рекомендуем вам использовать эти параметры уже с сегодняшнего дня, если до этого вы этого не делали. Почему? Да потому что вы можете использовать box-shadow и при этом не преломлять отображение разметки в старых браузерах. * Посмотреть демо Вернуться назад |