В одном новом проекте нужно сделать интересный эффект для текста. Такой, как часто делают на рекламных плакатах (выпуклый текст, обводка и поворот)
Дизайнер-то сделал (чё ему делать-то) :)
С вёрсткой проблема была в том, как сделать так, чтобы текст был текстом, а не картинкой, со всей своей выпуклостью и обводкой.
[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);
Угол, естественно, можно поставить свой.
Кстати, о тексте в примере :) Ну пусть бросит камень в свой монитор тот, кто скажет, что не любит эротику!
эротика — это источник вдохновения, радости и жизненной энергии.