Css тень текста генератор: CSS Box Shadow генератор — тень блока в CSS, примеры использования

Leave a Comment / Css / By /

Содержание

Обводка текста средствами CSS

Оцените материал

  • 1
  • 2
  • 3
  • 4
  • 5

(2 голосов)

Текст с обводкой на страницах сайта порой выглядит очень интересно и привлекательно. Обычно такие надписи размещаются на сайте в виде графического изображения. Но есть способ лучше, когда обводка реализуется при помощи CSS. Я сам недавно узнал о таком способе и решил написать о нем пару строк, тем более что способ простой и написать больше не получится ☺

Итак, разметка:

HTML


	<div>TEST!</div>

Имеем простой блок с текстом. Применяем к нему следующий CSS-код и получаем надпись с обводкой.

CSS


.txt{width:500px; margin:25px; background:#0505b0; padding:50px; color:#0505b0; text-align: center; font: bold 100px Verdana, sans-serif; text-shadow: 1px 1px 1px white, -1px -1px 1px white, -1px 1px 1px white, 1px -1px 1px white;}

На самом деле ничего сложного: цвет фона у блока совпадает с цветом шрифта у текста. Обводка текста появляется за сет применения к нему CSS-правила text-shadow, причем с тенями со всех сторон. Когда размер шрифта у надписи крупный, то смотрится вполне прилично. При уменьшении текста, на мой взгляд выглядит хуже, но это мое мнение. Если интересно, то можно открыть демо-страничку, изменить размер шрифта при помощи средств для веб-разработчика и сделать свои выводы.

Свойство text-shadow поддерживается всеми современными браузерами. Что же касается IE, то в нем свойство работает начиная с версии 10. В более старших версиях тень можно сделать с помощью filter.

Другие материалы в этой категории: « 5 библиотек для создания ярких CSS эффектов Замена стандартных маркеров у списка и их стилизация »

Наверх

Категории блога

  • Битрикс (40)
  • HTML-верстка (54)
  • Joomla (18)
  • JavaScript, jQuery (26)
  • PHP (10)
  • Базы данных (5)
  • Разное (23)

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

  • Шаблон документа HTML5 (zip, 35.
    41 Кб)
  • Шаблон jQuery-плагина (zip, 426 байт)
  • Шаблон сайта 1С-Битрикс (zip, 3.11 Кб)

Полезное