Blog. Just Blog

Текст с наложением тени с помощью CSS

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Текст с наложением тени с помощью CSS
Текст с наложением тени с помощью CSS

Симпатичный эффект на чистом CSS для создания красивых заголовков. Буквы с тенью накладываются друг на друга с небольшим смещением. В зависимости от шрифта смещение letter-spacing придется подрегулировать.
  1. <style type="text/css">
  2. .header div {
  3.     displayinline-block;
  4.     font-familyGeorgia;
  5.     font-size72px;
  6.     font-weightbold;
  7.     color#FFFFFF;
  8.     letter-spacing: -12px;
  9.     text-shadow: -3px 0px 5px #000000;
  10. }
  11. </style>
Верстка получается немного громоздкой, так как каждую букву текста приходится оборачивать в отдельный тег.
  1. <div class="header">
  2.     <div>C</div>
  3.     <div>S</div>
  4.     <div>S</div>
  5.     <div>&nbsp;&nbsp;&nbsp;</div>
  6.     <div>i</div>
  7.     <div>s</div>
  8.     <div>&nbsp;&nbsp;&nbsp;</div>
  9.     <div>A</div>
  10.     <div>w</div>
  11.     <div>e</div>
  12.     <div>s</div>
  13.     <div>o</div>
  14.     <div>m</div>
  15.     <div>e</div>
  16. </div>
Готовый пример вы можете посмотреть на демонстрационной странице.

Поделиться ссылкой ВКонтакте
Просмотров: 1590 | Комментариев: 2

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
ManHunter (13.06.2019 в 11:53):
// PHP

$a='Привет мир!';
// буковки-циферки
$a=preg_replace('/[^\s]/isu','<div>\0</div>',$a);
// пробелы
$a=preg_replace('/\s/isu','<div>&nbsp;</div>',$a);
echo $a;
Сергей (13.06.2019 в 04:35):
Здравствуйте, спасибо!
Может есть возможность с помощью скрипта или  регулярных выражений нужную фразу разделять по буквам и заворачивать в div ? А то как-то долго выйдет редактировать...

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 3 (0.0048 сек.) / Память: 4.5 Mb
Наверх