Як зробити обведення тексту в CSS

17

Від автора: CSS3 розвивається таким чином, що ми можемо перевести в код CSS майже все, що створюється в Photoshop е. Тим не менш, до цих пір нам не вдавалася обведення тексту (text-stroke). Можна було додавати до тексту тіні, але до цього моменту не існувало життєздатного рішення проблеми обведення. Зараз webkit з’явився відповідь на це питання, представляє виділення тексту за допомогою одного лише CSS.

Браузерна підтримка

Це властивість поки експериментальне і не є безпечним для всіх браузерів, але можна встановити певні властивості за замовчуванням, які стануть спрацьовувати лише при застосуванні користувачем не підтримуючого це властивість браузера (маються на увазі Firefox і IE). Важливо розуміти, що text-stroke – це не прогресивне поліпшення, вам потрібно резервний варіант для неподдерживающих браузерів, і нижче я розкрию вам існуюче, на щастя, рішення цієї проблеми. Крім того, в даний час text-stroke не фігурує в специфікації W3C, воно було нашвидкуруч включено під назвою text-outline, але незабаром видалено і досі заново не додано.

Властивість

Це насправді дуже просте в застосуванні властивість, трохи схоже на властивість border, так і пишеться майже так само. Для призначення обведення тексту потрібні лише text-stroke-color і text-stroke-width з потрібними вам значеннями: наприклад, якщо для всіх тегів-посилань потрібно чорна обведення шириною в 2 пікселя, то ви напишете:

a {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}

Протестувавши цей код, ви побачите, що на вашому вебсайті він працює належним чином, але, як і властивість border, має скорочений метод написання, яким можна користуватися для полегшення роботи:

a {
-webkit-text-stroke: 2px black;
}

Проблема в тому, що якщо вам потрібно прозорий текст і відображення однієї лише його обведення, то це буде складно зробити в неподдерживающих браузерах, тому що в такому разі ваш текст взагалі не буде видно. З цієї причини у нас є інша властивість: text-fill-color і його можна застосовувати для визначення кольору тексту за замовчуванням для неподдерживающих браузерів за допомогою звичайного властивості color, а потім для браузерів підтримують вам доведеться лише додати властивість text-fill-color і помістити в нього прозорий колір для того, щоб у всіх користувачів сайту залишилося хороше враження, а текст не зникав у не-webkit браузерах – тобто приблизно так:

h1{
color: black;
-webkit-text-stroke: black 1px;
-webkit-text-fill-color: white;
}

В даному прикладі, якщо ви скористаєтеся webkit, то побачите білий текст, обведена чорною кордоном товщиною в 1 піксель, але якщо ваш браузер не webkit, то завдяки застосуванню text-fill-color побачите лише чорний текст без обведення, а якщо б не був застосований text-fill color, щоб добитися того ж ефекту вам довелося б встановити колір тексту на білий і обведення на чорний, чому в браузерах не-webkit текст зовсім зник.

Застосовуючи це нове властивість, ви з легкістю сымитируете те, що зазвичай створюється в photoshop’е, а так як в якості кольору можна застосовувати будь-які значення, це означає, що реально використовувати навіть напівпрозорі обведення тексту, як тут:

h1{
color: black;
-webkit-text-stroke: 1px rgba(0,0,0,0.5);
-webkit-text-fill-color: white;
}

Написавши щось на зразок цього, ви отримаєте білий текст з напівпрозорої чорної кордоном навколо нього. Це також можна зробити за допомогою колір-заповнювач для тексту, так що якщо захочете створити напівпрозору обведення з ще більш прозорим фоном, то напишіть:

h1{
color: black;
-webkit-text-stroke: 1px rgba(0,0,0,0.5);
-webkit-text-fill-color: rgba(0,0,0,0.1);
}

Висновок

Хоча обведення тексту – експериментальне властивість, і його неможливо застосовувати у всіх вебсайтах, воно все одно здатне додати в CSS3 трохи магії photoshop’у і дати вам можливість створювати красиві ефекти на зразок напівпрозорих меж або тонкої обведення тексту в 1 піксель шириною. Властивість, може, і експериментальне, але цією технікою можна користуватися, якщо подбати про стандартний колір тексту для неподдерживающих браузерів і переписати його з допомогою text-fill-color для підтримуючих.