Как сделать тень тексту в css
Перейти к содержимому

Как сделать тень тексту в css

  • автор:

12 интересных вариантов тени для текста с помощью свойства CSS text-shadow.

12 интересных вариантов тени для текста с помощью свойства CSS text-shadow.

Типографика – это один из самых любимых инструментов в веб-дизайне. И что самое приятное, так это то, что CSS дает нам возможность «играть» с текстом, особенно его тенью. Причем на первый взгляд, это может казаться простым элементом, но в сочетании с общей картиной принять действительно приятный глазу эффект. Мы попытаемся рассмотреть несколько вариантов теней с помощью свойства text-shadow для текста. Все это можно будет скопировать и вставить в свою работу.

Базовая тень.

css,свойство text-shadow,тень в css,интересная тень в css

Свойство text-shadow достаточно хорошо работает на всех современных браузерах. Ну а если вы хотите определить (на всякий случай), что то или иное свойство будет восприниматься браузерами более старого поколения, то можете воспользоваться ресурсом https://modernizr.com/ — Синтаксис. Синтаксис для создания простой тени показан ниже. У вас есть четыре переменные для работы, первые две устанавливают положение вашей тени, в третьей — устанавливается степень размытия и в четвертой — цвет тени. text-shadow: horizontal-offset vertical-offset blur color; Теперь на практике: тень была опущена на 2 пикселя, сдвинута вправо на 4 пикселя с размытием в 4 пикселя черным цветом с прозрачностью 30% text-shadow: 2px 4px 3px rgba(0,0,0,0.3); В результате мы получили простую, но в то же время весьма привлекательную тень. — Почему rgba? Вы можете использовать то, к чему привыкли и что больше нравиться. Но, как нам кажется, rgba позволяет добавить еще одну переменную к свойству. Поэтому можно установить не только цвет тени, но и ее прозрачность без увеличения кода.

Иллюзия вдавленного текста.

css,свойство text-shadow,тень в css,интересная тень в css,вдавленный текст css,внутренняя тень css

Самое замечательное в работе с text-shadow заключается в том, что она дает больше возможностей, чем свойство shadow. Например, создание иллюзии вдавленного текста. Для начала нужно задать тексту цвет, который будет темнее основного фона. Затем применим text-shadow. Зададим белый цвет с минимальной прозрачностью. body background: #222; > #text h1 color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); > Как вы могли заметить, мы задали основному фону цвет #222, а тексту – черный с прозрачностью 60%. А наша белая тень была расположена немного ниже и правее основного текста.

Жесткая тень.

css,свойство text-shadow,тень в css,интересная тень в css,жесткая тень css

Помните, что совсем не обязательно размывать тень. Не стесняйтесь экспериментировать, например, с жесткими ретро-текстами. text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

Двойная тень.

тень css,двойная тень css,свойство text-shadow

Реальное удовольствие можно получить от осознания того, что вы не ограничены одной тенью. С помощью text-shadow можно через запятую задавать новую тень. Посмотрите на основной синтаксис и обратите внимание, что тени отделяются запятыми, и в конце привычные точка с запятой. text-shadow: shadow1, shadow2, shadow3; Для примера можно сделать так, как показано на рисунке, получив винтажный текст для газеты.

Убираем вниз и увеличиваем дистанцию.

тень css,свойство text-shadow

Как только начинаешь экспериментировать с text-shadow, результаты с каждым разом становятся все более впечатляющими. Можно даже попробовать создавать 3D тексты. text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1);

Подчеркивая значимость.

несколько теней css,тени в css,свойство text-shadow,тень в css,интересная тень в css

И еще один пример применения нескольких теней в одном свойстве. Но на этот раз, их меньше и они находятся ближе к основному тексту. Все это создает эффект значимости теста. text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

Помощник.

Просматривая то, что предлагают другие дизайнеры в использовании теней, было найдено два способа, которые отлично подходят под наш небольшой раздел «Помощник». 1. Серьезный 3D текст. Здесь для получения необходимого результата используется 12 отдельных теней. text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); css,свойство text-shadow,тень в css,интересная тень в css,3D текст с помощью css2. Вжатый текст. Ранее мы уже рассматривали тень такого рода. Но есть более сложная практика, и при этом более правильная и создающая лучший эффект. background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px; css,свойство text-shadow,тень в css,интересная тень в css,вдавленный текст css,внутренняя тень css,вжатый текст css

Еще несколько забавных теней.

Теперь, когда вы увидели основные смыслы работы с text-shadow, посмотрите еще несколько примеров применения этого свойства. — Светящаяся. textshadow: 0px 0px 6pxrgba(255,255,255,0.7); css,свойство text-shadow,тень в css,интересная тень в css,светящийся текст css,светящаяся тень в css— Супергерой. text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd; css,свойство text-shadow,тень в css,интересная тень в css,текст супергерой css— Несколько источников света. text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05); css,свойство text-shadow,тень в css,интересная тень в css,тень с источниками света css— Мягкое теснение. color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3); css,свойство text-shadow,тень в css,интересная тень в css,мягкое свечение css.мягкая тень cssИ в заключении. Как и большинство эффектов CSS, text-shadow достаточно прост в реализации. Экспериментируйте, например, используя запятые в качестве разделителя между тенями, придавайте своему тексту интерес и проявляйте реалистичность! Источник https://designshack.net/ Читайте также: 5 простых дизайнерских лайфхаков для «прокачки» вашей страницы в социальных сетях. Тенденция дизайна: волнистая и «мягкая» линии. Преимущества использования контекстной рекламы.

  • 28/07/2017
  • Веб-студия «Интех»
  • Комментарии
  • Разработка, Программирование, Интересное, Дизайн, Веб-дизайн

Веб-студия Интех

Веб-студия «Интех»

Разработка продающих сайтов (лендинг-пейдж), сайтов-визиток, продвижение, дизайнерские услуги (логотип, фирменный стиль, маркетинг-кит и т.д.).

Создание тени текста CSS

Свойство тени текста может быть применено к любому текстовому элементу, но обычно не должно применяться к абзацам текста, лучше оставить это свойство для основных заголовков и меню. Мы изучим синтаксис, пример и некоторые распространенные ошибки при использовании этого свойства, для интересного и необычного использования этого свойства обратитесь к уроку «Создание горизонтального меню с размытием неактивных пунктов с использованием CSS».

Свойство тени текста полностью поддерживается во всех современных версиях браузеров без необходимости в добавлении приставок производителей. Оно поддерживается и браузером Internet Explorer версии 10, но не более ранними версиями.

Основной синтаксис очень понятный:

text-shadow: горизонтальное смещение вертикальное смещение размытие цвет;

Примером использования может служить следующий код CSS:

h1  color: black; text-shadow: 0 4px 2px rgba(0, 0, 0, 0.3); text-align: centre; letter-spacing: .1em; text-align: center; font-family: Highway, sans-serif; background: #fffdff; width: 10em; padding: .5em; border: 5px double #222; background-image: url('assets/images/excelsior-logo.jpg'); background-repeat: no-repeat; background-position: centre; > h1 span  text-transform: uppercase; display: block; font-size: .8em; >

Применяемый для следующей разметки:

 ExcelsioR Corporation 

Советы для создания реалистичных теней текста

• Тень никогда не бывает полностью черной, если Вы не на сцене или не на поверхности Луны: в реальном мире окружающее освещение и отраженный свет от других источников сделают тень немного прозрачной. Многие начинающие дизайнеры делают тени слишком сплошными и жирными, по-настоящему тени обычно узкие, с прозрачностью около 30%. Значения цвета, заданные в rgba или hsla, очень хорошо для этого подходят, так как цвета теней из этих цветовых моделей подстроятся под изменения цветов фона.

• Подобным образом у теней почти никогда не бывает идеально четких краев. Добавление нескольких пикселей размытия сделает тени гораздо более реалистичными.

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

• Тонкие шрифты будут отбрасывать тонкие тени. Буква, отбрасывающая тень больше своего размера, что создается с помощью большого значения размытия у свойства тени, предполагает, что подразумеваемый источник света расположен очень близко к ней, что не очень реалистично в большинстве случаев. Увеличение толщины шрифта обычно является предпочтительным вариантом в такой ситуации. Очень черные и готические шрифты обычно особо хорошо смотрятся.

• Так как большинство из нас живет на планете Земля, мы ожидаем, что наиболее распространенный источник света, Солнце, находится над нами и тень, создаваемая его светом, падает вниз. Можно задать отрицательные значения вертикальному смещению свойства тени текста, но это, как правило, создает пугающий эффект подсветки снизу.

• Можно создать несколько теней текста у элемента, что показано в вышеупомянутом уроке «Создание горизонтального меню с размытием неактивных пунктов с использованием CSS», но обычно этого не следует делать.

Автор урока Dudley Storey

  • Красивые таблицы с помощью шрифтов формата OpenType
  • Создание изогнутых теней элементов HTML
  • Создание изогнутых теней с использованием только CSS

7 классных примеров с тенями для текста, которые вы просто не можете пропустить

Color Happiness

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

Честно скажу, что некоторые идеи (две-три) были подсмотрены в различных статьях по работе с Photoshop — и мне было интересно, можно ли достичь схожих эффектов просто используя text-shadow.

Также должен сразу предупредить, что многие примеры (если не сказать, что большинство) могут не работать в вашем любимом браузере, потому что он еще не поддерживает актуальную версию text-shadow со spread-distance. Но вы всегда можете поставить себе «Platform Preview»-версию Internet Explorer 10, чтобы протестировать новые возможности.

Стоит также отметить, что практически во всех примерах используется определение цвета через функцию hsl — это оказывается весьма удобно, так как можно легко изменять яркость и насыщенность, не изменяя оттенок, что чрезвычайно полезно при работе с тенями.

Arcade Love

В первом примере мы попробуем сделать выпуклые буквы на специальной подложке. И начнем с того, что у нас просто будет надпись нужного нам цвета:

color: hsl(80, 70%, 55%);

Далее начинается последовательная работа по формированию выпуклости букв, за счет последовательного наложения теней со сдвигом в 1px по диагонали (обратите внимание на то, как задается цвет тени относительно цвета текста!):

text-shadow: -1px -1px 0 hsl(80, 70%, 35%), -2px -2px 1px hsl(80, 70%, 35%);

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

text-shadow: 0 0 2px #fff, -1px -1px 0 hsl(80, 70%, 35%), -2px -2px 1px hsl(80, 70%, 35%), -2px -2px 2px hsl(80, 10%, 15%);

Теперь, чтобы сделать подложку, необходимо расширить тень (4-й параметр — spray-distance):

text-shadow: . -3px -3px 0 7px hsl(60, 10%, 65%), -4px -4px 0 7px hsl(60, 10%, 65%), -5px -5px 0 7px hsl(60, 10%, 65%), -6px -6px 0 7px hsl(60, 10%, 65%);

Наконец, чтобы надпись вместе с подложкой аккуратно приземлилась на фон, нужно добавить небольшое затенение внизу:

text-shadow: . -7px -7px 4px 8px hsl(60, 10%, 40%), -8px -8px 6px 9px hsl(60, 10%, 55%);

Финальный результат

Arcade Love

color: hsl(80, 70%, 55%); text-shadow: 0 0 2px #fff, /* выпуклость надписи */ -1px -1px 0 hsl(80, 70%, 35%), -2px -2px 1px hsl(80, 70%, 35%), /* переход к подложке */ -2px -2px 2px hsl(80, 10%, 15%), /* подложка */ -2px -2px 0 7px hsl(60, 80%, 95%), -3px -3px 0 7px hsl(60, 10%, 65%), -4px -4px 0 7px hsl(60, 10%, 65%), -5px -5px 0 7px hsl(60, 10%, 65%), -6px -6px 0 7px hsl(60, 10%, 65%), /* тень подложки */ -7px -7px 4px 8px hsl(60, 10%, 40%), -8px -8px 6px 9px hsl(60, 10%, 55%);

Color Happiness

Второй пример в чем-то отталкивается от первого: мы попробуем сделать множественные цветные подложки, чтобы в итоге получить красивую текстовую пирамидку. Начнем мы опять-таки с обычной текстовой надписи:

color: hsl(330, 100%, 50%);

Первым делом сделаем из тексты выпуклость. Так как в данном случае
тень будет направлена строго вниз и небольшая, я несколько экономлю на количестве правил, пропуская промежуточные сдвиги (1px) — в случае наклонной тени из-за этого получится лесенка. Также для смягчения перехода к подложке в последнее правило добавлено размытие:

text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 0 3px 2px 0px hsla(330, 100%, 15%, 0.5);

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

text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 0 3px 2px 0px hsla(330, 100%, 15%, 0.5), 0 3px 0 3px hsl(350, 100%, 50%), 0 5px 0 3px hsl(350, 100%, 25%), 0 6px 2px 3px hsla(350, 100%, 15%, 0.5);

Осталось повторить этот же прием еще несколько раз, увеличивая размер подложки и смещая ее оттенок в нужную сторону:

text-shadow: . 0 6px 0 9px hsl(20, 100%, 50%), 0 8px 0 9px hsl(20, 100%, 25%), 0 9px 2px 9px hsla(20, 100%, 15%, 0.5), . 0 15px 0 45px hsl(90, 100%, 50%), 0 17px 0 45px hsl(90, 100%, 25%), 0 17px 2px 45px hsla(90, 100%, 15%, 0.5);

Финальный результат

Color Happiness

color: hsl(330, 100%, 50%); text-shadow: 0 2px 0 0px hsl(330, 100%, 25%), 0 3px 2px 0px hsla(330, 100%, 15%, 0.5), /* next */ 0 3px 0 3px hsl(350, 100%, 50%), 0 5px 0 3px hsl(350, 100%, 25%), 0 6px 2px 3px hsla(350, 100%, 15%, 0.5), /* next */ 0 6px 0 9px hsl(20, 100%, 50%), 0 8px 0 9px hsl(20, 100%, 25%), 0 9px 2px 9px hsla(20, 100%, 15%, 0.5), /* next */ 0 9px 0 18px hsl(50, 100%, 50%) 0 11px 0 18px hsl(50, 100%, 25%), 0 12px 2px 18px hsla(50, 100%, 15%, 0.5), /* next */ 0 12px 0 30px hsl(70, 100%, 50%), 0 14px 0 30px hsl(70, 100%, 25%), 0 15px 2px 30px hsla(70, 100%, 15%, 0.5), /* next */ 0 15px 0 45px hsl(90, 100%, 50%), 0 17px 0 45px hsl(90, 100%, 25%), 0 17px 2px 45px hsla(90, 100%, 15%, 0.5);

Chocolate

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

color: hsl(20, 100%, 20%);

Первая вещь, с которой я начал, это классическая 3D-надпись:

text-shadow: -1px 1px 0 0 hsl(20, 100%, 16%), -2px 2px 0 0 hsl(20, 100%, 16%), -3px 3px 0 0 hsl(20, 100%, 16%), -4px 4px 0 0 hsl(20, 100%, 16%), -5px 5px 0 0 hsl(20, 100%, 16%), -6px 6px 0 0 hsl(20, 100%, 16%);

Далее я решил постепенно затемнить тень, убирая яркость, и раздвинуть ее, увеличив сдвиг по диагонали (при этом как раз получается лесенка, о которой я писал выше):

text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%), -2px 2px 0 0 hsl(20, 100%, 14%), -4px 4px 0 0 hsl(20, 100%, 12%), -6px 6px 0 0 hsl(20, 100%, 10%), -8px 8px 0 0 hsl(20, 100%, 8%), -10px 10px 0 0 hsl(20, 100%, 6%);

Следующий шаг — добавить к смещению тени уменьшение ее размеров. С учетом перекрытий теней и размера шрифта, — а в уменьшенной тени, в конечном счете, могут остаться лишь намеки на фрагменты символов, — получается слегка рваный эффект. Также обратите внимание, что шаги сдвига тени и уменьшения ее размера отличаются, это дает эффект небольшого закручивания:

text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%), -2px 2px 0 -1px hsl(20, 100%, 14%), -4px 4px 0 -2px hsl(20, 100%, 12%), -6px 6px 0 -3px hsl(20, 100%, 10%), -8px 8px 0 -4px hsl(20, 100%, 8%), -10px 10px 0 -5px hsl(20, 100%, 6%);

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

text-shadow: -0px 0px 1px 0 hsl(20, 100%, 16%), -2px 2px 2px -1px hsl(20, 100%, 14%), -4px 4px 2px -2px hsl(20, 100%, 12%), -6px 6px 3px -3px hsl(20, 100%, 10%), -8px 8px 2px -4px hsl(20, 100%, 8%), -10px 10px 2px -5px hsl(20, 100%, 6%);

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

Финальный результат

Chocolate

color: hsl(20, 100%, 20%); text-shadow: 0 0 1px hsl(20, 100%, 18%), -1px 1px 0 hsl(20, 100%, 16%), -2px 2px 2px -1px hsl(20, 100%, 14%), -4px 4px 2px -2px hsl(20, 100%, 12%), -6px 6px 3px -3px hsl(20, 100%, 10%), -8px 8px 2px -4px hsl(20, 100%, 9%), -10px 10px 3px -5px hsl(20, 100%, 8%), -12px 12px 2px -6px hsl(20, 100%, 7%), -14px 14px 2px -7px hsl(20, 100%, 6%), -15px 15px 2px -8px hsl(20, 100%, 5%), -15px 15px 0 -8px hsla(20, 50%, 10%, 0.25);

Cream Cake

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

color: hsl(35, 100%, 30%); background: hsl(35, 60%, 80%);

Начнем с небольшого размытия надписи. Для этого я добавил две тени: первая (верхняя) сделана тем же оттенком, что и надпись, но менее насыщенным цветом, вторая (нижняя) — сильно размыта, смещена немного в сторону красного, чуть более яркая и полупрозрачная (то есть она будет накладываться на все, что будет под ней):

text-shadow: 0 0 2px 1px hsl(35, 70%, 30%), 0 0 4px 4px hsla(30, 100%, 55%, 0.5);

Далее мы добавляем светлую кремовую подложку (оттенок смещен к желтому, а цвет сделан с повышенной светлостью):

text-shadow: . -1px 1px 2px 7px hsl(45, 60%, 95%);

Теперь надо добавить подложке немного объема, для чего задаем тень со смещением, делаем ее того же цвета, что и сам текст, но немного менее насыщенным. Обратите внимание, что за счет того, что подложка к надписи расширена больше, чем тень к ней (7px против 4px), получается что последняя тень меньше подложки:

text-shadow: . -3px 3px 1px 4px hsl(35, 70%, 30%);

И последний штрих: аналогичное размытие подложки для более мягкого сочетания с фоном:

text-shadow: . -3px 3px 4px 8px hsla(30, 90%, 55%, 0.5);

Финальный результат

Cream Cake

color: hsl(35, 100%, 30%); background: hsl(35, 60%, 80%); text-shadow: 0 0 2px 1px hsl(35, 70%, 30%), /* переход к подложке */ 0 0 4px 4px hsla(30, 100%, 55%, 0.5), /* подложка */ -1px 1px 2px 7px hsl(45, 60%, 95%), /* объем подложки */ -3px 3px 1px 4px hsl(35, 70%, 30%), /* переход к фону */ -3px 3px 4px 8px hsla(30, 90%, 55%, 0.5); 

Plastic

Так… потом я начал играться с последним примером, думая, куда это все может привести. И, определенно, как и во многих других примерах, здесь были важны две составляющие: сам шрифт (в данном примере это CabinSketch) и эффекты с тенью, применяемые к нему. Давайте еще раз начнем с простого текста, чтобы отследить все трансформации:

color: hsl(65, 60%, 20%); background: hsl(65, 60%,95%);

Первым делом, давайте добавим небольшое размытие вокруг самой надписи (обратите внимание, что тут цвет тени заметно светлее исходной надписи, поэтому последняя с примененной тень выглядит несколько насыщеннее и светлее:

text-shadow: 0 0 3px 2px hsl(65, 60%,75%);

Далее можно добавить дополнительную обводку с небольшим размытием (обратите внимание на увеличение размера тени и пониженную светлость):

text-shadow: 0 0 3px 2px hsl(65, 60%,75%), 0 0 1px 9px hsl(65, 60%, 20%);

Получилось темновато — надо вставить между двумя тенями еще одну для осветления:

text-shadow: 0 0 3px 2px hsl(65, 60%,75%), 0 0 1px 5px hsl(65, 60%,95%), 0 0 1px 9px hsl(65, 60%, 20%);

Теперь начинается самое интересное — на самом деле мне нужна не целиком вся обводка, а только ее части. Чтобы скрыть лишнее, поверх нее можно нарисовать несколько теней цвета фона (обратите внимание, что эти тени меньше по размеру, чем обводка, зато сдвинуты в ту или иную сторону сильнее):

text-shadow: 0 0 3px 2px hsl(65, 60%,75%), 0 0 1px 5px hsl(65, 60%,95%), 6px 6px 4px 7px hsl(65, 60%,95%), -4px -6px 4px 6px hsl(65, 60%,95%), 0 0 1px 9px hsl(65, 60%, 20%);

При необходимости можно добавить еще несколько дополнительных штрихов, чтобы сгладить переход от обводки к тени.

Финальный результат

Plastic

color: hsl(65, 60%, 20%); background: hsl(65, 60%,95%); text-shadow: 0 0 3px 2px hsl(65, 60%,75%), /* светлая подложка */ 0 0 1px 5px hsl(65, 60%,95%), /* небольшое размыте для подложки */ 0 0 4px 4px hsla(65, 100%, 30%, 0.4), /* вырезаем обводку */ 6px 6px 4px 7px hsl(65, 60%,95%), -4px -6px 4px 6px hsl(65, 60%,95%), /* темная обводка */ 0 0 1px 9px hsl(65, 60%, 20%);

Painting

Последующие два эксперимента касаются большей работы с прозрачностью. Начнем с такой задачи — как сделать что-либо с тенью внутри текста? На самом деле, напрямую никак, потому что для text-shadow, в отличие от box-shadow, нет параметра inset. Все тени, которые вы рисуете, выстраиваются в стек и отрисовываются одна поверх другой, причем сам текст всегда располагается сверху! Текст, как бы мешается… Поэтому надо начать с того, чтобы убрать текст. Правильно, надо сделать его прозрачным:

color: transparent; background: hsl(0, 75%,45%);

Теперь дорога расчищена! Сразу скажу, чтобы вы обратили на это внимание: рисовать мы будем белым цветом, поэтому единственное, что имеет значение, это выставленная на 100% светлость. Чтобы сделать штрих внутри текста, достаточно уменьшить размет тени:

text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75);

Добавим еще несколько штрихов, варьируя прозрачность, сдвиг и размер:

text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75), -1px -1px 1px -4px hsla(0, 60%, 100%, 0.65), 1px 1px 1px -4px hsla(0, 60%, 100%, 0.65);

Для придания формы и усиления закраски можно добавить общую размытую (и частично прозрачную) тень:

text-shadow: . 0 0 1px 2px hsla(0, 60%, 100%, 0.65);

Если очень хочется, можно добавить еще пару внешних штрихов. В итоге получится следующий эффект рисованной надписи.

Финальный результат

Painting

color: transparent; background: hsl(0, 75%,45%); text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75), -1px -1px 1px -4px hsla(0, 60%, 100%, 0.65), 1px 1px 1px -4px hsla(0, 60%, 100%, 0.65), /* общий фон */ 0 0 1px 2px hsla(0, 60%, 100%, 0.65), /* легкие внешние штрихи */ -3px -3px 1px 2px hsla(0, 60%, 100%, 0.25), 3px 3px 1px 2px hsla(0, 60%, 100%, 0.25);

Up & Down

Заключительный эффект продолжает эксплуатировать прозрачность текста 🙂 Здесь мы тоже начнем с полностью прозрачного текста (я его выделил, чтобы отличить от фона):

color: transparent;

Первым делом мы сделаем их текста обычный 3D-текст (можете дополнительно поиграться с прозрачностью). Обратите внимание на небольшой скачок в светлости в середине — это помогает сделать небольшую риску в середине текста (попробуйте увеличить светлость, чтобы это стало более заметным):

text-shadow: 1px -1px hsla(0, 0%, 30%, .6), 2px -2px hsla(0, 0%, 30%, .7), 3px -3px hsla(0, 0%, 32%, .8), 4px -4px hsla(0, 0%, 30%, .9), 5px -5px hsla(0, 0%, 30%, 1.0);

Теперь, чтобы придать большей формы, я добавлю тень сверху, в общем-то повторяющую форму исходного текста:

text-shadow: 0px 0px hsla(0, 0%, 50%, .5), 1px -1px hsla(0, 0%, 30%, .6), . 

Наконец, аналогично нижней части, давайте добавим верхнюю 3D-тень, но более светлую и более прозрачную (для увеличения резкости самая верхняя тень сделана чуть менее прозрачной, чем остальные):

text-shadow: -4px 4px hsla(0, 0%, 70%, .4), -3px 3px hsla(0, 0%, 60%, .2), -2px 2px hsla(0, 0%, 70%, .2), -1px 1px hsla(0, 0%, 70%, .2), . 

Финальный результат

Up & Down

color: transparent; text-shadow: -4px 4px hsla(0, 0%, 70%, .4), -3px 3px hsla(0, 0%, 60%, .2), -2px 2px hsla(0, 0%, 70%, .2), -1px 1px hsla(0, 0%, 70%, .2), 0px 0px hsla(0, 0%, 50%, .5), 1px -1px hsla(0, 0%, 30%, .6), 2px -2px hsla(0, 0%, 30%, .7), 3px -3px hsla(0, 0%, 32%, .8), 4px -4px hsla(0, 0%, 30%, .9), 5px -5px hsla(0, 0%, 30%, 1.0);

Вы также можете поиграться с оттенками и насыщенности, например, сделав низ красным, а верх синим, или как-нибудь еще.

Internet Explorer

Чтобы попробовать все это самостоятельно, не забудьте поставить себе «Platform Preview»-версию Internet Explorer 10. Да пребудет с вами тень!

  • Блог компании Microsoft
  • CSS

CSS свойство text-shadow css3

css3

CSS свойство text-shadow добавляет тень к тексту. Допускается добавление нескольких теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделенных запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Поддержка браузерами

Свойство Chrome

Firefox Opera Safari IExplorer Edge
text-shadow css3 4.0 3.5 9.6 4.0 10.0 12.0
text-shadow:"h-shadow (горизонтальная тень) v-shadow (вертикальная тень) blur-radius (радиус размытия) color (цвет) | none | initial | inherit";
object.style.textShadow = "5px 5px 5px orange" 

Значения свойства

Значение Описание
none Тень у элемента отсутствует. Это значение по умолчанию.
h-shadow Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений.
v-shadow Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений.
blur-radius Необязательное значение. Задаёт радиус размытия. По умолчанию значение 0.
color Необязательное значение. Задаёт цвет тени (Имя цвета | HEX | RGB(A) | HSL(A). Значением по умолчанию является черный цвет.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

Давайте рассмотрим пример добавления текстовой тени к абзацу (элемент ):

   Пример использования свойства text-shadow в CSS p  color: #fff; /* устанавливаем цвет текста белый*/ text-shadow: 1px 1px 4px #000; /* размещаем текстовую тень*/ > p::selection  /* описание псевдоэлемента, который позволяет стилизовать выделенный пользователем текст */ background-color: orange; /* устанавливаем цвет заднего фона */ text-shadow: 1px 1px 4px #fff; /* размещаем текстовую тень*/ color: #000; /* устанавливаем цвет текста черный */ > p::-moz-selection  /* описание псевдоэлемента для браузера Firefox (дублируем стили) */ background-color: orange; /* устанавливаем цвет заднего фона */ text-shadow: -1px -1px 4px #fff; /* размещаем текстовую тень*/ color: #000; /* устанавливаем цвет текста черный */ >  Текст с добавленной тенью. Текст с добавленной тенью.  

css3

В этом примере мы для всех азацев (элемент ) установили цвет текста белый, а для текстовой тени (свойство text-shadow) установили значения для расположения горизонтальной и вертикальной тени равными 1 пиксель, а радиус размытия установили равным 4 пикселям.

Кроме того, с использованием псевдоэлемента ::selection задали следующие стили для всех абзацев при выделении текста пользователем: цвет текста черный, цвет заднего фона оранжевый, значения для расположения горизонтальной и вертикальной тени установили равными -1 пиксель (тень сдвигается в противоположную сторону), а радиус размытия установили равным 4 пикселям.

Результат нашего примера:

Рис. 68 Пример использования свойства text-shadow (текстовая тень).

Множественная текстовая тень

Допускается добавление нескольких текстовых теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделяя их при этом запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).

Пример блока объявлений для множественной тени:

.multipleShadow  text-shadow: -2px 3px 1px #777, 1px 2px 3px red; /* добавляем множественную тень */ > 

Давайте рассмотрим следующий пример:

   Пример создания множественной текстовой тени .test  text-align: center; /* устанавливаем горизонтальное выравнивание текста по центру */ line-height: 150px; /* задаем высоту строки */ text-shadow: 0 0 4px white, 0 -5px 4px violet, 2px -10px 6px indigo, -2px -15px 11px blue, 2px -25px 18px green, -2px -40px 25px yellow, 2px -60px 33px orange, 0px -85px 40px red; /* используем 8 теней в одном объявлении */ > .test2  text-shadow: 6px 6px 2px rgba(255, 0, 0, 0.5); /* устанавливаем тень смещенную вправо */ > .test3  text-shadow: -6px 6px 2px rgba(0, 255, 0, 0.5); /* устанавливаем тень смещенную влево */ > .test4  text-shadow: 0px 0px 6px rgba(0, 0, 255, 0.5); /* используем только радиус размытия, получая неоновый эффект */ >   class = "test">Радужный текст class = "test2">Текст с добавленной тенью class = "test3">Текст с добавленной тенью class = "test4">Текст с добавленной тенью  

В данном примере мы применили множественную тень (8 теней) к первому элементу, установили для него высоту строки 150px (свойство line-height) и задали горизонтальное выравнивание по центру (свойство text-align со значением center ). Для следующих блоков указали как положительное значение для горизонтальной тени, так и отрицательное, благодаря чему тень смещается в левую, а не правую сторону.

Для последнего блока мы установили радиус размытия 6px, а значения горизонтальной и вертикальной тени указали 0px, что придает некий неоновый эффект.

Рис. 68а Пример создания множественной текстовой тени.

CSS свойства

© 2016-2024 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *