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

Как сделать красивый текст в css

  • автор:

15 удивительных текстовых эффектов с помощью CSS3

Каждый веб-дизайнер хочет создавать только стоящие веб сайты, которые оценят все пользователи интернета.

Конечно, невозможно удовлетворить всем вкусам. Еще, как веб-дизайнер вы должны просто попытаться сделать все возможное, чтобы создать сайт, который понравится посетителям! К счастью, уже доступны самые мощные инструменты и ресурсы, чтобы создавать потрясающие веб-сайты и мы собрали для вас некоторые полезные фрагменты CSS, которые помогут сделать интересную фишку в ваших проектах!

Это 15 удивительных текстовых эффектов с помощью CSS3 – все подобраны и мы думаем, что они помогут добавить блеск оригинальности в ваших проектах. Некоторые из них полезны для определенных целей, а другие подходят для многократного использования.

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

Если вы любите цветы и вы хотите замечательный и полный цвета текста эффект, то это предложение идеальное решение для вас! Это очень подходит для отображения имени креативного агентства или для портфеля проектов. Конечно, он может быть использован для любого другого типа проектов – если вы хотите выделиться, то этот текстовый эффект-отличный выбор!

Волновой эффект действительно потрясающий! Это может использоваться, чтобы добавить немного таинственности. Было бы интересно использовать его для того, чтобы подчеркнуть скидку или специальное предложение, которое работает только в течение очень короткого периода времени.Что вы думаете?

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

Следующий текстовый эффект работает как магнит для зрителей. Вы можете использовать это, чтобы улучшить форму, чтобы подчеркнуть новый продукт, предлагаемый для продажи или просто для привлечения глазах зрителей. Это заманчивые и мудрый веб-дизайнер будет использовать его на его/ее преимущество!

Я думаю, что тенденция среди веб-дизайнеров является создание более динамичной онлайн присутствий. Прохладный скользящий эффекты и переходы страниц чаще всего используются возможности добавления больший динамизм сайт. Все же, если вы хотите еще больше динамизма, этот удивительный текст с помощью CSS3 эффект может быть хорошим вариантом. Я думаю, что это простое, но эффективное решение!

Самые требовательные клиенты-это дети, но это не должно заставить вас отказаться создании сайтов для них. Если вы работаете на малыша, связанных с проектом или смешной один, то вы можете использовать этот эффект для текста! В Jokerman шрифт имеет свою особую красоту, не так ли?

CSS3 и 3D-моделирования имеют общего больше, чем только цифра “3”! С помощью CSS3 позволяет создавать красивые 3D эффекты как один из этого фрагмента.Этот эффект подойдет для большой пул проектов и я думаю, что вы должны дать ему попробовать!

Иногда, играя с огнем может быть весело! Не волнуйся, я не пироман, я просто поражена этим прикольный текстовый эффект! Я не помню, чтобы видел этот текстовый эффект в макете других сайтов, так вот еще один повод использовать его и создать оригинальный сайт!

В ситуации, которую Вы цените больше дискретной текстовый эффект, этот “туманный эффект” — это моя рекомендация. Это правда, что он может негативно повлиять на юзабилити вашего сайта. С другой стороны, если Вы не рискуете, Вы не выиграете! Конечно, это могут быть переделаны, чтобы соответствовать Вашим требованиям!

Хотя этот текстовый эффект является довольно сложной, она реализуется с помощью CSS, нет никакого JavaScript. Лично я считаю, что он может быть использован для музыкальных сайтах или выделить определенный элемент с веб-сайта.

Это очень дискретный эффект, но я думаю, что он может добавить “Вау” эффект в макеты. Металлические выглядят чудесно создан и появляющиеся/исчезающие моменты акцентировать.

Я может быть субъективна, потому что я большой фанат «Звездных Войн» фильм, но этот текстовый эффект действительно классный. Это делает ваши проекты более интересные и, несомненно, поклонники этого фильма влюбилась в ваш сайт из-за этого эффекта.

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

Это последний пункт из этого списка, но Вы не должны игнорировать его. Гораздо больше, Вишенка на торте, дело в том, что нет более 10 CSS3 удивительные текстовые эффекты. Я думаю, что вы должны тщательно проверять их все и изучить, как эти привлечении эффекты были реализованы.

Те, которые все еще думают, что атрибуты CSS не достаточно, чтобы создать интересные текстовые эффекты должны дать прислушаться к этому! Она сочетает в себе несколько эффектов — анимация, 3D-перспективы, теней и текстовые настройки. Я думаю, что тени и обводки сочетание-это старомодно, но этот проект создан с целью показать, чего можно достичь с помощью “чистого CSS”.

Стили заголовков в CSS: картинки, тени, анимации

Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек.

Как добавить изображение за текстом в CSS

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

Для начала выбираем картинку:

Используем свойство background-image и url() , чтобы добавить изображение в заголовок. Для настройки расположения также есть свойства background-size и background-repeat .

header h1 < font-size: 70px; font-weight: 600; background-image: url(/rockets.png); background-size: 250px; background-repeat: repeat; color: transparent; -webkit-background-clip: text; background-clip: text; >

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

Тень вокруг текста появляется благодаря свойству text-shadow :

text-shadow: 0px 4px 10px rgba(179, 147, 211, 0.8)

В свойстве четыре значения:

  1. x-offset , расположение тени по горизонтали.
  2. y-offset , расположение тени по вертикали.
  3. Радиус размытия, который определяет, насколько тёмной будет тень.
  4. Цвет.

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

Один из лучших способов добавить тени — наслоение. Вот как придать заголовку эффект многослойной тени:

 text-shadow: 2px 2px 4px rgba(179, 147, 211, 0.1), 3px 4px 4px rgba(179, 147, 211, 0.15), 4px 6px 4px rgba(179, 147, 211, 0.2), 5px 8px 4px rgba(179, 147, 211, 0.25);

Вот что получится:

Используя многослойные тени, можно сделать текст заголовка светящимся. Начнём с добавления темного на background-color . Установим значение смещения для text-shadow на 0 и радиус размытия — от этого свечение будет распространяться равномерно вокруг каждой буквы. Наконец, выбираем яркий цвет для text-shadow и добавляем несколько слоёв.

body < background-color: #301934; >header h1

Тест заголовка 3D

Лучше выбирать жирный или полужирный шрифт, как Roboto Из Google Fonts. Вот что можно сделать:

Для создания этого эффекта нужно две группы многослойных теней.

Во-первых, группа однотонных слоёв text-shadow с небольшим размытием и непрозрачностью — они создадут края текста.

Во-вторых, тени с более широкими смещениями и радиусами размытия в цветах rgba() :

text-shadow: 1px 1px 1px #957dad, 1px 2px 1px #957dad, 1px 3px 1px #957dad, 1px 4px 1px #957dad, 1px 5px 1px #957dad, 1px 6px 1px #957dad, 1px 10px 5px rgba(16, 16, 16, 0.5), 1px 15px 10px rgba(16, 16, 16, 0.4), 1px 20px 30px rgba(16, 16, 16, 0.3), 1px 25px 50px rgba(16, 16, 16, 0.2);

Текст прописными буквами будет выделяться сильнее. Полный синтаксис:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); header h1

Добавляем многоцветный слой text-shadow

Для забавных эффектов подходят забавные шрифты, поэтому в примере Niconne.

Берём предыдущий пример и удаляем вторую групп теней, сохранив однотонные, а потом смешиваем цвета.

@import url('https://fonts.googleapis.com/css2?family=Niconne&display=swap'); header h1

Проверяем, что смещения text-shadow расположены равномерно, а текст не перекосило. Можно «поиграть со шрифтами»: настроить font-size и font-weight и поменять цвета.

Эффект пишущей машинки в HTML и CSS

Анимация, при которой каждая буква появляется по очереди.

Для красоты нужен короткий заголовок в одну строчку и шрифт с фиксированным межбуквенным расстоянием: Courier, Inconsolata, Anonymous Pro, Source Code Pro.

Задаём заголовок в HTML:

   

This is a Header

Теперь стилизуем. Добавляем мигающий курсор в конце текста с помощью свойства border-right :

header h1 < font-size: 70px; font-weight: 500; color: #553c9a; border-right: 4px solid #000; /*This will be the blinking cursor*/ >

Определяем два свойства animation для текста заголовка и курсора. Называем мигающую анимацию cursor .

animation: cursor 1s infinite step-end;

Для определения анимации используем @keyframes . Мигать — переходить из видимого в скрытое, так что используем свойство border-color и определяем пойнты, когда оно скрыто, прозрачно, видимо.

@keyframes cursor < 0%, 100%50% >

Анимация будет длиться 1 секунду. В начале свойство border-color прозрачное, как определено @keyframes . В середине — на 50% от 1 секунды — оно чёрное, а затем снова прозрачное. Это анимация в бесконечном цикле.

По умолчанию курсор будет появляться и исчезать плавно — это не тот эффект, который нам нужен. Поэтому время animation устанавливаем на step-end. То есть animation будет резко переходить к каждому пойнту , установленному @keyframes.

Добавляем анимацию пишущей машинки CSS

Используйте свойство width с единицей измерения ch — количеством символов в заголовке.

Используем функцию step , устанавливаем количество пойнтов, равное количеству символов.

animation: cursor 1s infinite step-end, typing 15s infinite steps(16); white-space: nowrap; overflow: hidden;

Свойство white-space предотвратит наложение слов и букв друг на друга, свойство overflow: hidden сохранит буквы невидимыми, пока они не будут «набраны» на странице.

Теперь определим каждый шаг в анимации.

@keyframes typing < 0%< width: 0ch>/*Text is hidden*/ 30% < width: 16ch;>/*The enitre header will be typed out 1 character at a time*/ 80% < width: 16ch;>/*Text stays visible*/ 90% < width: 0ch;>/*Text is deleted*/ 100% < width: 0ch;>/*Text stays hidden*/ >
Множественная анимация набора текста

Другой вариант метода — заменить слова в заголовке с помощью неупорядоченного списка ul . Набранные слова попадут в список.

Создаём HTML и решаем, какая часть заголовка будет fixed , а какая — typed :

Задаём значение inline-flex для display , чтобы выровнять фиксированный текст и список. Стилизуем.

.header < display: inline-flex; >.header .fixed < font-size: 70px; font-weight: 500; color: #b393d3; >.header .typed < margin-left: 20px; line-height: 90px; height: 90px; >.header .typed li

Теперь создаём псевдоэлемент ::before для слов, заключённых в тег span .

.header .typed li span < position: relative; >.header .typed li span::before < content: ''; position: absolute; height: 100%; width: 100%; left: 0; border-left: 2px solid #553c9a;/*Blinking cursor*/ >

Теперь animation . Курсор, как в прошлом примере, свяжем со span . Спрячем слова, которые будем «печатать», добавив background того же цвета, что и фон страницы.

.header .typed li span::before

Переходим к @keyframes :

@keyframes cursor < 0%, 100%50% > @keyframes typing < 100%< left: 8ch;>/*Use the number of characters in the longest word*/ >

Буквы в заголовке будут открываться по одной по мере перемещения курсора по горизонтали.

Добавляем ещё одну анимацию для списка typed :

animation: slide 4.5s steps(3) infinite;

Опять @keyframes . Используем slide , чтобы открывать слова пошагово:

@keyframes slide < 100%< top: -270px;/*Height of the words times 3*/ >> >

Обратите внимание на продолжительность анимации, чтобы эффекты не вступали в противоречие друг с другом.

Градиентная текстовая анимация в CSS

Градиенты можно поднять на новый уровень, просто добавим анимацию. Создадим бесконечную анимацию для linear-gradient() . Создаём заголовок с как минимум тремя значениями цвета в градиенте. В примере — пять:

background-image: linear-gradient(to right ,#553c9a, #ee4b2b, #00c2cb, #ff7f50, #553c9a);

По крайней мере два цвета должны быть видны в тексте заголовка в начале анимации. Настраиваем background-size и background-position , ищем подходящие значения:

background-size: 200%; background-position: -200%;

Добавляем свойство animation и @keyframes , ориентируемся на background-position .

animation: animated-gradient 2s infinite alternate-reverse; @keyframes animated-gradient < to< background-position: 200%; >>

По сути, перемещаем фон с изначальной позиции на противоположную и обратно. Вот что выходит:

Устанавливаем анимацию градиента на :hover . Заменяем animation свойством transition .

transition: all ease-in-out 2s;

Потом добавляем псевдоэлемент :hover:

header h1:hover

Наводим курсор на текст, проверяем.

И идём делать яркие заголовки, которые привлекают внимание.

Текстовые эффекты

В посте представлены некоторые эффекты на основе text-shadow .

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

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

Сочетая тени, градиенты и псевдо-элементы можно сделать много интересного.

Проведите курсором над текстом примеров, чтобы увидеть эффекты при наведении.

Выпуклый текст

H1  text-shadow: 1px 1px 1px silver, -1px 1px 1px silver; color: white; transition: all .5s; > H1:hover  text-shadow: -1px -1px 1px silver, 1px -1px 1px silver; color: white; >

Вдавленный текст

H1  text-shadow: -1px -1px #000, 0 1px 0 #444; color: #222; transition: all 1s; > H1:hover  text-shadow: -1px -1px #000, 0 1px 0 #444; color: #1A1A1A; >

Размытие

H1  font-size: 50px; font-weight: normal; cursor: pointer; text-shadow: 0 0 15px #999; color: transparent; transition: all .5s; > H1:hover  text-shadow: 0 0 0 #333; >

Контуры

H1  text-shadow: 1px 1px 0 orange, 1px -1px 0 orange, -1px 1px 0 orange, -1px -1px 0 orange; color: white; transition: all 1s; > H1:hover  text-shadow: 1px 1px 0 yellowgreen, 1px -1px 0 yellowgreen, -1px 1px 0 yellowgreen, -1px -1px 0 yellowgreen; >
H1  text-shadow: -1px -1px #FFF, -2px -2px #FFF, -1px 1px #FFF, -2px 2px #FFF, 1px 1px #FFF, 2px 2px #FFF, 1px -1px #FFF, 2px -2px #FFF, -3px -3px 2px #BBB, -3px 3px 2px #BBB, 3px 3px 2px #BBB, 3px -3px 2px #BBB; color: steelblue; transition: all 1s; > H1:hover  color: yellowgreen; >

Для создания контура вокруг текста можно воспользоваться SCSS-функцией.

Длинные тени

H1  text-shadow: 1px 1px 0 hsl(20,100%,50%), 2px 2px 0 hsl(20,100%,50%), 3px 3px 0 hsl(35,100%,50%), 4px 4px 0 hsl(35,100%,50%), 5px 5px 0 hsl(45,100%,50%), 6px 6px 0 hsl(45,100%,55%), 7px 7px 0 hsl(55,100%,60%), 8px 8px 0 hsl(55,100%,65%); color: hsl(0,100%,40%); transition: all 1s; > H1:hover  text-shadow: 1px -1px 0 hsl(290,100%,40%), 2px -2px 0 hsl(290,100%,40%), 3px -3px 0 hsl(280,100%,60%), 4px -4px 0 hsl(280,100%,60%), 5px -5px 0 hsl(270,100%,75%), 6px -6px 0 hsl(270,100%,80%), 7px -7px 0 hsl(260,100%,85%), 8px -8px 0 hsl(260,100%,90%); color: hsl(300,100%,30%); >

Полосатая тень

H1  display: inline-block; position: relative; letter-spacing: .05em; text-shadow: 1px 1px mediumturquoise, -1px 1px mediumturquoise, -1px -1px mediumturquoise, 1px -1px mediumturquoise; color: white; transition: all 1s; > H1:before  content: ""; position: absolute; top: 10px; right: -15px; bottom: -15px; left: 0; z-index: -1; background: linear-gradient( -45deg, rgba(72, 209, 204, 0) 2px, mediumturquoise 3px, rgba(72, 209, 204, 0) 3px ) repeat; background-size: 4px 4px; > H1:after  content: attr(data-name); position: absolute; top: 2px; left: 2px; z-index: -2; text-shadow: 1px 1px white, 2px 2px white, 3px 3px white, 4px 4px white; color: white; transition: all 1s; > H1:hover  color: lemonchiffon; > H1:hover:before  animation: 5s move_lines infinite linear; > H1:hover:after  color: lemonchiffon; text-shadow: 1px 1px lemonchiffon, 2px 2px lemonchiffon, 3px 3px lemonchiffon, 4px 4px lemonchiffon; > @keyframes move_lines  100%  background-position: 40px 40px; > >

Живое подчеркивание

H1  display: inline-block; text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white; color: steelblue; transition: all 1s; > H1:after  content: ""; display: block; position: relative; z-index: -1; width: 100%; margin: auto; border-bottom: 3px solid steelblue; bottom: .15em; transition: all 1s; > H1:hover:after  width: 0%; border-bottom-width: 1px; >

Подводка

H1  text-shadow: 1px 1px white, 2px 2px #777; color: #333; transition: all 1s; > H1:hover  text-shadow: 1px 1px white, 2px 2px tomato; color: crimson; >

Разъезжающийся текст

H1  overflow: hidden; text-shadow: 0 0 tomato, 0 0 yellowgreen, 0 0 skyblue; color: transparent; transition: all 1s; > H1:hover  text-shadow: -400px 0 tomato, 400px 0 yellowgreen, 0 0 skyblue; >

Показать комментарии

Сайдбар

Статьи

  • Математические функции в CSS
  • Адаптивное видео с помощью встроенных математических функций CSS
  • Недоступность в картинках
  • Единицы размеров в CSS
  • Генератор цветовых тем
  • Jekyll → Gatsby
  • Вариативные шрифты
  • Размеры в SVG
  • Адаптивный Pixel Perfect
  • Логотип не отвечает или временно недоступен
  • SVG-паттерны
  • Мыльные пузыри на SVG
  • SVG-градиенты
  • Весёлая консолька
  • SVG-маски
  • Умная прокрутка со Scroll Snap Points
  • CSS-анимации для ротации изображений
  • Анимированные SVG-маски
  • Странности обводки в SVG
  • SVG-прелоадеры
  • Анимируем градиенты ещё раз
  • Background-blend-mode
  • Возможности оформления SVG
  • CSS и SVG маски
  • Nth-child и nth-of-type
  • SVG-иконки
  • SVG: заливка и обводка
  • SVG-path
  • SVG: группировка и переиспользование элементов
  • SVG-фигуры и трансформации
  • SVG
  • СSS-градиенты и 3D
  • Рисовалка анимированных теней
  • Свежие CSS-паттерны
  • CSS-паттерны
  • Радиальные градиенты
  • Линейные градиенты
  • Крестики-нолики на CSS
  • Border-image
  • Электронные часы на CSS и JS.
  • Сколько весят селекторы?
  • Символы юникода
  • Свойство content
  • Анимируем CSS-градиенты
  • Текстовые эффекты
  • Древовидный список на CSS
  • Css-селекторы, часть 2
  • Css-селекторы
  • Контекст наложения
  • Два способа «прошить» элемент по краю
  • Box-sizing
  • Цвета в CSS
  • Фон под строчками: добавляем поля
  • Box-shadow
  • Css-фигуры: лепесток
  • Transform
  • Css Animation
  • 3D-куб
  • Border-radius
  • First letter
  • Эти глаза напротив
  • CSS-фигуры
  • Стрелки с помощью свойства border
  • Flexbox

Страницы

  • SVG: полезные ссылки
  • CSS-селекторы одной таблицей
  • Таблица именованных цветов
  • Функции Transform
  • Свойства Transform
  • Свойства Animation одной таблицей
  • Разный синтаксис Flexbox
  • Свойства Flexbox одной таблицей

Проекты

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

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

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