Як додати тінь тексту за допомогою - CSS

додати

Я тільки недавно дізнався, що в CSS, починаючи з 2 версії, можна додати будь-якому тексту тінь. Така тінь, у деяких випадках, виглядає просто розкішно.

Я завжди чомусь думав, що реалізація тіні в web'і робиться лише за допомогою зображень. А тут виявляється спеціальний css-параметр -text-shadow, який можна досить гнучко налаштувати.

Цією своєю знахідкою і хотів би поділитись.

Хотілося б відразу попередити, що браузер від Microsoft, Inernet Explorer у жодній версії не розуміє цей параметр, тому в цьому брузері у Вас буде просто звичайний текст без тіні. Думаю, не дуже велика проблема. Інші браузери розуміють цей параметр і з ними проблем взагалі не повинно бути.

Ось приклади роботи цього параметра:

Приклад №разів: text-shadow: black 1px 1px 2px, white 0 0 0.7em;

Приклад № два: text-shadow: black 1px 1px 2px, red 0 0 0.7em;

Приклад №три: text-shadow: red 1px 1px 2px; red 0 0 7px;

Якщо розібрати цю команду частинами (наприклад, останню), то опустивши назву параметра, виявляється вона складається з 2 частин:

  • red 1px 1px 2px,
  • red 0 0 7px,

де перша частина – це перший, так званий ареал, тіні, а друга це другий, ширший. Начебто все закономірно. Синтаксис команди дозволяє обійтися лише одним шаром тіні. Тому таке написання буде вірним:

У будь-якому випадку властивість CSS: text-shadow може надати деякий обсяг (як лак волоссю) вашому web-сайту і зробити його дизайн більш сучасним.