Статьи

Как создать светящиеся ссылки в CSS3

Июль 9, 2018

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

Text-shadow — это универсальное свойство CSS3, которое поддерживается во всех браузерах без префиксов поставщиков. Кроме одного. Извините пользователей IE9 — вам нужно подождать еще несколько месяцев для IE10. Хотя это не просто полезно для теней. На темном фоне появляется белая «тень», которая заставляет текст светиться:

CSS3 светящийся текст

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


<a href="#" class="glow">Glowing Link</a>

Наше первое объявление CSS3 определяет начальное состояние и свойства перехода с префиксом поставщика. Переход начинается немедленно и длится полсекунды. Я обнаружил, что «линейная» синхронизация дает наиболее естественный эффект, но вы можете поэкспериментировать с другими (легкость, простота, легкость, простота, кубическая кривая): 

 
a.glow, a.glow:hover, a.glow:focus
{
	text-decoration: none;
	color: #aaf;
	text-shadow: none;
	-webkit-transition: 500ms linear 0s;
	-moz-transition: 500ms linear 0s;
	-o-transition: 500ms linear 0s;
	transition: 500ms linear 0s;
	outline: 0 none;
}

Теперь мы можем определить светящиеся свойства текста. Я обнаружил, что одна тень текста, такая как 0 0 8px #fff, была слишком тонкой. Две тени дали лучший результат — одну белую и одну ярко-желтую с незначительным смещением: 

 
a.glow:hover, a.glow:focus
{
	color: #fff;
	text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}

Посмотрите демонстрационную страницу светящихся ссылок . Исходный код содержит весь код, и я рекомендую вам поэкспериментировать с различными свойствами анимации и текстовых теней.

предупреждение: более размытое поведение в Opera

Этот анимационный эффект хорошо работает в Firefox, Chrome и Safari. IE9 не поддерживает тени текста, поэтому эффект не виден. Opera поддерживает переходы CSS3, но влияет только на определенные свойства. Цвет работает хорошо, но он не применяется к теням текста, что приводит к более резкой анимации. Это должно быть исправлено в будущей версии.

Второй набор ссылок на демонстрационной странице показывает эффект подсветки, созданный путем изменения цвета текста на цвет фона. Однако это делает текст невидимым в IE9 и ниже. Чтобы решить эту проблему, мы можем использовать Modernizr или написать собственный код для обнаружения теней , например 

 
if (document.createElement("detect").style.textShadow === "") {
	document.getElementsByTagName("html")[0].className += " textshadow";
}

Веселитесь с техникой. Пожалуйста, оставьте свои комментарии и URL, если вы создаете хороший эффект на своем сайте.

41
Share: