![Color Happiness Color Happiness](https://habrastorage.org/getpro/habr/post_images/ac5/8da/f73/ac58daf73ae9785d27dd01ceadbf8d4e.png)
В прошлых двух статьях мы познакомились с тем, как работают тени в CSS3: box-shadow и text-shadow. Сегодня, продолжая последнюю тему, мы посмотрим на еще несколько красивых примеров использования теней для текста для достижения интересных эффектов.
Честно скажу, что некоторые идеи (две-три) были подсмотрены в различных статьях по работе с Photoshop — и мне было интересно, можно ли достичь схожих эффектов просто используя text-shadow.
Также должен сразу предупредить, что многие примеры (если не сказать, что большинство) могут не работать в вашем любимом браузере, потому что он еще не поддерживает актуальную версию text-shadow со spread-distance. Но вы всегда можете поставить себе «Platform Preview»-версию Internet Explorer 10, чтобы протестировать новые возможности.
Стоит также отметить, что практически во всех примерах используется определение цвета через функцию hsl — это оказывается весьма удобно, так как можно легко изменять яркость и насыщенность, не изменяя оттенок, что чрезвычайно полезно при работе с тенями.
Arcade Love
В первом примере мы попробуем сделать выпуклые буквы на специальной подложке. И начнем с того, что у нас просто будет надпись нужного нам цвета:
![](https://habrastorage.org/getpro/habr/post_images/441/27c/e21/44127ce21ba05a6e85e85efbada1945a.png)
color: hsl(80, 70%, 55%);
Далее начинается последовательная работа по формированию выпуклости букв, за счет последовательного наложения теней со сдвигом в 1px по диагонали (обратите внимание на то, как задается цвет тени относительно цвета текста!):
![](https://habrastorage.org/getpro/habr/post_images/c9b/c70/1bf/c9bc701bffed6a89de1d702fb240bb88.png)
text-shadow: -1px -1px 0 hsl(80, 70%, 35%),
-2px -2px 1px hsl(80, 70%, 35%);
Тут сразу можно добавить еще несколько штрихов: небольшой белый штрих вокруг текста и затемнение внизу тени (это смягчает переходы):
![](https://habrastorage.org/getpro/habr/post_images/c90/ef3/2a8/c90ef32a8f33a3c96c400fdb39a61ba1.png)
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):
![](https://habrastorage.org/getpro/habr/post_images/86a/2b8/168/86a2b81682db9d4999e1d162cd5bfe57.png)
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%);
Наконец, чтобы надпись вместе с подложкой аккуратно приземлилась на фон, нужно добавить небольшое затенение внизу:
![](https://habrastorage.org/getpro/habr/post_images/04c/a3b/fa6/04ca3bfa6aba50dc4edd036d3cb9d918.png)
text-shadow: ...
-7px -7px 4px 8px hsl(60, 10%, 40%),
-8px -8px 6px 9px hsl(60, 10%, 55%);
Финальный результат
![Arcade Love Arcade Love](https://habrastorage.org/getpro/habr/post_images/aae/097/e9f/aae097e9f53891663721d19f7c6ca117.png)
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
Второй пример в чем-то отталкивается от первого: мы попробуем сделать множественные цветные подложки, чтобы в итоге получить красивую текстовую пирамидку. Начнем мы опять-таки с обычной текстовой надписи:
![](https://habrastorage.org/getpro/habr/post_images/96e/1d4/a5d/96e1d4a5d6846373e968516c63c25957.png)
color: hsl(330, 100%, 50%);
Первым делом сделаем из тексты выпуклость. Так как в данном случае
тень будет направлена строго вниз и небольшая, я несколько экономлю на количестве правил, пропуская промежуточные сдвиги (1px) — в случае наклонной тени из-за этого получится лесенка. Также для смягчения перехода к подложке в последнее правило добавлено размытие:
![](https://habrastorage.org/getpro/habr/post_images/cbd/83c/14c/cbd83c14c901c9a6777e6e430fd9d1c8.png)
text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),
0 3px 2px 0px hsla(330, 100%, 15%, 0.5);
Далее добавляем расширенную подложку со смещенным оттенком и рисуем для нее абсолютно аналогичную тень (заметьте, что помимо сдвига по вертикали, меняются только два параметра — оттенок и размер тени):
![](https://habrastorage.org/getpro/habr/post_images/a2c/5f2/81e/a2c5f281e5f446ea8e5cca4d85d7b593.png)
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);
Осталось повторить этот же прием еще несколько раз, увеличивая размер подложки и смещая ее оттенок в нужную сторону:
![](https://habrastorage.org/getpro/habr/post_images/f25/65f/c83/f2565fc83037888cba1cf0c0f22db477.png)
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 Happiness](https://habrastorage.org/getpro/habr/post_images/ac5/8da/f73/ac58daf73ae9785d27dd01ceadbf8d4e.png)
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
Третий пример получился почти случайно из экспериментов с чередованием теней. Как и в предыдущих случаях, давайте начнем просто с задания цвета надписи:
![](https://habrastorage.org/getpro/habr/post_images/564/1df/123/5641df123e433386c1d0ebc7f46b98f6.png)
color: hsl(20, 100%, 20%);
Первая вещь, с которой я начал, это классическая 3D-надпись:
![](https://habrastorage.org/getpro/habr/post_images/48a/4a6/c17/48a4a6c17cc6b7ba2b1b78eb09924b93.png)
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%);
Далее я решил постепенно затемнить тень, убирая яркость, и раздвинуть ее, увеличив сдвиг по диагонали (при этом как раз получается лесенка, о которой я писал выше):
![](https://habrastorage.org/getpro/habr/post_images/6b1/944/448/6b1944448bc0c337a6e1a6a5f804c54f.png)
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%);
Следующий шаг — добавить к смещению тени уменьшение ее размеров. С учетом перекрытий теней и размера шрифта, — а в уменьшенной тени, в конечном счете, могут остаться лишь намеки на фрагменты символов, — получается слегка рваный эффект. Также обратите внимание, что шаги сдвига тени и уменьшения ее размера отличаются, это дает эффект небольшого закручивания:
![](https://habrastorage.org/getpro/habr/post_images/7ec/bca/67b/7ecbca67b1233bd7accd1d2351e3e1de.png)
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%);
Осталось все немного сгладить (кстати, варьируя размытие или цвет, можно вставлять промежуточные полоски):
![](https://habrastorage.org/getpro/habr/post_images/f69/44c/cd0/f6944ccd0a601ebf391b34e5bb7ed519.png)
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 Chocolate](https://habrastorage.org/getpro/habr/post_images/b95/918/f95/b95918f957212fb23df7c6872bf246d8.png)
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
В четвертом примере мы попробуем добиться эффекта кремо-глазурной надписи на торте или чего-то похожего на такую надпись. Начнем опять-таки с простого текста:
![](https://habrastorage.org/getpro/habr/post_images/cd4/5a8/9ed/cd45a89ed008589d296256103be47268.png)
color: hsl(35, 100%, 30%);
background: hsl(35, 60%, 80%);
Начнем с небольшого размытия надписи. Для этого я добавил две тени: первая (верхняя) сделана тем же оттенком, что и надпись, но менее насыщенным цветом, вторая (нижняя) — сильно размыта, смещена немного в сторону красного, чуть более яркая и полупрозрачная (то есть она будет накладываться на все, что будет под ней):
![](https://habrastorage.org/getpro/habr/post_images/64d/83a/197/64d83a19710369cd1b2d20e19e153aa6.png)
text-shadow: 0 0 2px 1px hsl(35, 70%, 30%),
0 0 4px 4px hsla(30, 100%, 55%, 0.5);
Далее мы добавляем светлую кремовую подложку (оттенок смещен к желтому, а цвет сделан с повышенной светлостью):
![](https://habrastorage.org/getpro/habr/post_images/bce/772/f8f/bce772f8fe7ea38aa21c056d5042ca88.png)
text-shadow: ...
-1px 1px 2px 7px hsl(45, 60%, 95%);
Теперь надо добавить подложке немного объема, для чего задаем тень со смещением, делаем ее того же цвета, что и сам текст, но немного менее насыщенным. Обратите внимание, что за счет того, что подложка к надписи расширена больше, чем тень к ней (7px против 4px), получается что последняя тень меньше подложки:
![](https://habrastorage.org/getpro/habr/post_images/020/acf/f02/020acff02c9ce060e5d026b79a60405c.png)
text-shadow: ...
-3px 3px 1px 4px hsl(35, 70%, 30%);
И последний штрих: аналогичное размытие подложки для более мягкого сочетания с фоном:
![](https://habrastorage.org/getpro/habr/post_images/2c0/f4f/56a/2c0f4f56ae3b800e2494495eee86364c.png)
text-shadow: ...
-3px 3px 4px 8px hsla(30, 90%, 55%, 0.5);
Финальный результат
![Cream Cake Cream Cake](https://habrastorage.org/getpro/habr/post_images/e33/9d6/a14/e339d6a14bc5fe4b2fe510ccc70f853a.png)
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) и эффекты с тенью, применяемые к нему. Давайте еще раз начнем с простого текста, чтобы отследить все трансформации:
![](https://habrastorage.org/getpro/habr/post_images/e02/416/467/e0241646759a5275052eebde3c0d5638.png)
color: hsl(65, 60%, 20%);
background: hsl(65, 60%,95%);
Первым делом, давайте добавим небольшое размытие вокруг самой надписи (обратите внимание, что тут цвет тени заметно светлее исходной надписи, поэтому последняя с примененной тень выглядит несколько насыщеннее и светлее:
![](https://habrastorage.org/getpro/habr/post_images/a13/f6f/010/a13f6f010f62f444e1b4267bab374797.png)
text-shadow: 0 0 3px 2px hsl(65, 60%,75%);
Далее можно добавить дополнительную обводку с небольшим размытием (обратите внимание на увеличение размера тени и пониженную светлость):
![](https://habrastorage.org/getpro/habr/post_images/2f6/2b6/1da/2f62b61dafe526bd78200ecaab354eab.png)
text-shadow: 0 0 3px 2px hsl(65, 60%,75%),
0 0 1px 9px hsl(65, 60%, 20%);
Получилось темновато — надо вставить между двумя тенями еще одну для осветления:
![](https://habrastorage.org/getpro/habr/post_images/779/e9e/589/779e9e58909558e5e6e1e1277c67c3ae.png)
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%);
Теперь начинается самое интересное — на самом деле мне нужна не целиком вся обводка, а только ее части. Чтобы скрыть лишнее, поверх нее можно нарисовать несколько теней цвета фона (обратите внимание, что эти тени меньше по размеру, чем обводка, зато сдвинуты в ту или иную сторону сильнее):
![](https://habrastorage.org/getpro/habr/post_images/914/835/4b8/9148354b8c1397cc3f8257af7e3863d9.png)
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 Plastic](https://habrastorage.org/getpro/habr/post_images/eed/575/316/eed575316fda4b2a79e3d5207417db17.png)
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. Все тени, которые вы рисуете, выстраиваются в стек и отрисовываются одна поверх другой, причем сам текст всегда располагается сверху! Текст, как бы мешается… Поэтому надо начать с того, чтобы убрать текст. Правильно, надо сделать его прозрачным:
![](https://habrastorage.org/getpro/habr/post_images/fb4/a85/d1a/fb4a85d1a684be0177c9a214f651b9a6.png)
color: transparent;
background: hsl(0, 75%,45%);
Теперь дорога расчищена! Сразу скажу, чтобы вы обратили на это внимание: рисовать мы будем белым цветом, поэтому единственное, что имеет значение, это выставленная на 100% светлость. Чтобы сделать штрих внутри текста, достаточно уменьшить размет тени:
![](https://habrastorage.org/getpro/habr/post_images/960/56a/ced/96056aced41386d65e630e1a7104d3dc.png)
text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75);
Добавим еще несколько штрихов, варьируя прозрачность, сдвиг и размер:
![](https://habrastorage.org/getpro/habr/post_images/bf4/5c0/dd2/bf45c0dd246054df664b0bb663ce7fbb.png)
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);
Для придания формы и усиления закраски можно добавить общую размытую (и частично прозрачную) тень:
![](https://habrastorage.org/getpro/habr/post_images/c89/bfc/ecc/c89bfcecc8de1d8a43e87ccae27caff9.png)
text-shadow: ...
0 0 1px 2px hsla(0, 60%, 100%, 0.65);
Если очень хочется, можно добавить еще пару внешних штрихов. В итоге получится следующий эффект рисованной надписи...
Финальный результат
![Painting Painting](https://habrastorage.org/getpro/habr/post_images/b28/b9d/dab/b28b9ddabc8ddf2785e33f9463209cb1.png)
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
Заключительный эффект продолжает эксплуатировать прозрачность текста :) Здесь мы тоже начнем с полностью прозрачного текста (я его выделил, чтобы отличить от фона):
![](https://habrastorage.org/getpro/habr/post_images/cbf/a82/181/cbfa82181fa923bf7776f3fac4135bc7.png)
color: transparent;
Первым делом мы сделаем их текста обычный 3D-текст (можете дополнительно поиграться с прозрачностью). Обратите внимание на небольшой скачок в светлости в середине — это помогает сделать небольшую риску в середине текста (попробуйте увеличить светлость, чтобы это стало более заметным):
![](https://habrastorage.org/getpro/habr/post_images/479/7f1/61f/4797f161f461f95f5241d4b67facb26f.png)
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);
Теперь, чтобы придать большей формы, я добавлю тень сверху, в общем-то повторяющую форму исходного текста:
![](https://habrastorage.org/getpro/habr/post_images/15e/e2e/7f8/15ee2e7f832c6497e5aec91a3ca8e5f1.png)
text-shadow: 0px 0px hsla(0, 0%, 50%, .5),
1px -1px hsla(0, 0%, 30%, .6),
...
Наконец, аналогично нижней части, давайте добавим верхнюю 3D-тень, но более светлую и более прозрачную (для увеличения резкости самая верхняя тень сделана чуть менее прозрачной, чем остальные):
![](https://habrastorage.org/getpro/habr/post_images/10d/4cd/d31/10d4cdd31f0d7a3ab65373d2fd72ae84.png)
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 Up & Down](https://habrastorage.org/getpro/habr/post_images/259/f78/6ad/259f786adde382affa99caddda46b175.png)
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);
Вы также можете поиграться с оттенками и насыщенности, например, сделав низ красным, а верх синим, или как-нибудь еще...
![](https://habrastorage.org/getpro/habr/post_images/ca2/636/926/ca26369265895d3cf18a8787b88cf93f.png)
Internet Explorer
Чтобы попробовать все это самостоятельно, не забудьте поставить себе «Platform Preview»-версию Internet Explorer 10. Да пребудет с вами тень!