Обводка текста и поворот на CSS (text outline + rotate CSS)

В одном новом проекте нужно сделать интересный эффект для текста. Такой, как часто делают на рекламных плакатах (выпуклый текст, обводка и поворот)
Дизайнер-то сделал (чё ему делать-то) :)
С вёрсткой проблема была в том, как сделать так, чтобы текст был текстом, а не картинкой, со всей своей выпуклостью и обводкой.

[toc title=’Содержание’]

Пример

Вот такую картинку нужно сделать. Понятное дело, что в IE понадобиться прикручивать костыли, но будем ориентироваться на сознательных людей, которые знают, что лучше использовать современные браузеры.

text-outline нам поможет

Для начала отметим, что как таковой более-менее кроссбраузерной обводки текста нет. Есть, конечно, text-outline:

text-outline: thickness blur color;

Но он не работает ни в одном из современных браузеров (очевидно только в браузерах будующего).

Сделаем обводку

Давай подумаем, что в CSS есть такого, что работает в большинстве браузеров?
text-shadow!
Сделаем сразу несколько (конкретно 4) однопиксельных тени, по всем сторонам текста, и будет нам обводка.

   text-shadow:
      1px 1px 0 #000,
     -1px -1px 0 #000,
      1px -1px 0 #000,
       -1px 1px 0 #000;

Получится вот так вот:

К сожалению чистым CSS пока нет возможности сделать обводку больше одного пикселя или градиентную обводку. Но будем думать и придумаем как это сделать.

Осталась выпуклость текста:

Выпуклость текста

Если уж мы сделали обводку на text-shadow, то почему бы не сделать и выпуклость? Тем более, что это реально!

text-shadow: -3px 3px 0px #000;

Добавит выпуклость текста (свет падает справа-сверху), и угол естественно можно менять. Размер тени, для моего текста максимальный (3px) но возможно для другого кегля и шрифта всё будет работать по-другому.

Поворот текста

Да, тут, конечно, обойдёмся без text-shadow :)
Работать будет на WebKit’e, за то интереснее, чем обычный текст:

-webkit-transform: rotate(-15deg);

Угол, естественно, можно поставить свой.

Кстати, о тексте в примере :) Ну пусть бросит камень в свой монитор тот, кто скажет, что не любит эротику!
эротика — это источник вдохновения, радости и жизненной энергии.

Понравилась или помогла статья?
Купите мне кофе