Как сделать красивые параграфы при помощи CSS3

Существует много различных селекторов CSS3, которые является очень полезным для дизайнеров. В первую очередь, это селекторы — :first-line и :first-letter — которые обеспечивают красивый первый параграф, а также первую букву вашего текста. Эти псевдо-элементы работают аналогично своим собратьям :before и :after , за одним только исключением

first-letter — отвечает за первую букву в выбранном вам параграфе, причём чаще всего его используют для декорирования текста большой буквой, особенно если шрифт рукописный.

Использовать его нужно так

 
    p:first-letter {  
        font-size: 50px;  
    }  

Правда, есть одно исключение, если в вашем блоке с текстом появится ещё один параграф он также ознаменуется большой первой буквой.

first-line — отвечает за всю первую строку. Так что теперь вы с лёгкостью сможете сделать её жирной или курсивной.
Использовать его нужно так.

p:first-line {  
    font-weight: bold;  
}  

Но на него, как и на предыдущий псевдо-элемент накладываются такие же ограничения. Если в выбранном вами блоке встретится ещё один параграф его первая строка также будет жирной.
Для того чтобы этого избежать вам необходимо внести следующий код

    p:first-child:first-letter {  
        font-size: 50px;  
    }  
    p:first-child:first-line {  
        font-weight: bold;  
    }   

Как можно правильно использовать эти возможности CSS3?
И так, к примеру, вы хотите сделать красивое начало вашего параграфа и оно будет выглядеть у нас так, как показано на рисунке снизу.
Как сделать красивые параграфы при помощи CSS3
Для этого нам необходимо описать шрифты,найти красивую картинку первой буквы, а также задать парочку стилей для всего остального текста.
В общем, наш код будет таким:

/*Здесь мы описываем шрифт, который импортируем*/
    @font-face {  
        font-family: 'HominisNormal';  
        src: url('fonts/HOMINIS-webfont.eot');  
        src: url('fonts/HOMINIS-webfont.eot?#iefix') format('embedded-opentype'),  
             url('fonts/HOMINIS-webfont.woff') format('woff'),  
             url('fonts/HOMINIS-webfont.ttf') format('truetype'),  
             url('fonts/HOMINIS-webfont.svg#HominisNormal') format('svg');  
        font-weight: normal;  
        font-style: normal;  
    }  

/*Задание стилей по умолчанию для нашего текста*/
    p {  
        color: #555;  
        font-family: 'Georgia', Times, serif;  
        line-height: 24px;  
    }  

/*Задаём особый стиль только первому параграфу, в выбранном нами блоке*/
p:first-child {  
    padding: 30px;  
    border-left: 5px solid #7f7664;  
    background-color: #f5f4f2;   
    line-height: 32px;  
    box-shadow:  5px 5px 0px 0px rgba(127, 118, 100, 0.2);  
    position: relative;  
} 

/*Задаём стиль для первой буквы*/
    p:first-child:first-letter {  
        font-size: 72px;  
        float: left;  
        padding: 10px;  
        height: 64px;  
        font-family: 'HominisNormal';  
        background-color: #7F7664;  
        margin-right: 10px;  
        color: white;  
        border-radius: 5px;  
        line-height: 70px;  
    }  

/*Задаём стиль для первой строки*/
p:first-child:first-line {  
    font-weight: bold;  
    font-size: 24px;  
    color: #7f7664;  
}

/*Добавляем декоративных элементов для первого блока текста*/
    p:first-child:after {  
        background: url("../images/paper-clip.png") no-repeat scroll 0 0 transparent;  
        content: " ";  
        display: inline-block;  
        height: 100px;  
        position: absolute;  
        rightright: -5px;  
        top: -35px;  
        width: 100px;  
    }  

Вот и всё. Экспериментируйте и присылайте свои варианты.



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

Ваш e-mail не будет опубликован. Обязательные поля помечены *