Css font box shadow

Установка тени для блока и текста в CSS

Посмотрите на макеты сайтов и почти на всех обязательно присутствуют тени у блоков, картинок и реже у текста. Прошли те времена, когда верстальщики вырезали из PSD макета элементы вместе с тенями. Тогда ещё не было CSS-правил для теней.

Как сделать тень блоку в CSS

Нужно блоку добавить всего одно свойство, box-shadow и передать несколько параметров.

box-shadow: 10px 10px 15px #ebe6e6;

Смещение тени по X. Указываем на сколько пикселей сместить тень вправо от элемента или влево с отрицательным значением.

Смещение тени по Y. Задаем количество пикселей с отрицательным значением для смещения вверх и с положительным значением для смещения вниз.

Размытие тени. Прописываем радиус размытия тени. Чем больше радиус, тем сильнее размоются края тени.

Цвет тени. Можно указать как в шестнадцатеричной системе, так и в формате RGB-a.

Я обычно задаю цвет тени в формате RGB-a. Наличие альфа-канала, позволяет сделать тень полупрозрачной. Так она получается мягкой и более естественной.

box-shadow: 10px 10px 15px rgba (235, 230, 230, 0.5);

Пример тени для блока

// CSS код
.block width: 250px;
height: 150px;
height: 150px;
display: block;
margin: 50px auto;
background-color: #f88bca;
box-shadow: 10px 10px 15px rgba(235, 230, 230, 0.5);
>

Пример тени снизу

Тень вокруг блока

Внутренняя тень

Чтобы установить тень внутри блока, первым параметром передаем ключевое слово: inset.

box-shadow: inset 0 0 15px rgba(255, 255, 255); // CSS

Тень у текста

Тень у текста задается по такому же принципу, как и у блока, но через свойство text-shadow.

// HTML

Текст с тенью

// CSS
h1 text-align: center;
font-size: 50px;
color: #d31818;
text-shadow: 3px 3px 3px rgba(101, 105, 108, 0.7);
>

Двойная тень

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

box-shadow:
-10px 0 20px -5px #333,
10px 0 20px -5px #333;

CSS генератор теней

Держать в голове последовательность параметров для создания теней, совсем необязательно. Можно пользоваться CSS генератором теней.

Обучающей информации в интернете много, но собирать её по крупицам неэффективно. Несистематичные знания, полученные из разных источников, плохо выстраиваются в общую картину. Остаются какие-то пробелы в знаниях, мешающие двигаться дальше. И на этом этапе, многие бросают изучение HTML/CSS.

Дорогие начинающие веб-мастера, призываю вас учиться у профессионалов. Это интереснее, легче и во много раз эффективнее. Познакомьтесь с описанием видео-курса «Верстка сайта с нуля 2.0».

Создано 30.09.2019 10:17:29

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

CSS3. Работа с тенями. Часть 2

Продолжаем погружаться в искусство владения тенями в новых модулях CSS3. Прошлый раз мы рассматривали работу с box-shadow, сегодня мы перейдем к text-shadow.

Напомню, что оба правила, хотя и описаны в разных модулях, работают практически идентичным образом, поэтому, если вы уже знакомы с box-shadow по первой части, в этой, второй, части вы увидите много знакомого. И, прежде, чем переходить непосредственно к примерам, давайте сразу разберемся, какие есть различия, чтобы не останавливаться на них далее.

text-shadow vs box-shadow

box-shadow: inset? h-offset v-offset blur-radius spread-distance color;

В переводе на русский это означает, что для текста невозможны внутренние тени (inset) и синтаксис для text-shadow выглядит следующим образом:

Аналогично box-shadow возможны множественные тени накладываемые поверх друг друга так, что первая тень оказывается наверху. Теперь давайте смотреть, как это все работает.

text-shadow

Сдвиги и цвет

Начнем со сдвигов и работы с цветом. За сдвиги тени отвечают первые два линейных параметра, указывающих длинну (1.1–1.4):

Если вы указываете положительные значения, тень сдвигается влево и вниз (1.1):

text-shadow:10px 10px; width:300px;

text-shadow:-5px -5px; width:300px; color:blue;

Аналогично box-shadow, все браузеры, кроме основанных на webkit, если цвет тени явно не задан, берут его из цвета текста (1.1–1.2). Это может быть полезным, например, если вы хотите автоматически делать тень цвета текста, но, например, размытой (см. примеры 2.3 и 2.4). Для явного задания цвета тени достаточно прописать нужное значение в правиле:

text-shadow:-1px -1px white; color:blue; background:#333; /* 1.3 */

text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee; /* 1.4 */

Обратите внимание, что при указании цвета полностью применимы возможности CSS3 Color, включая указание уровня прозрачности цвета (alpha) через rgba или hsla.

Размытие

Третий линейный параметр описывает радиус размытия тени (2.1–2.4):

В полном согласии с определением box-shadow, размытие задается некоторым положительным числом — радиусом размытия. Само размытие может осуществляться UA по любому алгоритму с большой точностью аналогичному размытию по Гауссу с половинным радиусом относительно границы тени.

В первых двух примерах (2.1 и 2.2) задан разный радиус размытия:

text-shadow:5px 5px 3px darkred; color:red; /* 2.1 */

text-shadow:4px -4px 10px red; color:azure; background:#333; /* 2.2 */

Во второй паре примеров (2.3 и 2.4) различается только цвет текста и фона, а сами правила задания тени описаны через применяемый к блокам класс blured-shadow:

color:lightgray; background:#333; /* 2.4 */

(Этот пример некорректно работает в Chrome из-за описанных выше нюансов, впрочем спецификация говорит, что пропущенный цвет остается на усмотрение UA.)

Растяжение и сжатие

Четвертый линейный параметр, если он присутствует, отвечает за растяжение или сжатие тени.

Для увеличения тени spray-distance должен быть положительным (3.1):

text-shadow:5px 5px 0px 3px lightgreen; color:green;

text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;

text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green; background:#333;

Важная деталь. Насколько мне известно, в настоящий момент (сюрприз!) параметр spray-distance для text-shadow поддерживается только в Internet Explorer 10, а остальные браузеры его не поддерживают (см. например, bug 655590 «[css3-text] Support the spread radius in text-shadow» в Mozilla Bug tracker). Это же верно и в отношении большинства учебников и статей в интернете, которые своевременно не были обновлены вслед за изменениями в спецификации. Поэтому в большинстве примеров, которые вы найдете в сети, вы даже не увидите упоминания возможности растяжения или сжатия тени текста 😉

И еще одна важная деталь. Наличие четвертого параметра сегодня трактуется неподдерживающими его браузерами как неправильное задание тени — в результате эти правила просто игнорируются. Поэтому для обеспечения хоть какого-то уровня совместимости, если вы используете spread-distance, необходимо дублировать правила, например, так:

text-shadow: 0px 0px 10px lightgreen; /* 3.4 */ text-shadow: 0px 0px 10px 10px lightgreen; /* 3.5 */

Если вы все же хотите смоделировать увеличение тени, в определенных пределах это можно сделать через множественные тени, рассматриваемые в следующем разделе (см. примеры 4.6 и 4.7).

Множественные тени

Наконец, аналогично теням для блоков, к тексту также можно применять несколько теней одновременно, добиваясь при этом различных эффектов (4.1–4.5):

Начиная с простейшей дублированной обводки (4.1):

text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta;

text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35), 6px -6px 4px 2px rgba(255,255,255,0.25), -3px -3px 4px 6px rgba(255,0,255,0.15); 

text-shadow: 0 0 0 3px white, 0 0 2px 6px magenta, 0 0 1px 9px white, 0 0 6px 12px magenta;

text-shadow: 0 0 2px #fff, 0 0 4px 2px rgba(255,255,255,0.5), 0 0 6px 6px #f0f, 0 0 4px 7px #fff, 0 0 3px 15px #222, -4px 0 2px 9px #f0f, 4px 0 2px 9px #f0f, 0 -4px 2px 9px #f0f, 0 4px 2px 9px #f0f;

Или же с ограниченным использованием предыдущего приема перекрытия смещенных теней — небольшое подчеркивание (4.5):

text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; color:magenta;

Эмуляция растяжения

Как было сказано в предыдущем разделе, технически множественные тени можно применять для эмулирования увеличения тени. Например, чтобы сделать что-то похожее на (4.6):

text-shadow: 0px 0px 0px 4px magenta;

text-shadow: magenta 0px 2px, magenta 2px 0px, magenta -2px 0px, magenta 0px-2px, magenta -1.4px -1.4px, magenta 1.4px 1.4px, magenta 1.4px -1.4px, magenta -1.4px 1.4px;

Однако, если приглядеться, между ними заметна разница. Также важно понимать, что такой прием ограничен в применимости: он не только менее точен, но и отрицательно сказывается на производительности отрисовки страницы.

Интересные примеры

Теперь давайте рассмотрим еще несколько примеров использования теней для реализации различных интересных эффектов.

Начнем с классической радуги (5.1):

text-shadow: 0 0 2px 3px yellow, 0 0 2px 6px orange, 0 0 2px 9px red, 0 0 2px 12px lime, 0 0 2px 15px blue, 0 0 2px 18px violet;

Двойная тень для стрелки (5.2):

text-shadow: 0 0 2px 2px white, 2px 0 2px 5px #222, 3px 0 3px 6px #933, 5px 0 2px 14px #222, 6px 0 5px 16px #533;

Традиционная огненная тень (5.3):

text-shadow: 0 0 2px #eee, 0 0 4px 2px #fff, 0 -2px 4px 2px #ff3, 2px -4px 6px 4px #fd3, -2px -6px 11px 6px #f80, 2px -8px 18px 8px #f20;

Традиционный «letter-press», — здесь также важен контраст с фоном (5.4):

text-shadow: 0px 2px 3px #555;

Не менее традиционный 3d-text (5.5):

text-shadow: 0 0 1px #999, 1px 1px 1px #888, 2px 2px 1px #777, 3px 3px 1px #666, 4px 4px 1px #555, 5px 5px 1px #444;

Двойная тень для винтажного эффекта (5.6)

text-shadow: 2px 2px #fff, 3px 3px #666;

Проступающая надпись с прозрачным текстом и сжатой тенью, — также зависит от размера и гарнитуры шрифта (5.7)

text-shadow: 0 0 2px -3px rgba(196,255,0,0.3), 0 0 6px -5px #9c6; color:transparent;

Применение отдельной буквы для псевдо-класса ::first-letter (5.8)

Интерактив

Если вы хотите просто поиграться с тенями в интерактивном режиме, наши коллеги к прошедшей в сентябре конференции Build подготовили демонстрационную страницу: «Hands-on: text-shadow».

Internet Exlorer

text-shadow поддерживается в IE10+.

И повторю свой совет относительно использования фильтров: не используйте фильтры вообще, либо продумывайте верстку и стили так, чтобы для IE9+ они не применялись. Стандартные css-эффекты в IE в отличие от старых фильтров, начиная с 9й версии, работают с использованием аппаратного ускорения, к тому же фильтры часто оказываются несочетаемыми с новыми правилами свойствами CSS и их одновременное использование может приводить к неожиданным последствиям.

Источник

CSS Text Shadow and Box Shadow Effects (with Examples)

With CSS3 you can create two types of shadows: text-shadow (adds shadow to text) and box-shadow (adds shadow to other elements).

CSS3 Text Shadow

The text-shadow property can take up to four values:

• the horizontal shadow
• the vertical shadow
• the blur effect
• the color

Examples:

Multiple Shadows

To achieve this, you simply add a comma between two (or more) sets of values:

CSS3 Box Shadow

The box-shadow property can take up to six values:

• (optional) the inset keyword (changes the shadow to one inside the frame)
• the horizontal shadow
• the vertical shadow
• the blur effect
• the spreading
• the color

Examples:

.first-div < box-shadow: 1px 1px 5px 3px grey; >.second-div < box-shadow: 0 0 5px 1px lightgrey; >.third-div

More Information:

If this article was helpful, tweet it .

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник