Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

CSS3 Текстови ефекти

В стандартът CSS3 са предвидени нови ефекти за текст. Ще разгледам два от тях, а именно:


  • text-shadow
  • word-wrap

Свойството text-shadow се използва за поставяне на сянка към текст. Могат да се определят хоризонтални и вертикални сенки, ефект на размиване и цвят на сянката. Кодът на тази програмка ще изглежда така:


<!DOCTYPE html>
<html>
    <head>
        <style>
            .header {
                     text-shadow: 3px 3px 2px gray;
            }
            .property {
                     text-shadow: 3px 3px 2px red;
            }
        </style>
    </head>
    <body>
        <div align="center">
            <h1> <span class="header">Ефект от свойството</span><span class="property"> text-shadow!</span></h1>
            <p style="font-size: 20px;"> <span class="header"><b>Забележка:</b> IE не поддържа свойството</span><span class="property"> text-shadow.</span></p>
        </div>
    </body>
</html>

Ефект от свойството text-shadow!


Когато дума е по-дълга от размера на полето, в което трябва да се разположи, то една част от нея излиза извън границите на полето. Свойството word-wrap с параметър break-word вкарва текста в ограничението на полето, като разделя думата в местото, в което достига до границата и я пренася на нов ред, но без да се спазват правилата за пренасяне. Свойството text-overflow с параметър ellipsis съкращава думата и добавя многоточие за да се събере в полето. Свойството text-overflow с параметър clip показва само тази част от думата, която се събира в полето:


Непротивоконституциователствувайте


Непротивоконституциователствувайте


Непротивоконституциователствувайте


Непротивоконституциователствувайте


Кодът на програмката ще изглежда така:


<!DOCTYPE html>
<html>
    <head>
        <style>
           .null, .test {
                width:150px; 
                border:1px solid #000000;
           } 
           .test {
                white-space:nowrap;
                overflow:hidden;
           }
        </style>
    </head>
    <body>
           <p class="null">Непротивоконституциователствувайте</p>
           <p class="null" style="word-wrap:break-word;">Непротивоконституциователствувайте</p>
           <p class="test" style="text-overflow:ellipsis;">Непротивоконституциователствувайте</p>
           <p class="test" style="text-overflow:clip;">Непротивоконституциователствувайте</p>
    </body>
</html>