ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект подчеркивание текста и ссылок

Эффект подчеркивание текста и ссылок

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

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

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

Подчеркнутый текст с помощью HTML и CSS

Плавное подчёркивание ссылки при наведении

HTML

Код

<p id="dakorma-netoealing"><a href="#">ZorNet - портал </a></p>

CSS

Код

#dakorma-netoealing {
  text-align: center;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

#dakorma-netoealing a {
  font-style: italic;
  font-weight: 700;
  font-size: 51px;
  letter-spacing: 1px;
  color: #fbfbfb;
  text-decoration: none;
  display: inline-block;
}

#dakorma-netoealing a:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .6s ease, background-color .6s ease;
}

#dakorma-netoealing a:hover:after {
width: 100%;
background: #efebeb;
}

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

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

Анимированная ссылка подчеркивается с помощью CSS

Давайте рассмотрим подробнее как все работает, где для начало нужно отключить настройки text-decoration который идет по умолчанию для всех ссылок. Здесь задействуем background-image, так как это свойство может занимать несколько строк.

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

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

Как можно понять, что в этом варианте ставим стили в CSS, и там уже можно настроить под основною стилистику ресурса, где меняем палитру цвета или выводим подсеркивание ниже или выше, что также качается скорости.

Создание анимированных подчеркиваний для ссылок

HTML

Код

<a href="http://zornet.ru">ZorNet - портал для вебмастера</a>

CSS

Код

a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 3px;
  transition: background-size .3s;
  padding: 3px;
}

a:hover, a:focus {
  background-size: 100% 2px;
}

Этот вариант автоматически при установки станет распространятся по всем страницам на сайте.

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

Как можно понять из представленного материала, то создать эффект подчеркивания не так сложно, как изначально может показаться.

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

12 Февраля 2019 Просмотров: 1307 Комментариев: (0)

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

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

Kosten

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