Раньше создать интересные текстовые эффекты, например, сложную тень (самая банальная тень не в счет) можно было только силами графического редактора, вроде Adobe Photoshop, и то, как понимаете на выходе можно было получить только картинку в формате .gif, .png или .jpg. Но с развитием стандартов ситуация меняется. Уже сейчас CSS3 открывает головокружительные возможности оформления для веб-мастера, нужно только знать как использовать эту мощь. Давайте рассмотрим некоторые классные текстовые эффекты которые можно получить используя лишь один простое свойство текста в CSS3 — text-shadow. Оригинал статьи можно найти на сайте на сайте LINE25.
Перед тем как перейти непосредственно к эффектам, немного теории. Свойство text-shadow в CSS3 позволяет задавать:
- смещение тени по отношению к тексту по осям X и Y — X-offset и Y-offset;
- уровень размытия тени (хотя может быть в данном случае лучше подходит термин — растушевка) — blur;
- цвет тени — color:
Но это еще не все. Вы может так же задавать несколько значений для каждого параметра. В этом и кроется вся мощь! Давайте посмотрим что с этим можно придумать.
Винтажный или ретро текст
Эффект достаточно прост, но в тоже время эффектен. В его основе две тени, одна из них того же цвета, что и сам текст, другая тень обычно цвета фона.
Неоновый текст
Этот эффект посложнее предыдущего. В общей сложности наложено 8 теней. Каждый уровень имеет собственное значение растушевки (8 значений) и цвет (2 значения).
Инсет (вдавленный текст)
Эффект вдавленного текста, достаточно просто реализуется за счет небольшого смещения тени по оси Y и легкой растушевки.
Анаглифический текст
Крутой эффект, где помимо всего прочего используются возможности RGBa (в том числе альфа-канал). Еще несколько лет назад было сложно представить что такое возможно без графического редактора, теперь вот — пожалуйста!
Горящий текст
Еще один невероятный эффект и, как видите, довольно сложный. Каждая тень смещается в разную строну и имеет разные параметры цвета и размытия. Результат впечатляет.
«Настольная игра»
По сути является многоуровневой вариацией эффекта «Ретро текст». Все тени четкие, без растушевки.
Посмотреть как эти эффекты выглядят в живую, (а не только на скриншотах) можно на этой демо-странице. Эти эффекты — верхушка айсберга, количество возможных вариантов сложно представить. Ведь это всего лишь одно свойство текста — тень! Чем не демонстрация недюжинных возможностей CSS3? Вообще очень радует развитие веб стандартнов, главное чтобы за этим успевали браузеры и одинаково воспринимали указанные значения параметров CSS и HTML.
P.S. Если вы работаете в интернете то просто обязаны создать свое wordpress портфолио из бесплатных, функциональных и качественных шаблонов.
design-mania.ru
Существует немало решений для реализации эффекта печатающегося текста с помощью javascript. На jQuery например, можно с текстом выписывать такие кренделя, что диву даёшься. Но меня всегда интересует возможность выполнения той или иной задачи с помощью свойств CSS3, конечно только тогда, когда это оправданно и не несёт явных потерь в общей картине конечного результата.
На одном из проектов, мне понадобилось (с легкой руки и по прихоти заказчика) выполнить краткое описание сайта в виде печатающегося текста появляющегося под логотипом вовремя загрузки. Как-то не очень-то хотелось из-за одной строки, подключать в работу дополнительный плагин. Долго искать оптимального решения не пришлось, с помощью CSS-анимации можно создать вполне привлекательную иллюзию печатающегося текста.
Конечно, с использованием специальных jQuery-плагинов, Typed.js например, возможностей больше, в плане настроек и регулирования различных параметров эффекта. Но для простенького печатающегося текста, вполне можно обойтись исключительно средствами CSS, достаточно лишь несколько строк кода и ваш текст оживет.
Использование CSS анимации
Прежде чем приступить к разбору и описанию свойств CSS, хочу предупредить, что эффект отлично работает в современных браузерах, Firefox, Chrome, Opera и даже IE начиная с 10-й версии справляется с анимацией CSS. Для версий IE9 и ранних, лучше использовать механизмы javascript.
В CSS-анимации есть замечательная функция animation-timing-function, свойство которое описывает метод расчета промежуточных значений свойств при анимации. С помощью одной из фунций этого свойства, а именно steps (), мы сможем определить количество кадров анимации, удалив привычную плавную анимацию и создадим блок анимации, воссоздающий реальный эффект набора текста.
Используя значения функции steps(), мы можем реализовать анимацию, увеличивая размер элементов начиная от 0 и до конца строки(абзаца)
Применим свойство анимации для коротенького абзаца, для этого нужную нам строку текста обернем тегом <p> с определенным классом, например: class="text-typing", в итоге получит следующую конструкцию в html:
Теперь, непосредственно в css определим все необходимые свойства для этого класса. Выставим нужную нам ширину абзаца, размер, цвет и начертание шрифта, добавим свойство overflow:hidden;, тем самым с помощью связки со значением 0 в @keyframes
скроем текст до включения анимации в работу. И наконец определим нужные нам значения анимации в временной функции steps ()
Значения CSS для примера:
Всё! Эффект печатающегося текста готов. Срабатывать он будет каждый раз при перезагрузке страницы, нужный вам текст эффектно отпечатается и замрет, выполнив в полной мере задачу, чтобы его непременно заметил пользователь посетивший ваш сайт.
Ссылка на просмотр демо ведет в онлайн-редактор кода, так что при желании можете вволю поэкспериментировать с параметрами. Если обнаружится какая ошибка в коде или косяк в плане отображения, любые поправки и дополнения, обязательно пишите в комментариях.
В работе использовал оригинальный сниппет из коллекции paulund.
С уважением, Андрей.
dbmast.ru
Основы использования теней
Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.
Синтаксис
Для создания тени текста используется синтаксис свойства text-shadow, который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.
Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.
Результат использования данного свойства будет выглядеть следующим образом:
Почему используется rgba?
Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени — уровень прозрачности.
Данный метод существенно проще, чем другие способы определения цвета. Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок.
Вдавленный текст
С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.
Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.
Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.
Четкая тень
Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.
Двойная тень
Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!
Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.
Смещение вниз на большое расстояние
Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.
В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.
Смещение вниз на небольшое расстояние и сильное размытие
Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.
3D текст от Mark Dotto
Эффект используется на сайте MarkDotto.com. В нем используется 12 различных теней для создания отличного эффекта 3D.
Вдавленный текст от Gordon Hall
Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.
Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.
Свечение
Супергерой
Множественные источники света
Мягкое тиснение
Заключение
Как и большинство эффектов CSS, тени очень легко реализовать. Но сочетание простых действий могут в результате привести к поразительным эффектам.
ruseller.com
Каждый веб-дизайнер хочет создавать только стоящие веб сайты, которые оценят все пользователи интернета.
Конечно, невозможно удовлетворить всем вкусам. Еще, как веб-дизайнер вы должны просто попытаться сделать все возможное, чтобы создать сайт, который понравится посетителям! К счастью, уже доступны самые мощные инструменты и ресурсы, чтобы создавать потрясающие веб-сайты и мы собрали для вас некоторые полезные фрагменты CSS, которые помогут сделать интересную фишку в ваших проектах!
Это 15 удивительных текстовых эффектов с помощью CSS3 – все подобраны и мы думаем, что они помогут добавить блеск оригинальности в ваших проектах. Некоторые из них полезны для определенных целей, а другие подходят для многократного использования.
Все рукотворные совершенствоваться и этот пост не исключение! В случае, если мы пропустили ваш любимый текстовый эффект с помощью CSS3, пожалуйста, добавьте его в форме комментария, и мы добавим его в будущем пост! Также, это будет здорово поделиться с нами Вашим мнением об этих текстовых эффектов.
Если вы любите цветы и вы хотите замечательный и полный цвета текста эффект, то это предложение идеальное решение для вас! Это очень подходит для отображения имени креативного агентства или для портфеля проектов. Конечно, он может быть использован для любого другого типа проектов – если вы хотите выделиться, то этот текстовый эффект-отличный выбор!
Волновой эффект действительно потрясающий! Это может использоваться, чтобы добавить немного таинственности. Было бы интересно использовать его для того, чтобы подчеркнуть скидку или специальное предложение, которое работает только в течение очень короткого периода времени.Что вы думаете?
Это очень интересный текстовый эффект; я думаю, что из-за цветовой схемы используется он может быть применен, чтобы подчеркнуть винтажный дизайн. Это умное использование теней текста и он имеет потенциал, чтобы привлечь внимание пользователей. Не забывайте, что Винтаж никогда не умрет!
Следующий текстовый эффект работает как магнит для зрителей. Вы можете использовать это, чтобы улучшить форму, чтобы подчеркнуть новый продукт, предлагаемый для продажи или просто для привлечения глазах зрителей. Это заманчивые и мудрый веб-дизайнер будет использовать его на его/ее преимущество!
Я думаю, что тенденция среди веб-дизайнеров является создание более динамичной онлайн присутствий. Прохладный скользящий эффекты и переходы страниц чаще всего используются возможности добавления больший динамизм сайт. Все же, если вы хотите еще больше динамизма, этот удивительный текст с помощью CSS3 эффект может быть хорошим вариантом. Я думаю, что это простое, но эффективное решение!
Самые требовательные клиенты-это дети, но это не должно заставить вас отказаться создании сайтов для них. Если вы работаете на малыша, связанных с проектом или смешной один, то вы можете использовать этот эффект для текста! В Jokerman шрифт имеет свою особую красоту, не так ли?
CSS3 и 3D-моделирования имеют общего больше, чем только цифра “3”! С помощью CSS3 позволяет создавать красивые 3D эффекты как один из этого фрагмента.Этот эффект подойдет для большой пул проектов и я думаю, что вы должны дать ему попробовать!
Иногда, играя с огнем может быть весело! Не волнуйся, я не пироман, я просто поражена этим прикольный текстовый эффект! Я не помню, чтобы видел этот текстовый эффект в макете других сайтов, так вот еще один повод использовать его и создать оригинальный сайт!
В ситуации, которую Вы цените больше дискретной текстовый эффект, этот “туманный эффект” — это моя рекомендация. Это правда, что он может негативно повлиять на юзабилити вашего сайта. С другой стороны, если Вы не рискуете, Вы не выиграете! Конечно, это могут быть переделаны, чтобы соответствовать Вашим требованиям!
Хотя этот текстовый эффект является довольно сложной, она реализуется с помощью CSS, нет никакого JavaScript. Лично я считаю, что он может быть использован для музыкальных сайтах или выделить определенный элемент с веб-сайта.
Это очень дискретный эффект, но я думаю, что он может добавить “Вау” эффект в макеты. Металлические выглядят чудесно создан и появляющиеся/исчезающие моменты акцентировать.
Я может быть субъективна, потому что я большой фанат «Звездных Войн» фильм, но этот текстовый эффект действительно классный. Это делает ваши проекты более интересные и, несомненно, поклонники этого фильма влюбилась в ваш сайт из-за этого эффекта.
Этот текстовый эффект существенно способствует повышению взаимодействия пользователь-сайт.Это показывает еще раз, что CSS3 имеет большой потенциал и талантливый веб-дизайнер сможет создать красивые анимации с помощью всего нескольких строк кода.
Это последний пункт из этого списка, но Вы не должны игнорировать его. Гораздо больше, Вишенка на торте, дело в том, что нет более 10 CSS3 удивительные текстовые эффекты. Я думаю, что вы должны тщательно проверять их все и изучить, как эти привлечении эффекты были реализованы.
Те, которые все еще думают, что атрибуты CSS не достаточно, чтобы создать интересные текстовые эффекты должны дать прислушаться к этому! Она сочетает в себе несколько эффектов — анимация, 3D-перспективы, теней и текстовые настройки. Я думаю, что тени и обводки сочетание-это старомодно, но этот проект создан с целью показать, чего можно достичь с помощью “чистого CSS”.
w1c.ru
Здесь расскажу о текстовых эффектах, которые можно создать с помощью CSS, Javascript, онлайн сервисов.
Скачать исходники для статьи можно ниже
1. CSS эффекты с текстом.
1.1. Неоновое свечение текста.
Или такое:
Для того, чтобы создать данный эффект нам нужно в файл стилей style.css добавить следующий код (панель управления – пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов находим файл style.css):
h8 { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; }
Далее достаточно открыть редактор любой записи или странички и во вкладке HTML (не в визуальном редакторе) вставить нужный текст, обвернутый в тег h8:
<h8>Mnogoblog</h8>
1.2. 3D текст
Или такой:
Пример кода вышеуказанного эффекта:
Для того, чтобы создать данный эффект нам нужно в файл стилей style.css добавить следующий код (панель управления – пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов находим файл style.css):
h7 { font-size: 60px; color: #909090; text-shadow: 0 1px 0 #bbb, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 4px 0 #aaa, 0 5px 0 #999, 0 6px 1px #000, 0 0px 3px #000, 0 1px 3px #000, 0 3px 5px #000, 0 5px 10px #000, 0 5px 20px #000; }
Далее достаточно открыть редактор любой записи или странички и во вкладке HTML (не в визуальном редакторе) вставить нужный текст, обвернутый в тег h7:
<h7>Привет это 3D текст</h7>
О других текстовых эффектах, которые можно создать с помощью CSS можете прочитать по следующим ссылкам:
http://ruseller.com/lessons.php?rub_id=2&id=810
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
2. Использование javascript для создания эффектов.
Прыгающий волной текст.
Демо-пример можете посмотреть тут:
http://www.yaldex.com/FSTextEffects/PushingText.htm
Здесь же расположен его код:
<script language="JavaScript" type="Text/JavaScript"> //Made by 1st JavaScript Editor //http://www.yaldex.com //Come and get more (free) products fifteenth="Your Text Here";sixteenth=1;var nineteenth=document.getElementById && document.all;seventeenth=new Array();seventeenth[0]=-1;seventeenth[1]=-3;seventeenth[2]=-6;seventeenth[3]=-10;seventeenth[4]=-8;seventeenth[5]=-3;seventeenth[6]=-2;eighteenth=0;twentieth=0;first2=""; function second2(){ if (nineteenth && !sixteenth){third2.innerHTML=fifteenth;return;} if(fifteenth.length > 6){ for(fourth2=0; fourth2 != fifteenth.length;fourth2++){first2=first2+"<span style='position:relative;' id='n"+fourth2+"'>"+fifteenth.charAt(fourth2)+"</span>"};third2.innerHTML=first2;first2="";fifth2();} else{alert("Too short message!");}} function fifth2(){sixth2=(document.getElementById)? document.getElementById("n0") : document.all.n0;sixth2.style.left=-twentieth; if(twentieth != 9){twentieth=twentieth+3;setTimeout("fifth2()",30);} else{fifteenth3();}} function fifteenth3(){sixth2.style.left=-twentieth; if(twentieth != 0){twentieth=twentieth-3;setTimeout("fifteenth3()",30)} else{seventeenth3();}} function seventeenth3(){first2=""; for(fourth2=0;fourth2 != fifteenth.length;fourth2++){ if(fourth2+eighteenth > -1 && fourth2+eighteenth < 7){first2=first2+"<span style='position:relative;top:"+seventeenth[fourth2+eighteenth]+"'>"+fifteenth.charAt(fourth2)+"</span>";} else{first2=first2+"<span>"+fifteenth.charAt(fourth2)+"</span>";}}third2.innerHTML=first2;first2=""; if(eighteenth != (-fifteenth.length)){eighteenth--;setTimeout("seventeenth3()",30);} else{eighteenth=0;setTimeout("second2()",30);}} </script> <h1><div align="center" id="eighteenth3" style="color:red"></div></h1> <script language="javascript" type="text/javascript"> if (document.all||document.getElementById){third2=(document.getElementById)? document.getElementById("eighteenth3") : document.all.eighteenth3;second2();}else document.write(fifteenth); </script>
О том как вставить Javascript на свой сайт можете прочитать в моей предыдущей статье:
https://mnogoblog.ru/kak-podklyuchit-javascript-v-wordpress
Данный скрипт я попробовал вставить в индивидуальный шаблон страницы на своем тестовом сайте – получилось, можете посмотреть: http://mnogoblog2.16mb.com/java/
Другие интересные javascript эффекты можно найти на следующих сайтах:
http://www.yaldex.com/FSTextEffects.htm
http://catalogsv-3dn.narod.ru/tecst.html
3. Онлайн сервисы
http://csswarp.eleqtriq.com/ – онлайн ресурс, позволяющий расположить текст по кривой линии, по кругу, по спирали,..
Где можно применить данный текст, ну например, в шапке.
Конечно, в некоторых случаях проще будет нарисовать текст по кривой на самой фоновой картинке сайта, однако, если фоновой картинки нет или же в шапке установлен цвет с помощью css, то данный способ можно будет применить.
Расположение текста выстраивается аналогично программе Adobe Illustrator.
С лева представлено четыре блока:
– TEXT – здесь вводите текст, который будете располагать по кривой, можно писать по-русски и нажимаете на кнопку “warp it”.
– CURVE – здесь задаете расположение текст по кривой, по кругу, либо добавляете еще точек и превращаете кривую в нужную вам фигуру.
– TYPE – здесь задаете расстояние между буквами, их расположение внутри или снаружи кривой, размер шрифта, отдаленность шрифта от кривой.
– POINT – здесь можно удалять точки и изменять их углы.
Справа представлен блок, который показывает реальный размер вашего блока с данным текстом, так что уменьшите его до тех размеров, которые хотите, в нижнем правом углу написаны его размеры.
После того, как вы нарисовали нужную вам фигуру или кривую жмите на кнопку “GENERATE HTML” (расположена вверху над правым блоком).
Сверху стоят кнопочки, определяющая юзабилити данного кода для различных браузеров – по умолчанию стоят все.
Теперь разберемся с кодом, здесь нам понадобится только часть кода, а именно:
То что заключено между тегами <style type=’text/css’> и до </style> мы должны будем вставить в файл стилей style.css. То есть входим в панель управления вашим сайтом, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов находим файл style.css, спускаемся в конец его кода и вставляем код, который находится между вышеуказанными тегами, например у меня он выглядел так:
#warped {position: relative; display: block; width:313px; height:168px;} #warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute; -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50% 100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; } #warped span{font-family:'ABeeZee';font-size:38px;font-weight:regular;font-style:normal; line-height:1; white-space:pre; overflow:visible; padding:0px;} #warped .w0 {-moz-transform: rotate(4.74rad);-webkit-transform: rotate(4.74rad);-o-transform: rotate(4.74rad);-ms-transform: rotate(4.74rad); transform: rotate(4.74rad); width: 32px; height: 38px; left: 35.04px; top: 104.97px;} #warped .w1 {-moz-transform: rotate(5.08rad);-webkit-transform: rotate(5.08rad);-o-transform: rotate(5.08rad);-ms-transform: rotate(5.08rad); transform: rotate(5.08rad); width: 23px; height: 38px; left: 46.45px; top: 71.35px;} #warped .w2 {-moz-transform: rotate(5.38rad);-webkit-transform: rotate(5.38rad);-o-transform: rotate(5.38rad);-ms-transform: rotate(5.38rad); transform: rotate(5.38rad); width: 23px; height: 38px; left: 61.44px; top: 45.49px;} #warped .w3 {-moz-transform: rotate(5.68rad);-webkit-transform: rotate(5.68rad);-o-transform: rotate(5.68rad);-ms-transform: rotate(5.68rad); transform: rotate(5.68rad); width: 22px; height: 38px; left: 83.48px; top: 25.49px;} #warped .w4 {-moz-transform: rotate(5.97rad);-webkit-transform: rotate(5.97rad);-o-transform: rotate(5.97rad);-ms-transform: rotate(5.97rad); transform: rotate(5.97rad); width: 23px; height: 38px; left: 109.41px; top: 12.63px;} #warped .w5 {-moz-transform: rotate(6.27rad);-webkit-transform: rotate(6.27rad);-o-transform: rotate(6.27rad);-ms-transform: rotate(6.27rad); transform: rotate(6.27rad); width: 23px; height: 38px; left: 138.94px; top: 8px;} #warped .w6 {-moz-transform: rotate(6.52rad);-webkit-transform: rotate(6.52rad);-o-transform: rotate(6.52rad);-ms-transform: rotate(6.52rad); transform: rotate(6.52rad); width: 13px; height: 38px; left: 168.69px; top: 10.97px;} #warped .w7 {-moz-transform: rotate(6.77rad);-webkit-transform: rotate(6.77rad);-o-transform: rotate(6.77rad);-ms-transform: rotate(6.77rad); transform: rotate(6.77rad); width: 23px; height: 38px; left: 186.95px; top: 19.97px;} #warped .w8 {-moz-transform: rotate(7.07rad);-webkit-transform: rotate(7.07rad);-o-transform: rotate(7.07rad);-ms-transform: rotate(7.07rad); transform: rotate(7.07rad); width: 22px; height: 38px; left: 210.99px; top: 37.57px;} #warped .w9 {-moz-transform: rotate(7.3rad);-webkit-transform: rotate(7.3rad);-o-transform: rotate(7.3rad);-ms-transform: rotate(7.3rad); transform: rotate(7.3rad); width: 11px; height: 38px; left: 230.94px; top: 56.03px;} #warped .w10 {-moz-transform: rotate(7.5rad);-webkit-transform: rotate(7.5rad);-o-transform: rotate(7.5rad);-ms-transform: rotate(7.5rad); transform: rotate(7.5rad); width: 15px; height: 38px; left: 237.56px; top: 74.04px;} #warped .w11 {-moz-transform: rotate(7.76rad);-webkit-transform: rotate(7.76rad);-o-transform: rotate(7.76rad);-ms-transform: rotate(7.76rad); transform: rotate(7.76rad); width: 23px; height: 38px; left: 239.12px; top: 99.37px;}
Далее нам нужно вставить на наш сайт еще один кусок, предлагаемого нам кода, а именно тот, который заключен между тегами <body> и </body>, например у меня он выглядел так:
<div id='warped'> <span class='w0'>M</span><span class='w1'>n</span><span class='w2'>o</span><span class='w3'>g</span><span class='w4'>o</span><span class='w5'>b</span><span class='w6'>l</span><span class='w7'>o</span><span class='w8'>g</span><span class='w9'>.</span><span class='w10'>r</span><span class='w11'>u</span> </div>
Его нужно вставить там, где вам нужно расположить ваш текст.
Например можно вставить его в саму запись, но только в HTML вкладке редактора записи или же в виджет (выбирите виджет с названием “Текст”, перенесите его в сайдбар и вставьте внутри вышеуказанный код), или же непосредственно в код нужного вам шаблона, например для вставки в шапку вам необходимо вставить его в файл header.php (где-то после тега body).
mnogoblog.ru
Использование text-shadow
В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).
Рис. 1. Параметры text-shadow
Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.
Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.
К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере мы никаких красивостей не увидим.
Контурный текст
Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.
Рис. 2. Контурный текст
Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.
Пример 1. Контурный текст
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> .stroke { font: 2em Arial, sans-serif; text-shadow: red 0 0 2px; } </style> </head> <body> <p class="stroke">Контурный текст</p> </body> </html>Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).
Пример 2. Четыре тени для контура
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> .stroke { font: 2em Arial, sans-serif; text-shadow: red 1px 1px 0, red -1px -1px 0, red -1px 1px 0, red 1px -1px 0; } </style> </head> <body> <p class="stroke">Контурный текст</p> </body> </html>Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.
Рис. 3. Контур с помощью четырёх теней
Трёхмерный текст
Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.
Рис. 4. Трёхмерный текст
Лично мне подобный текст напоминает надписи в стиле ретро и опять же лучше всего он подходит для заголовков, а не для основного текста веб-страницы.
Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.
Пример 3. Тень для добавления трёхмерности
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> .stroke { font: bold 3em Arial, sans-serif; color: #0d3967; text-shadow: #cad5e2 1px 1px 0, #cad5e2 2px 2px 0, #cad5e2 3px 3px 0, #cad5e2 4px 4px 0, #cad5e2 5px 5px 0; } </style> </head> <body> <h1 class="stroke">Десятикамерный холодильник</h1> </body> </html>Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.
Тиснение текста
Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).
Рис. 5. Рельефный текст
Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).
Пример 4. Рельефный текст
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> body { background: #f0f0f0; /* Цвет фона веб-страницы */ } .stroke { font: bold 3em Arial, sans-serif; color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */ text-shadow: #fff -1px -1px 0, #333 1px 1px 0; } </style> </head> <body> <h1 class="stroke">Рельефный текст</h1> </body> </html>Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.
text-shadow: #333 -1px -1px 0, #fff 1px 1px 0;Свечение
Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.
Рис. 6. Свечение текста
Пример 5. Свечение
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> .light { text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */ color: #0083bd; } .dark { text-shadow: red 0 0 10px; /* Свечение красного цвета */ } </style> </head> <body> <h1 class="light">Светлая сторона</h1> <h1 class="dark">Тёмная сторона</h1> </body> </html>Размытие
Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow.
Рис. 7. Текст с размытием
Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.
Пример 6. Размытие текста
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> .blur { text-shadow: #000 0 0 5px; color: transparent; /* Прозрачный цвет текста */ } </style> </head> <body> <h1 class="blur">Нерезкий текст</h1> </body> </html>Тень и псевдоклассы
Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.
Пример 7. Использование псевдоклассов
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> a:hover { /* Вид ссылки при наведении на неё курсора */ text-shadow: #5dc8e5 0 0 5px; color: #000; } p:first-letter { /* Первая буква абзаца */ font-size: 2em; text-shadow: red 1px 1px 0, red -1px -1px 0, red -1px 1px 0, red 1px -1px 0; } </style> </head> <body> <p>Нишевый проект тормозит <a href="1.html">традиционный канал</a>, не считаясь с затратами. Структура рынка, отбрасывая подробности, стабилизирует департамент маркетинга и продаж, используя опыт предыдущих кампаний. Построение бренда, безусловно, спонтанно отталкивает конвергентный PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой социальный статус, повышая конкуренцию. Торговая марка естественно обуславливает план размещения, используя опыт предыдущих кампаний.</p> </body> </html>htmlbook.ru
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%);Финальный результат
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: 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%);Слегка еще поигравшись над небольшими нюансами, я получил следующий результат…
Финальный результат
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);Финальный результат
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%);При необходимости можно добавить еще несколько дополнительных штрихов, чтобы сгладить переход от обводки к тени.
Финальный результат
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);Если очень хочется, можно добавить еще пару внешних штрихов. В итоге получится следующий эффект рисованной надписи…
Финальный результат
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), ...Финальный результат
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. Да пребудет с вами тень!
habr.com