Доброго вам дня. 🙂
Раніше можна було зробити буквицу тільки з вставкою зображення, на якому була намальована буква, в потрібному вигляді. Тепер все це можливо, просто використовуючи CSS. Допоможе нам псевдоелемент first-letter. який визначає першу букву. Виглядає це приблизно так:
Давайте візьмемо наприклад блок з класом content. Усередині нього буде текст який розбитий на абзаци тегами
. Зазначимо стилі першою літерою в абзаці і як писав раніше, дамо псевдоелемент first-letter. Готовий код вийде приблизно таким:
Кожна перша буква в абзаці буде у вигляді літери. Стилі для літери, можете звичайно ж прописати свої, в залежності від стилю сайту і Вашого бажання.
Щоб встановити буквицу тільки на початку статті, тобто всього одну букву і все, то потрібно укласти в блок тільки один абзац.
Є ще один фокус, щоб була тільки одна буквиця на сторінці. Але він чомусь не завжди працює і не скрізь. Наприклад, у мене він працює тільки в WordPress. Щоб кожен раз не укладати в теги тему запису, я використовую майже той же метод, але привласнюю відразу два псевдоелемента -: first-letter і: first-child. У самій темі, в файлі single.php. потрібно знайти рядок з викликом функції:
І як в першому прикладі укласти її в блок присвоївши клас. У WordPress, абзаци за замовчуванням укладені в тег
. так що стилі вийдуть ось такими:
Як бачите, немає нічого складного в тому, щоб створити буквицю всередині Ваших записів на сайті.
На цьому все, спасибі за увагу. 🙂
Якщо Вам був корисним моя праця, можете підтримати сайт :)
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце