ZorNet.Ru — сайт для вебмастера » HTML и CSS » Как создать светящийся текст на CSS

Как создать светящийся текст на CSS

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

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

Также с простого знака вы можете выстраивать свой стиль, который будет смотреться оригинально, и этим вы делаете свой сайт уникально.

Следуйте инструкциям и посмотрите примеры светящихся текстов.

1. Создать HTML

Создайте тег h1 с классом свечение где пишем текст.

Код

<h1 class="svetyash-chiysya">ZorNet.Ru — сайт для вебмастера</h1>

Также можно под h2 или h3, как вам удобнее.

2. Создание CSS

Установите цвет для фона, где используем функцию линейного градиента для фона. Это создает изображение, которое состоит из постепенного перехода между двумя или более цветами вдоль прямой линии.

Код

body{
background: linear-gradient(90deg, rgba(158, 43, 181) 0%, rgba(105, 18, 115) 35%, rgba(43, 5, 58) 100%);
}

Это стандартный фон, который выстроен на несколько оттенков цвета.

Теперь нужно создать свечение:

1. Установите размер шрифта текста, цвет и укажите, где текст должен быть расположен со свойством text-align.
2. Мы устанавливаем продолжительность анимации в 1 секунду, что означает, что анимация занимает 1 секунду, чтобы завершить один цикл.

Используйте ключевое слово ease-in-out свойства animation-timer-function, которое определяет как, будет развиваться анимация в течение каждого цикла, а не всей анимации. Установите для параметра animation-iteration-count значение бесконечное, чтобы анимация воспроизводилась без остановки.

Укажите направление анимации, установив его чередующимся, чтобы анимация воспроизводилась вперед, затем переворачивалась и повторялась. Здесь нужно задействовать префиксы -webkit- и -moz- vendor со свойством animation нужно создать.

Код

.svetyash-chiysya {
font-size: 70px;
color: #f7f6f6;
text-align: center;
-webkit-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
-moz-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
animation: svetyash-chiysya 1s ease-in-out infinite alternate;
}

Ключевой кадр селектор может начинаться с процентного (%) или с помощью ключевых слов «от» ( такой же , как 0%) и «до» ( такой же , как 100%). Где 0% - это начальная точка анимации, а 100% - это конечная точка.

Определите значения свойства text-shadow, где первое значение идет под горизонтальное смещение теней. Второе значение под вертикальное смещение, но, а третий отвечает за радиус размытия, который определяет, насколько велика и насколько размыта тень.

@Keyframes правило полностью поддерживается основными браузерами.

Однако используются некоторые префиксы:

-webkit- Google Chrome 4.0
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0
-webkit- Opera 15.0
-Опера 12.0

Код

@-webkit-keyframes svetyash-chiysya {
from {
text-shadow: 0 0 10px #f5f0f0, 0 0 20px #101010, 0 0 30px #101010, 0 0 40px #101010, 0 0 50px #9052ad, 0 0 60px #9052ad, 0 0 70px #9052ad;
}
to {
text-shadow: 0 0 20px #f5f0f0, 0 0 30px #f54da1, 0 0 40px #f54da1, 0 0 50px #f54da1, 0 0 60px #f54da1, 0 0 70px #f54da1, 0 0 80px #f54da1;
}
}

Если с теорией все понятно, то нужно переходит к практике, где вашему вниманию предоставлено два совершенно разных по своему дизайну и стилистике варианта, разве их можно аналогично сравнить, то это идет небольшое мигание, что редактируется в прикрепленных стилях.

Вот окончательный код:

Тень и эффект свечения через CSS для текста

Пример №1

HTML

Код

<h1 class="svetyash-chiysya">ZorNet.Ru — сайт для вебмастера</h1>

CSS

Код

body {
  background: linear-gradient(90deg, rgba(158, 43, 181) 0%, rgba(105, 18, 115) 35%, rgba(43, 5, 58) 100%);
  }
  .svetyash-chiysya {
  font-size: 70px;
  color: #f7f6f6;
  text-align: center;
  -webkit-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
  -moz-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
  animation: svetyash-chiysya 1s ease-in-out infinite alternate;
  }
  @-webkit-keyframes svetyash-chiysya {
  from {
  text-shadow: 0 0 10px #f5f0f0, 0 0 20px #101010, 0 0 30px #101010, 0 0 40px #101010, 0 0 50px #9052ad, 0 0 60px #9052ad, 0 0 70px #9052ad;
  }
  to {
  text-shadow: 0 0 20px #f5f0f0, 0 0 30px #f54da1, 0 0 40px #f54da1, 0 0 50px #f54da1, 0 0 60px #f54da1, 0 0 70px #f54da1, 0 0 80px #f54da1;
  }
  }

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

Демонстрация

Давайте посмотрим на другой пример:

Пример №2

Создание светящихся ссылок с использованием CSS

HTML

Код

<div class="vmestilishche">
<div class="svetyash-chiysya">ZorNet.Ru — сайт для вебмастера</div>
</div>

CSS

Код

.vmestilishche {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  }
  .svetyash-chiysya {
  color: #FB4264;
  font-size: 32px;
  line-height: 32px;
  text-shadow: 0 0 3vw #F40A35;
}
  .svetyash-chiysya {
  animation: svetyash-chiysya 1.2s ease infinite;
  -moz-animation: svetyash-chiysya 1.2s ease infinite;
  -webkit-animation: svetyash-chiysya 1.2s ease infinite;
  }
  @keyframes svetyash-chiysya {
  0%,
  100% {
  text-shadow: 0 0 1vw #f7130d, 0 0 3vw #f7130d, 0 0 10vw #f7130d, 0 0 10vw #f7130d, 0 0 .4vw #f7c81b, .5vw .5vw .1vw #8c7216;
  color: #f7c81b;
  }
  50% {
  text-shadow: 0 0 .5vw #821411, 0 0 1.5vw #821411, 0 0 5vw #821411, 0 0 5vw #821411, 0 0 .2vw #821411, .5vw .5vw .1vw #463809;
  color: #8c7216;
  }
  }

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

Демонстрация

02 Декабря 2019 Загрузок: 1 Просмотров: 6936 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0