Български превод на "Text shadows"

Настоящият документ е превод на статията "Text shadows".

Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/Style/Examples/007/text-shadow.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.

Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 25.08.2008. Последна актуализация на 17.12.2008.

Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.

Документът е преведен със съдействието на Today's Moon и Фази на луната.

Web Style Sheets
CSS съвети и трикове

(Тази страница използва CSS style sheets)

Текст със сянка

Размити сенки

Четлив бял текст

Повече сенки

Контур

Неоново сияние

Текст със сянка

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

h3 {text-shadow: 0.1em 0.1em #333}

Това задава тъмносива (#333) сянка малко в дясно (0.1em) и надолу (0.1em) релативно на нормалния текст. Резултатът изглежда така:

The noak and the barcicle

(През август 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}

“What do you say?” said the UK

In order to see more clearly

Четлив бял текст

Сенките могат да направят текста по-четлив ако контрастът между цвета и фона му е малък. Ето пример за бял текст върху светлосин фон, първо без, а после и със сянка:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Без сянка:

What is in it for me?

Със сянка:

With a shovel and some oranges

Повече сенки

Може да има повече от една сянка върху текст. Като цяло това изглежда доста странно:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

I wish wish wish…

Но с две добре-позиционирани тъмна и светла сенки, ефектът може да бъде полезен:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

I, Augustus (you know who)

That's extra, of course

Това е малко опасно, както ще забележите, ако браузърът Ви не поддържа 'text-shadow'. На практика, цветовете на фона и на текста в този пример са почти еднакви (#CCCCCC и #D1D1D1), затова без сенките, едва се забелязва контраст.

Изобразяване на булвите като контури

Примерът с двойната сянка по-горе може да се развие още. С четири сенки на буквите може да се зададе контур:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Are you feeling red?

A cat, an apple, etcetera

Не е перфектният контур и на този етап (август 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}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

CSS Валиден CSS!Валиден HTML 4.0!

Bert Bos
създадено 4 Aug 2005;
последна промяна $Date: 2008/07/07 15:03:48 $ GMT