CSS3 — прозрачность, тени и градиенты
Возможность делать изображения и цвета прозрачными является одним из самых фундаментальных строительных блоков в CSS3. Существуют два способа установки прозрачности. Первый заключается в использовании функции rgba(), которая принимает четыре параметра. Первые три параметра задают значения (от 0 до 255) красной, зеленой и синей составляющей цвета. Последний параметр задает значение прозрачности, или альфа, которое может быть в диапазоне от 0 (полная прозрачность) до 1 (полная непрозрачность).
Следующее правило задает фон ярко-зеленого цвета 50-процентной прозрачности:
Браузеры, которые не поддерживают функцию rgba(), будут просто игнорировать это правило, и фон сохранит прозрачность по умолчанию — полная прозрачность.
Поэтому второй подход лучше. Здесь мы сначала устанавливаем сплошной резервный цвет, а потом заменяем его полупрозрачным цветом:
Таким образом, браузеры, которые не поддерживают функцию rgba(), все равно окрасят фон элемента, но только полностью непрозрачным цветом.
Чтобы добиться лучшего соответствия резервного цвета с основным, следует использовать такой резервный цвет, который наиболее точно воспроизводит эффект полупрозрачности. Например, если полупрозрачный цвет накладывается на белый фон, то этот цвет будет выглядеть еще светлее из-за просвечивающегося белого фона. При выборе резервного цвета этот эффект следует принять во внимание.
Спецификация CSS3 также определяет свойство стиля opacity (непрозрачность), которое работает точно так же, как и значение альфа. Значение opacity тоже устанавливается в диапазоне от 0 до 1, позволяя сделать любой элемент полупрозрачным:
На рисунке ниже показаны два примера полупрозрачности, один из которых реализован с помощью функции rgba(), а другой — с помощью свойства opacity:
Свойство opacity предпочтительнее использовать вместо функции rgba() в следующих случаях:
когда нужно сделать полупрозрачными несколько цветов. Свойство opacity позволяет сделать полупрозрачными цвет фона, текста и рамки элемента;
когда нужно сделать что-то полупрозрачным, даже не зная его цвет, например, потому, что цвет может устанавливаться другой таблицей стилей или кодом сценариев JavaScript;
когда нужно сделать полупрозрачным изображение;
когда нужно использовать переход, т.е. эффект анимации, который делает элемент постепенно появляющимся или исчезающим.
Спецификация CSS3 определяет два новых типа теней: блочные тени (box shadows) и текстовые тени (text shadows). Блочные тени обычно более полезны и имеют более высокий уровень поддержки, в то время как текстовые тени не работают ни в одной из версий Internet Explorer. Блочную тень можно использовать для создания прямоугольной тени позади любого блока элемента <div> (но не забудьте при этом о рамке, чтобы он продолжал выглядеть как блок). Тени могут даже следовать контурам блоков со скругленными углами:
Рассматриваемые тени создаются посредством свойств box-shadow и text-shadow. Далее приведен пример создания базовой блочной тени:
Первые два значения свойства box-shadow устанавливают горизонтальное и вертикальное смещения тени от исходного объекта. Положительные значения смещают тень вниз и вправо, отрицательные — вверх и влево. Следующее значение определяет размер размытия (blur, в данном примере 10 пикселов), которое увеличивает расплывчатость тени. Последнее значение определяет цвет тени. Если под блоком находится какое-либо содержимое, подумайте об использовании функции rgba(), чтобы сделать тень полупрозрачной.
Для более тонкой настройки тени в свойство box-shadow можно добавить два значения. Чтобы установить ширину (spread) тени — подсвойство, которое расширяет тень, утолщая ее сплошную часть между размытыми краями, добавляется значение между значениями размытия и цвета:
А чтобы создать тень, отражающуюся не наружу, а внутрь элемента, в конце списка значений добавляется значение inset. Лучший эффект достигается, когда тень располагается непосредственно поверх элемента, без горизонтального или вертикального смещения:
Свойство text-shadow требует подобного набора значений, но в другом порядке. Сначала указывается цвет, за ним следует горизонтальное и вертикальное смещения, а потом размытие:
Градиенты
Градиенты — это переходы цветов, которые могут создавать широкий диапазон эффектов, от едва различимой тени под панелью меню до психоделически раскрашенных кнопок.
На многих веб-страницах градиенты симулируются фоновыми изображениями. Но технология CSS3 позволяет веб-разработчику определить требуемый градиент, который будет воспроизведен браузером. Преимущество этого подхода состоит в том, что он уменьшает количество файлов изображений, которые нужно обрабатывать, и предоставляет возможность создавать градиенты, которые без стыков изменяют свой размер, позволяя заполнять любое пространство.
В CSS нет никаких специальных свойств для создания градиентов. Вместо них используется функция градиента для установки свойства background. Но не забудьте сначала назначить этому свойству сплошной цвет, чтобы создать резервную заливку для браузеров, которые не поддерживают градиенты (включая Internet Explorer, который поддерживает градиенты, только начиная с версии IE 10).
Существуют четыре функции градиентов, и для всех них требуется применять префиксы разработчиков браузеров. В этом разделе мы рассмотрим примеры градиентов для браузера Chrome (для которого применяется префикс -webkit-). Для поддержки браузеров Firefox и Opera нужно добавить точно такие же значения градиентов, но с префиксами -moz- и -o-.
Первой рассмотрим функцию linear-gradient(). Далее приводится одна из ее простейших форм, окрашивающая блок белым цветом вверху, который переходит в синий внизу:
Заменив значение top на left, получим линейный горизонтальный градиент. А указав для начала градиента угол блока, получим диагональный переход:
Можно создать многоцветный градиент, предоставив список цветов. Например, следующее правило создает трехцветный горизонтальный градиент:
Наконец, вместо равномерного распределения цветов градиента можно указать позицию начала каждого цвета посредством точек остановки градиента (gradient stops), растягивая или сжимая полосы или смещая их в ту или другую сторону.
Точки остановки градиентов указываются в процентах, где 0% означает начало градиента, а 100% — окончание. Следующий пример градиента растягивает оранжево-желтую среднюю часть:
Радиальный градиент создается с помощью функции radial-gradient(). Для нее нужно предоставить центр круга и цвет для внешнего края круга, где он совпадает с рамкой элемента. Следующее правило определяет радиальный градиент, начинающийся с белой точки в центре и переходящий к синему цвету на окружности:
Кроме упомянутых, есть еще много других опций, которые позволяют сместить центр круга, растянуть круг в эллипс, указать точку окончания одного цвета и начало другого и т.п. Но разработчики браузеров все еще пытаются определиться с простым единообразным синтаксисом для градиентов, приемлемым для них всех.
С другими примерами градиентов и двумя другими функциями для создания градиентов, не рассмотренными здесь (repeating-linear-gradient() и repeating-radial-gradient()), можно ознакомиться в блоге, посвященном браузеру Safari.
Во всех этих примерах градиенты создавались свойством background. Но функции градиентов также можно применить и для установки значения свойства background-image, что позволяет создать резервное изображение: сначала присваиваем свойству background-image соответствующее изображение для менее способных браузеров, а потом присваиваем ему значение посредством градиентной функции. Большинство браузеров достаточно сообразительные и не будут загружать изображение, если оно им не требуется, что позволяет сэкономить на трафике.
Внутренние тени в CSS 
Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.
Синтаксис
Прежде всего рассмотрим два основных способа реализации теней в CSS.
box-shadow
Конструкция box-shadow содержит несколько различных значений:
Horizontal offset и vertical offset — горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:
Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:
Край тени просто размывается. При различном значении spread radius видим следующее:
В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius, то они будут равны 0.
text-shadow
Синтаксис очень похож на box-shadow:
Значения аналогичные, только нет spread-shadow. Пример использования:
Inset в box-shadow
Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:
Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):
Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:
Изображения с тенями
Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div. Для начала вот обычный код картинки:
Логично предположить, что добавить тень можно так:
Но тень не видно:
Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый — это обернуть картинку в обычный div:
Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ — это установить изображение фоном нужного блока:
Вот, что может получится при использовании внутренних теней:
Inset в text-shadow
Для реализации внутренней тени текста простое добавление в код inset не работает:
Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:
Вот, что получается:
Добавляем секретный ингредиент background-clip, который обрезает все, что выходит за пределы текста (на темный фон):
Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:
CSS Shadow Effects
С помощью CSS можно добавить тень к тексту и к элементам.
В этой главе вы узнаете о следующих свойствах:
- text-shadow
- box-shadow
Тень текста CSS
Свойство CSS text-shadow применяет тень к тексту.
В самом простом использовании, вы только определяете горизонтальную тень (2px) и вертикальную тень (2px):
Эффект тени текста!
Пример
Затем добавьте цвет к тени:
Эффект тени текста!
Пример
Затем добавьте эффект размытия в тень:
Эффект тени текста!
Пример
В следующем примере показан белый текст с черной тенью:
Эффект тени текста!
Пример
В следующем примере показана красная Неоновая тень свечения:
Эффект тени текста!
Пример
Множественные тени
Чтобы добавить в текст более одной тени, можно добавить список теней с разделителями-запятыми.
В следующем примере показана красная и синяя Неоновая тень свечения:
Эффект тени текста!
Пример
В следующем примере показан белый текст с черным, синим и даркблуе тенью:
Эффект тени текста!
Пример
Для создания простой границы вокруг некоторого текста (без теней) можно также использовать свойство text-shadow:
Граница вокруг текста!
Пример
CSS Box-свойство тени
Свойство CSS box-shadow применяет тень к элементам.
В самом простом использовании, вы только определяете горизонтальную тень и вертикальную тень:
Пример
Затем добавьте цвет к тени:
Пример
Затем добавьте эффект размытия в тень:
Пример
Вы также можете добавить тени в:: before и:: After псевдо-элементы, чтобы создать интересный эффект:
Пример
#boxshadow <
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
>
#boxshadow img <
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
>
#boxshadow::after <
content: »;
position: absolute;
z-index: -1; /* hide shadow behind image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
>