Microsoft — мировой лидер в области ПО и ИТ-услуг
516,10
рейтинг
12 января 2012 в 11:36

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

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. Да пребудет с вами тень!
Автор: @kichik
Microsoft
рейтинг 516,10
Microsoft — мировой лидер в области ПО и ИТ-услуг

Комментарии (28)

  • +7
    Не плохо было бы ссылку с примерами, чтобы после того как все-таки скачаешь и поставишь IE10 можно было бы и посмотреть это…
    Или весь пост писался только ради того чтобы люди Preview-версию скачали?

    А вообще Chocolate самый клевый)
  • +6
    А-а-а, мои глаза!..
    Такое ощущение, что школьник, впервые увидевший фотошоп, играется с фильтрами.
    • +2
      Любое баловство с тенями, градиентами и прочими эффектами должно быть разумно обосновано — думаю, это очевидно. Воспринимайте пост просто как PoC.
  • 0
    Примеры впечатляют!
    Некоторые конечно требуют доработки для реального использования, но как демонстрация технологии великолепны!
  • +2
    Замечательно! Как раз на днях нужно было нечто подобное.
    Будем ждать поддержку spread-distance остальными браузерами.
  • 0
    Я конечно понимаю что это демонстрация технологии, но всё-же надо приучать к хорошему дизайну с мануалов. А то ощущение что верулся в нулевые, разве что мигающих гифок не хватает.
    • +1
      [зануда мод] :) можно выключить. Отличная статья с хорошими примерами. Каждый пример выдержан в определённом стиле. Автору спасибо.
  • 0
    Странно, что сам текст только на картинках…
  • +2
    Не все надписи получиличь удачные, но ARCADE LOVE и COLOR HAPPINESS смотрятся отлично. Это прекрасно. Цвета яркие и хорошо сочетаются. Даже удивительно, что в блоге майкрософт можно увидеть что-то красивое и отличное от скучных сине-серых окон.

    Ну и конечно, вместо того, чтобы качать какой-то превью глючного и небыстрого браузера, который наверняка потребует дотнет и кучу компонентов, лучше скачать Google Chrome: www.google.com/chrome

    • 0
      Только в великолепном Google Chrome это не будет работать (см. комментарий на этот счет в статье), а IE не требует .net.
    • –5
      Правильно, вместо чистого, быстрого браузера, качайте браузер с кучей неизвестных спайварей :)
  • +8
    MS WordArt is back!
    • НЛО прилетело и опубликовало эту надпись здесь
  • +4
    Такие посты от Microsoft лично мной воспринимаются как изящный троллинг.
    Посмотрите как здорово будет(а будет ли?) в нашем браузере, который ещё не вышел.
    А ваш браузер такое может(уже сейчас)?

    Может этим они заставляют разработчиков отвлекаться на рюшечки вместо многопоточного исполнения js, унификации и стандартизации api и прочих, действительно нужных вещей?
    • 0
      Так MS как бы тоже участвует в создании стандартов как HTML так и CSS. Если бы это была какая-нибудь альфа сборка хрома или фокса, это не был бы троллинг?
      • –2
        В том то и дело, что заявления от Mozilla мной так не воспринимаются. Потому что их альфа будет релизом через 3 месяца.
        • НЛО прилетело и опубликовало эту надпись здесь
          • –2
            Почти 50% зоопарка — это XP.
  • –6
    Почему в тегах только IE10? Вам не кажется, что это наглая декларация, что Microsoft нихрена не исправилась и имеет намерение по-прежнему использовать любую удобную зацепку для создания несовместимости на рынке браузеров, операицонных систем и т.д.?

    И где все слёзные обещания про следование стандартам и опенсорсность?
    • +2
      Потому что
      1) text-shadow — это самая что ни на есть стандартная вещь, посмотрите спецификацию!
      2) реализация в ie10 сделана строго в соответствии со спецификацией
      3) текущая реализация в других браузерах, насколько мне известно, базируется на старой версии черновика и не поддерживает новые стандартные(!) возможности.

      Если все это начнет работать в любом другом браузере, я с большой радостью напишу об этом в статье — только скажите, когда это случится.
      • 0
        спецификацию белую или очередной черновик?
        • НЛО прилетело и опубликовало эту надпись здесь
        • +2
          Актуальный на текущий момент Working Draft: www.w3.org/TR/css3-text/#text-shadow от 1 сентября 2011г., причем обратите внимание, что это версия text-shadow с четырьмя линейными параметрами (аналогичными box-shadow) существует с 5 октября 2010г.

          Что такое белая спецификация, я не знаю, но у любой спецификации W3C есть разные статусы и WD — один из них.

          Безусловно, описание text-shadow может измениться в будущем, что, правда, говоря, мало вероятно. Но на сегодня факт заключается в том, что долгое время от MS требовали реализации text-shadow, а на деле оказывается, что сейчас в IE10 самая актуальная реализация, в то время как в других браузерах она уже более года не вполне соответствует спеку.

          См. например, bugzilla.mozilla.org/show_bug.cgi?id=655590 — в Firefox, вероятно, современная поддержка text-shadow появится, когда CSS3 Text достигнет статуса Candidate Recommendation.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    Что-то IE10 потребовал Win 8 dev. preview. Это нормально? Если да, то почему бы в топике об этом не сообщить? А если нет — то почему?
    • 0
      Первые две превьюхи не требуют, 3 и 4 требует
  • +3
    Не работает в IE6!!!

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

Самое читаемое Разработка