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

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

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

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

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

Пример

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

Етикети: ,

Comments (0)

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

XHTML: Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>