Въведение в CSS3 Част 3 – Текстови ефекти


В третата част от сериите за CSS3 ще говорим за новите текстови ефекти. Типографията е без съмнение един от най – важните аспекти при изграждането на качествен layout.
CSS досега даваше доста възможности за представяне и оформление на текста, но някои неща, които дизайнерите правеха бяха пречка за реализация от сайтаджиите. CSS3 премахва почти всички ограничение що се отнася до текстовата презентация.
Забележка: Отново имайте предвид, че е възможно част от примерите да не се визуализират на вашия browser.

Сенки

Сенките бяха включени в CSS2, махнати при CSS2.1 и сега се завръщат при CSS3.
Правилната употреба на сенките може да бъде доста ефектна, без да да добавя префърцуненост на страницата, а точно обратното – може да спомогне за четимостта на текста. След като си поиграете малко ще установите, че сенките ще започнат да намират доста голямо приложение в проектите ви, особено при заглавията.

 .text_shadow {
   color: #897048;
   background-color: #fff;
   text-shadow: 2px 2px 2px #000;
   font-size: 15px;
 }
Това е примерен текст със сянка. Не правете такива гадни комбинации като тази.

В този пример първата стойност е за хоризонталното отместване на сянката от текста, второто е за вертикалното отместване, третото е за размацаността (blur) на сянката и последното е за цвета и.

Word Wrapping

Не бъркайте word wrapping-а със word break, което е таг в html5. Въпреки, че целта и на двете е ограничаване на дълги думи в пространството. Ако дадена дума е прекалено дълга и не се събира на реда, тя ще се опита да го увеличи и евентуално ще се скрие. С wbr тага можете да посочите къде тази дума може да бъде разделена (пренесена). Word wrapping-а не пренася думата. Това CSS3 пропърти кара думата да се счупи при стигане на максималната широчина на елемента в който е поставена и да продължи на нов ред (думата не се пренася сричково). Кодът с който може да се постигне това е изключително сложен и труден за запомняне:

 .text_wrap {
   width: 200px;
   border: 1px solid red;
   word-wrap: break-word;
 }
 
товаемногодълъгтекстбезинтервалиноможетедасигопредставитекатомногодългадумавъпрекичеедвалииматолковадългадуманогоправязадаразберетеефекта

Web Fonts

Въпреки, че това не са точно текстови ефекти, ще ги спомена съвсем накратко. Web Font е чисто и просто казано възможността, за използване на много различни шрифтове на страницата ви, които се свалят автоматично от browser-a. Това доста променя web дизайна, който до сега беше ограничен в използването на 10-15 основни шрифта, които се поддържат навсякъде. Та до тук всичко звучи супер, само че на дневен ред се появавят проблемите с лиценза за различните шрифтове.

 @font-face {
   font-family: 'Name of the new font';
   src: url('http://www.designshack.net/fonts/font.ttf');
 }
 

Естествено, google вече имат доста богат набор от шрифтове, които можете да използвате чрез техните услуги – http://www.google.com/webfonts .

Заключение

Ако ви е станало интересно можете да хвърлите едно око на текстовия модул http://www.w3.org/TR/2003/CR-css3-text-20030514/ (обърнете внимание на датата) . Колкото и готино да изглежда всичко не забравяйте, че трябва да използвате текстовите ефекти с мисъл, а не просто защото изглежда готино. Смятам, че след цветовата схема, типографията е най – важното нещо за един сайт.
Следващият пост ще бъде свързан със User Interface възможностите които ни предлага CSS3.


3 Responses to “Въведение в CSS3 Част 3 – Текстови ефекти”

  1. Анджелика Тодорова says:

    Поредната хубава статия, браво!

    P.S. “..CSS досега представяше доста възможнити..” ; “..за използване на много различни фонове на страницата..”; ..”вече имат доста богат набор от фонове..”
    Не че нещо, само казвам : )

    • Pavel Kolev says:

      мерси ;) само за втората и третата корекция не мога да видя грешката нещо…

      • Анджелика Тодорова says:

        Ами нали имаше там някаква разлика между фон и фонт.. : )

Leave a Reply

Your email address will not be published. Required fields are marked *