Bert Bosсъздадено 4 Aug 2005;
последна промяна $Date: 2008/07/07 15:03:48 $ GMT
Настоящият документ е превод на статията "Text shadows".
Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/Style/Examples/007/text-shadow.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.
Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 25.08.2008. Последна актуализация на 17.12.2008.
Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.
Документът е преведен със съдействието на Today's Moon и Фази на луната.
(Тази страница използва CSS style sheets)
CSS level 3 притежава свойство 'text-shadow' за добавяне на към всяка от буквите на определен текст. В най-простата си форма, изглежда така:
h3 {text-shadow: 0.1em 0.1em #333}
Това задава тъмносива (#333) сянка малко в дясно (0.1em) и надолу (0.1em) релативно на нормалния текст. Резултатът изглежда така:
(През август 2005, не всички браузъри поддържат напълно 'text-shadow'. Горният пример би трябвало да работи, най-малкото, в Safari и Konqueror.)
Най-леката форма на свойството 'text-shadow' съдържа две части: цвят (както #333 по-горе) и изместване (0.1em 0.1em в примера горе). Резултатът е ясна сянка с указаното изместване. Но изместването може да бъде зададено като размиване, изобразяващо повече или по-малко замъглена сянка.
Стойността на размиване се задава като още едно изместване. Тук виждате два реда, първият с малко размиване (0.05em), а вторият с повече (0.2em):
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
Сенките могат да направят текста по-четлив ако контрастът между цвета и фона му е малък. Ето пример за бял текст върху светлосин фон, първо без, а после и със сянка:
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
Без сянка:
Със сянка:
Може да има повече от една сянка върху текст. Като цяло това изглежда доста странно:
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}
Но с две добре-позиционирани тъмна и светла сенки, ефектът може да бъде полезен:
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}
Това е малко опасно, както ще забележите, ако браузърът Ви не поддържа 'text-shadow'. На практика, цветовете на фона и на текста в този пример са почти еднакви (#CCCCCC и #D1D1D1), затова без сенките, едва се забелязва контраст.
Примерът с двойната сянка по-горе може да се развие още. С четири сенки на буквите може да се зададе контур:
h3 {text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}
Не е перфектният контур и на този етап (август 2005), дебатът дали CSS трябва да притежава отделно свойство (или може би стойност на 'text-decoration') за по-добри контури продължава.
Ако зададете размита сянка точно зад текста, напр., с нулево изместване, се създава ефект на сияние около булвите. Ако сиянието от единична сянка не е достатъчно интензивно, просто повторете сянката няколко пъти:
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F}