Свойство тени текста можно использовать для разных целей дизайна веб-страниц: обведения текста, создания эффекта трехмерного текста и много другого. Еще можно создать с помощью множественных теней свойства тени текста эффекты, подобные неоновому свечению. Во многих уроках по созданию неонового свечения используется жирный шрифт и рассеянное свечение непрозрачных цветов. В этом уроке мы покажем, как создать более реалистичную неоновую вывеску с помощью более тонкого закругленного шрифта под подходящим названием Neon 80’s, созданного Essqué Productions, и более точного подбора цветов свечения.

Для начала конвертируем шрифт в форматы, нужные для веб-страницы, например, при помощи веб-сервиса FontSquirrel, и встроим их в страницу:

@font-face {
        font-family: 'Neon80sRegular';
        src: url('neon-webfont.woff') format('woff'),
         url('neon-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Код HTML заключается в элементе заголовка со словом «Cafe». Текстура черного кирпича за вывеской взята с сайта Photos Public Domain и лицензирована по лицензии Creative Commons. Использованный код CSS:

h1 {
	background: #000;
	background-image:
		radial-gradient(ellipse farthest-corner, rgba(0,0,0,0), rgba(0,0,0,1)),
		url(http://thenewcode.com/assets/images/black-brick-wall-texture.jpg);
		text-align: center;
		font-family: Neon80sRegular, Arial Narrow, sans-serif;
		color: #fee;
		padding: 2rem;
		text-transform: uppercase;
		font-size: 6rem;
		letter-spacing: 2rem;
		text-shadow: 0 0 30px rgba(255,0,84,0.6),
			0 0 60px rgba(255,0,84,0.4),
			0 0 100px rgba(255,0,84,0.2),
			0 0 90px rgba(255,0,84,0.1);
}

Для фона элемента заголовка был использован эллиптический градиент и способ, подобный использованному в уроке «Создание простых масок CSS: изображения в фигурных рамках», чтобы затемнить кирпичи вокруг текста. Для некоторых браузеров, особенно старых версий, могут быть нужны приставки производителей CSS.

Многослойная тень текста создает неоновое свечение. Обратите внимание, что ни у одной из примененных теней нет никаких отступов, первые два значения у всех теней — нули, но у каждой следующей тени увеличивается третье значение — размытие. Все тени одного и того же цвета, заданного с помощью rgba, но по мере увеличения размера у них растет прозрачность, обратно пропорционально квадрату расстояния, согласно закону распространения света, и позволяя мельком увидеть кирпичи сквозь неоновое свечение.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание трехмерного вытянутого текста с использованием CSS
• Интересный эффект выделения текста с использованием псевдоэлемента CSS выделения
• Классические типографские эффекты: цитата в автоматически добавляемых кавычках