Блогът на Гонзо

Падащи букви със CSS

Падащи букви се наричат изобразяването на параграф, при който първата заглавнита буква е по-голяма от останалите и заема първите няколко реда. В CSS първата буква на даден елемен може да се форматира отделно чрез псевдоелемента :first-letter. За да пулучим ефекта на падаща буква, освен големината и шрифта, трябва да я направим и плаваща в ляво:

p:first-letter{
                float:left;
                font-size: 3.0em;
                font-family: "URW Chancery L";
}

За да се получи завършен ефект, трябва още малко да си поиграем с шрифта и отстоянията около падащата буква. За съжаление не можем да контролираме височината на реда на псевдоелемента, той винаги наследява от истинския елемент. Освен това има някои особености в Интернет Експлорър, повече за тях можете да прочетете тук.

Пример

ПРОМЯНА: Първоначално бях качил файл със грешки, сега съм сложил поправен.

Етикети: ,

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *