В этой статье я расскажу как оригинальным способом сделать окантовку текста на вашем сайте при помощи CSS.

Предыстория

Началось всё с того, что передо мной встала задача отрисовать текст с окантовкой. Думал, что это достаточно просто и в сети куча примеров. Но всё оказалось несколько сложнее и ни одного примера я не нашел. Пришлось выкручиваться — кое что получилось, решил написать статью.

Создание стиля

По умолчанию язык html не умеет рисовать окантовку текста. Зато есть возможность задавать тень, за которую отвечает параметр text-shadow, подробнее о нем здесь.
Система достаточно простая: CSS генерирует 4 тени с радиусом размытия в 1 пиксель. Первая тень — тень, грани которой выделяются влево и вверх, у второй тени грани уходят вправо и вниз, у третьей влево вниз, а у четвертой вправо вверх. Таким образом, эти 4 тени и создают эффект окантовки текста. Одно замечание: в IE параметр text-shadow не работает, поэтому там окантовки видно не будет.
Код тега:

inborder {
	text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black; }

Можно слегка усовершенствовать тег и дополнить стиль следующим кодом:

inborder.white { /* Белая окантовка */
	text-shadow: -1px -1px 1px white, 1px -1px 1px white, -1px 1px 1px white, 1px 1px 1px white; }
inborder.red { /* Красная окантовка */
	text-shadow: -1px -1px 1px red, 1px -1px 1px red, -1px 1px 1px red, 1px 1px 1px red; }
inborder.green { /* Зеленая окантовка */
	text-shadow: -1px -1px 1px green, 1px -1px 1px green, -1px 1px 1px green, 1px 1px 1px green; }

Теперь появилась возможность выбирать цвет окантовки. Вы можете добавить свои цвета по аналогии.
Теги можно использовать так:

<inborder class="red">Текст с красной окантовкой</inborder>
<inborder class="green" style="font-size: 200%">Текст с зеленой окантовкой</inborder>

Результат:
Текст с красной окантовкой
Текст с зеленой окантовкой

PHP функция

Чтобы не использовать заморочек с class’ами в css, можно воспользоваться гибкой php функцией для отрисовки текста с окантовкой.
Данная функция позволит отрисовывать любой текст с окантовкой любого цвета, который при этом, не придется заранее добавлять в таблицу стилей. Также можно задавать размер шрифта.

function EchoInBorder($text,$border_color='black',$fontsize='100%') {
	echo "<div style=\"text-shadow: -1px -1px 1px $border_color, 1px -1px 1px $border_color, -1px 1px 1px $border_color, 1px 1px 1px $border_color; font-size: $fontsize\">$text</div>"; }

Может использоваться в html коде следующим образом:

<?php EchoInBorder('Текст с синей окантовкой','blue','2em'); ?>
<?php EchoInBorder('<strong>Жирный текст с голубой окантовкой</strong>','orange','2em'); ?>

Результат:

Текст с синей окантовкой
Жирный текст с оранжевой окантовкой

Пример использования тега inborder: inborder.html
Пример использования php функции EchoInBorder: echoinborder.php

  1. Алксандр says:

    Уважуха братуха! Статья в правильная