Доверьте продвижение нам

Попробуйте надежный хостинг для вашего сайта

Мы рекомендуем своим клиентам! Получите надежность и полное управление вашим сайтом.

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Как сделать свечение вокруг текста в css

Views Icon34

Для создания эффекта свечения вокруг текста в CSS можно использовать свойство text-shadow.

Синтаксис:

text-shadow: h-shadow v-shadow blur-radius color;

где:

  • h-shadow — горизонтальное смещение тени от текста.
  • v-shadow — вертикальное смещение тени от текста.
  • blur-radius — радиус размытия тени.
  • color — цвет тени.

Пример кода:

h1 {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #7f7fff, 0 0 70px #7f7fff, 0 0 80px #7f7fff, 0 0 100px #7f7fff, 0 0 150px #7f7fff;
}

В этом примере мы добавили световой эффект вокруг заголовка h1 с помощью свойства text-shadow. У нас есть основной свет с белым цветом и 7 дополнительных световых эффектов с цветом #7f7fff.

Также можно использовать анимации и переходы для эффекта мерцания или появления эффекта. Например:

h1 {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #7f7fff, 0 0 70px #7f7fff, 0 0 80px #7f7fff, 0 0 100px #7f7fff, 0 0 150px #7f7fff;
  animation: blink .8s linear infinite;
}

@keyframes blink {
  0%, 100% {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #7f7fff, 0 0 70px #7f7fff, 0 0 80px #7f7fff, 0 0 100px #7f7fff, 0 0 150px #7f7fff;
  }
  50% {
    text-shadow: none;
  }
}

Этот код добавляет анимацию blink, которая будет сменять цвет фона на протяжении 0,8 секунды. Основные световые эффекты меняются на none во время анимации, что создает эффект мерцания.

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

Поделиться:

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.