CSS 3 text-shadow

CSS 3 text-shadow

В HTML и CSS

Уеб непрекъснато се развива – неоспорим факт. При толкова много сайтове и толкова много информация, изливаща се в световния поток от информация, състезанието за по-добра позиция в Google започна да означава  код, който да може да се чете лесно от търсачките. Затова и все повече разработчици и дизайнери прибягват до дизайн чрез кода, а не кодиране на дизайна. Какво ще рече това? Това е стилът познат като минимал – когато дизайна на сайта се свежда до раздвижени текстови обекти, цвят и няколко изображения. Примери за прекрасни минимал дизайни в нета има стотици.

Подобно „кастрене“ на дизайна и кода води до конфликт на интереси: защо да правиш изображение с фирмения слоган и да го скриеш от търсачките, само защото искаш слогана на фирмата да е със сянка, вместо да използваш обикновен текст, който да е вътре в кода?

Нека първо разгледаме един най-обикновен h1 таг:

<h1>Фирмен слоган</h1>

Така записан текста е достижим за CSS и можем за него да зададем дефиниции, които отговарят на нашия дизайн. Например, можем да го направим така:

h1 {
margin: auto auto 0 auto;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
color: #333333;
}

Но с това променяме само цвета, шрифта, размера и отстоянията на текста спрямо останалите елементи в страницата. Това все още не е достатъчно, за да замести изображението с фирмения слоган. Ако CSS предлагаше само това, то тогава решението (което все още е предпочитано от някои) изглежда така:

<!-- Слоган на фирмата -->
<img src="image-url.jpg" alt="Фирмен слоган" />

Слава Богу CSS 3 излезе с официална дефиниция на text-shadow, който позволява много по-голяма пластичност на работата с текстовете и елиминира нуждата от вмъкване на изображения там, където и един обикновен h1 може да свърши работа.

Дефиницията на text-shadow е следната:

h1 {
text-shadow: #fff 0 1px 0;
}

,където #fff е цвета на сянката; 0 1px са x и y координатите, спрямо текста-родител на сянката и последната 0 показва размера в пиксели на размиването (разфокусирането) на сянката.

Този пример ще създаде h1 текст с бяла сянка без разфокусиране (копие на текста-родител), намиращо се зад него с един пиксел по-надолу.

Чрез подобна гъвкава дефиниция, CSS 3 позволява на дизайнерите и разработчиците да изграждат дизайни, които все по-малко зависят от изображения, следователно – са по-удобни за прочит от търсачките.

В примера можете да видите най-различни приложения на text-shadow, които могат да раздвижат дизайна на уеб сайтовете, които създавате.

Разгледайте демо сянка на CSS 3 text-shadow.

За Гергин Борисов

+359 877080887

Здравейте, аз съм Гергин Борисов, на 24 години от София и се занимавам с уеб и лого дизайн, предпечат и отскоро - с блога си. Занимавам се с дизайн от 2006та година насам, като преди това (от 2004та) работех в сферата на предпечата с баща ми, фотографът Александър Борисов.