.

Вот та операция, о которой я говорил в туториале: http://yadi.sk/d/6Kuywu53QWWpA .

Шрифт С Тенью Css

Блог компании Microsoft / Хабрахабр. В прошлых двух статьях мы познакомились с тем, как работают тени в CSS3: box- shadow и text- shadow. Сегодня, продолжая последнюю тему, мы посмотрим на еще несколько красивых примеров использования теней для текста для достижения интересных эффектов.

• В данном разделе сайта вы сможете бесплатно скачать русские декоративные шрифты для Фотошопа. Огромные подборки декоративных шрифтов на .
• С шрифтами (начертанием) изменений нет =) Krasnovosti.ru . Она тут рыба. Похоже вы не знаете, что такое "рыба".

Честно скажу, что некоторые идеи (две- три) были подсмотрены в различных статьях по работе с Photoshop — и мне было интересно, можно ли достичь схожих эффектов просто используя text- shadow. Также должен сразу предупредить, что многие примеры (если не сказать, что большинство) могут не работать в вашем любимом браузере, потому что он еще не поддерживает актуальную версию text- shadow со spread- distance. Но вы всегда можете поставить себе «Platform Preview»- версию Internet Explorer 1. Стоит также отметить, что практически во всех примерах используется определение цвета через функцию hsl — это оказывается весьма удобно, так как можно легко изменять яркость и насыщенность, не изменяя оттенок, что чрезвычайно полезно при работе с тенями. Arcade Love. В первом примере мы попробуем сделать выпуклые буквы на специальной подложке. И начнем с того, что у нас просто будет надпись нужного нам цвета: color: hsl(8. Далее начинается последовательная работа по формированию выпуклости букв, за счет последовательного наложения теней со сдвигом в 1px по диагонали (обратите внимание на то, как задается цвет тени относительно цвета текста!): text- shadow: - 1px - 1px 0 hsl(8.

Тут сразу можно добавить еще несколько штрихов: небольшой белый штрих вокруг текста и затемнение внизу тени (это смягчает переходы): text- shadow: 0 0 2px #fff. Теперь, чтобы сделать подложку, необходимо расширить тень (4- й параметр — spray- distance): text- shadow: .. Начнем мы опять- таки с обычной текстовой надписи: color: hsl(3. Первым делом сделаем из тексты выпуклость. Так как в данном случаетень будет направлена строго вниз и небольшая, я несколько экономлю на количестве правил, пропуская промежуточные сдвиги (1px) — в случае наклонной тени из- за этого получится лесенка. Также для смягчения перехода к подложке в последнее правило добавлено размытие: text- shadow: 0 2px 0 0px hsl(3. Далее добавляем расширенную подложку со смещенным оттенком и рисуем для нее абсолютно аналогичную тень (заметьте, что помимо сдвига по вертикали, меняются только два параметра — оттенок и размер тени): text- shadow: 0 2px 0 0px hsl(3.

Осталось повторить этот же прием еще несколько раз, увеличивая размер подложки и смещая ее оттенок в нужную сторону: text- shadow: .. Как и в предыдущих случаях, давайте начнем просто с задания цвета надписи: color: hsl(2. Первая вещь, с которой я начал, это классическая 3. D- надпись: text- shadow: - 1px 1px 0 0 hsl(2. Далее я решил постепенно затемнить тень, убирая яркость, и раздвинуть ее, увеличив сдвиг по диагонали (при этом как раз получается лесенка, о которой я писал выше): text- shadow: - 0px 0px 0 0 hsl(2. Следующий шаг — добавить к смещению тени уменьшение ее размеров. С учетом перекрытий теней и размера шрифта, — а в уменьшенной тени, в конечном счете, могут остаться лишь намеки на фрагменты символов, — получается слегка рваный эффект.

Также обратите внимание, что шаги сдвига тени и уменьшения ее размера отличаются, это дает эффект небольшого закручивания: text- shadow: - 0px 0px 0 0 hsl(2. Осталось все немного сгладить (кстати, варьируя размытие или цвет, можно вставлять промежуточные полоски): text- shadow: - 0px 0px 1px 0 hsl(2. Слегка еще поигравшись над небольшими нюансами, я получил следующий результат.. Финальный результатcolor: hsl(2.

Cream Cake. В четвертом примере мы попробуем добиться эффекта кремо- глазурной надписи на торте или чего- то похожего на такую надпись. Начнем опять- таки с простого текста: color: hsl(3. Начнем с небольшого размытия надписи. Для этого я добавил две тени: первая (верхняя) сделана тем же оттенком, что и надпись, но менее насыщенным цветом, вторая (нижняя) — сильно размыта, смещена немного в сторону красного, чуть более яркая и полупрозрачная (то есть она будет накладываться на все, что будет под ней): text- shadow: 0 0 2px 1px hsl(3. Далее мы добавляем светлую кремовую подложку (оттенок смещен к желтому, а цвет сделан с повышенной светлостью): text- shadow: ..

Обратите внимание, что за счет того, что подложка к надписи расширена больше, чем тень к ней (7px против 4px), получается что последняя тень меньше подложки: text- shadow: .. И, определенно, как и во многих других примерах, здесь были важны две составляющие: сам шрифт (в данном примере это Cabin. Sketch) и эффекты с тенью, применяемые к нему. Давайте еще раз начнем с простого текста, чтобы отследить все трансформации: color: hsl(6. Первым делом, давайте добавим небольшое размытие вокруг самой надписи (обратите внимание, что тут цвет тени заметно светлее исходной надписи, поэтому последняя с примененной тень выглядит несколько насыщеннее и светлее: text- shadow: 0 0 3px 2px hsl(6. Далее можно добавить дополнительную обводку с небольшим размытием (обратите внимание на увеличение размера тени и пониженную светлость): text- shadow: 0 0 3px 2px hsl(6.

Получилось темновато — надо вставить между двумя тенями еще одну для осветления: text- shadow: 0 0 3px 2px hsl(6. Теперь начинается самое интересное — на самом деле мне нужна не целиком вся обводка, а только ее части. Чтобы скрыть лишнее, поверх нее можно нарисовать несколько теней цвета фона (обратите внимание, что эти тени меньше по размеру, чем обводка, зато сдвинуты в ту или иную сторону сильнее): text- shadow: 0 0 3px 2px hsl(6. Договор На Покупку Пвх Окон здесь. При необходимости можно добавить еще несколько дополнительных штрихов, чтобы сгладить переход от обводки к тени. Финальный результатcolor: hsl(6. Painting. Последующие два эксперимента касаются большей работы с прозрачностью.

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

Чтобы сделать штрих внутри текста, достаточно уменьшить размет тени: text- shadow: 3px 3px 1px - 8px hsla(0, 6. Добавим еще несколько штрихов, варьируя прозрачность, сдвиг и размер: text- shadow: 3px 3px 1px - 8px hsla(0, 6. Для придания формы и усиления закраски можно добавить общую размытую (и частично прозрачную) тень: text- shadow: ..

В итоге получится следующий эффект рисованной надписи.. Финальный результатcolor: transparent. Up & Down. Заключительный эффект продолжает эксплуатировать прозрачность текста : ) Здесь мы тоже начнем с полностью прозрачного текста (я его выделил, чтобы отличить от фона): color: transparent; Первым делом мы сделаем их текста обычный 3.

D- текст (можете дополнительно поиграться с прозрачностью). Обратите внимание на небольшой скачок в светлости в середине — это помогает сделать небольшую риску в середине текста (попробуйте увеличить светлость, чтобы это стало более заметным): text- shadow: 1px - 1px hsla(0, 0%, 3. Теперь, чтобы придать большей формы, я добавлю тень сверху, в общем- то повторяющую форму исходного текста: text- shadow: 0px 0px hsla(0, 0%, 5. Наконец, аналогично нижней части, давайте добавим верхнюю 3. D- тень, но более светлую и более прозрачную (для увеличения резкости самая верхняя тень сделана чуть менее прозрачной, чем остальные): text- shadow: - 4px 4px hsla(0, 0%, 7.

Финальный результатcolor: transparent. Вы также можете поиграться с оттенками и насыщенности, например, сделав низ красным, а верх синим, или как- нибудь еще.. Internet Explorer. Чтобы попробовать все это самостоятельно, не забудьте поставить себе «Platform Preview»- версию Internet Explorer 1. Да пребудет с вами тень!