Каскадні таблиці стилів
CSS поради & прийоми

(Ця сторінка використовує каскадні таблиці стилів CSS)

Цей документ є перекладом статті з сайту W3C.
Оригінальна версія документу знаходиться тільки на сайті W3C http://www.w3.org/Style/Examples/007/text-shadow.html
Цей переклад НЕ є офіційним документом W3C.
Всі Авторські Права Належать W3C.
Цей документ може містить помилки перекладу та похибки.
Автор: Скрипець Євген, засновник SSL (всі переклади автора: en, ru, uk )
Локальна копія: http://www.indeep76.com/Style/Example007ukr/text-shadow.html

Тіні тексту

Не чіткі тіні тексту

Читаємий білий текст

Багатошарові тіні

Контури

Неонове сяйво

Тіні тексту

Рівень 3 CSS   має властивість '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 Valid CSS!Valid HTML 4.0!

Bert Bos
Документ створено Feb 2003;
Остання зміна документу $Date: 2007/07/20 16:16:25 $ GMT