В третата част от сериите за 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.
Поредната хубава статия, браво!
P.S. “..CSS досега представяше доста възможнити..” ; “..за използване на много различни фонове на страницата..”; ..”вече имат доста богат набор от фонове..”
Не че нещо, само казвам : )
мерси ;) само за втората и третата корекция не мога да видя грешката нещо…
Ами нали имаше там някаква разлика между фон и фонт.. : )