Текст с наложением тени с помощью CSS
Текст с наложением тени с помощью CSS
Симпатичный эффект на чистом CSS для создания красивых заголовков. Буквы с тенью накладываются друг на друга с небольшим смещением. В зависимости от шрифта смещение letter-spacing придется подрегулировать.
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .header div {
- display: inline-block;
- font-family: Georgia;
- font-size: 72px;
- font-weight: bold;
- color: #FFFFFF;
- letter-spacing: -12px;
- text-shadow: -3px 0px 5px #000000;
- }
- </style>
Code (HTML) : Убрать нумерацию
- <div class="header">
- <div>C</div>
- <div>S</div>
- <div>S</div>
- <div> </div>
- <div>i</div>
- <div>s</div>
- <div> </div>
- <div>A</div>
- <div>w</div>
- <div>e</div>
- <div>s</div>
- <div>o</div>
- <div>m</div>
- <div>e</div>
- </div>
Просмотров: 1520 | Комментариев: 2
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
Сергей
(13.06.2019 в 04:35):
Здравствуйте, спасибо!
Может есть возможность с помощью скрипта или регулярных выражений нужную фразу разделять по буквам и заворачивать в div ? А то как-то долго выйдет редактировать...
Может есть возможность с помощью скрипта или регулярных выражений нужную фразу разделять по буквам и заворачивать в div ? А то как-то долго выйдет редактировать...
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,323 раза
Поблагодарили 34,323 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |
$a='Привет мир!';
// буковки-циферки
$a=preg_replace('/[^\s]/isu','<div>\0</div>',$a);
// пробелы
$a=preg_replace('/\s/isu','<div> </div>',$a);
echo $a;