Bert BosДокумент створено Feb 2003;
Остання зміна документу $Date: 2007/07/20 16:16:25 $ GMT
(Ця сторінка використовує каскадні таблиці стилів 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) відносно нормального тексту. Результат виглядає наступним чином:
(Ще не всі браузери січня 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}