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

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

Некоторые идеи для теней я нашел в различных уроках для Photoshop — и меня интересовало, смогу ли я добиться подобных эффектов, используя только текстовую тень.

Internet Explorer и Windows 8

Чтобы самостоятельно попробовать все эти примеры и выразить свое творчество с помощью тени текста, попробуйте загрузить Internet Explorer 10 . Все упомянутые методы также будут работать с приложениями в стиле metro для Windows 8, созданными с использованием html и javascript. Пусть Тень будет с тобой!

Аркада Любовь

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

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%);

Далее давайте добавим подложку для нашего текста. Чтобы это произошло, нам нужно расширить нашу тень (здесь мы используем четвертый параметр правила text-shadow — 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%);

Конечный результат

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

text-shadow: 0 0 2px #fff, 
        
/*
embossed text */
        
-1px -1px 0 hsl(80, 70%, 35%),
        
-2px -2px 1px hsl(80, 70%, 35%),
        
/*
transition to substrate */  
        
-2px -2px 2px hsl(80, 10%, 15%), 
        
/*
substrate */                            
        
-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%),
        
/*
shadow for substrate */                            
        
-7px -7px 4px 8px hsl(60, 10%, 40%),
        
-8px -8px 6px 9px hsl(60, 10%, 55%);

Цвет счастья

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

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

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

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: 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);

Шоколад

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

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%);

Наконец, поиграв с этим образцом еще несколько минут, я получил следующий результат…

Конечный результат

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);

Крем для торта

В четвертом примере мы создадим кремовый текстовый эффект для некоторого торта. Просто текст:

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%);

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

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

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

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

Конечный результат

color: hsl(35, 100%, 30%);

background: hsl(35, 60%, 80%);

text-shadow: 0 0 2px 1px hsl(35, 70%, 30%),
        
/*
transition to substrate */
        
0 0 4px 4px hsla(30, 100%, 55%, 0.5),
        
/*
substrate */
        
-1px 1px 2px 7px hsl(45, 60%, 95%),
        
/*
adding volume */
        
-3px 3px 1px 4px hsl(35, 70%, 30%),
        
/*
transition to background */
        
-3px 3px 4px 8px hsla(30, 90%, 55%, 0.5); 

пластик

Я играл с последним образцом, думая, что я могу сделать поверх него… Как и во многих других примерах, конечные результаты зависят как от самого текста (размер, шрифт и т. Д.), Так и от примененных теневых эффектов. В пятом примере я использую шрифт 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%);

Вы также можете попытаться добавить некоторые смягчающие детали.

Конечный результат

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

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

text-shadow: 0 0 3px 2px hsl(65, 60%,75%),
       
/*
light substrate */
       
0 0 1px 5px hsl(65, 60%,95%),
       
/*
blurring */
       
0 0 4px 4px hsla(65, 100%, 30%, 0.4),
       
/*
cutting substrate pieces */
       
6px 6px 4px 7px hsl(65, 60%,95%),
       
-4px -6px 4px 6px hsl(65, 60%,95%),
       
/*
dark outlining */
       
0 0 1px 9px hsl(65, 60%, 20%);

Картина

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

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);

Вы можете добавить дополнительные детали, если хотите.

Конечный результат

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),
        
/*
background */
        
0 0 1px 2px hsla(0, 60%, 100%, 0.65),
        
/*
additional details */
        
-3px -3px 1px 2px hsla(0, 60%, 100%, 0.25),
        
3px 3px 1px 2px hsla(0, 60%, 100%, 0.25); 

Вверх вниз

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

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),
        
...

Конечный результат

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);

Запись

Свойство text-shadow, обсуждаемое в этой статье, определено в текстовом модуле CSS3, который в данный момент находится в рабочем состоянии. Между тем, он кажется достаточно стабильным, но все еще может измениться в деталях.

Значение расстояния разбрасывания для текстовых теней в настоящее время определено в ED для css4-текста .

Лицензия