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

Оформление подчеркивание ссылок на CSS3

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

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

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

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

1. Вариант:

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

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

HTML

Код

<div class="ablurring-sharpeninug">
<p><a href="http://zornet.ru/">ZorNet.Ru: Портал Вебмастера</a></p>
</div>

CSS

Код

.ablurring-sharpeninug a {
  color: #2375c7;
  text-decoration: none;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  position: relative;
  display: inline-block;
}

.ablurring-sharpeninug a:hover {
  color: #2567a0;
  text-decoration:none;
}
.ablurring-sharpeninug a::before {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height:2px;
  background: #2181e0;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  -moz-transition: opacity 0.4s, -moz-transform 0.4s;
  transition: opacity 0.4s, transform 0.4s;
  -webkit-transform: translateY(5px);
  -moz-transform: translateY(5px);
  transform: translateY(5px);
  pointer-events: none;
}
.ablurring-sharpeninug a:hover::before,
.ablurring-sharpeninug a:focus::before {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}

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

2. Вариант:

Стилизация подчеркиваний

HTML

Код

<div class="kimagefiaze-mobeapied">
<p><a href="http://zornet.ru/news">Скрипты и шаблоны для сайта</a></p>
</div>

CSS

Код

.kimagefiaze-mobeapied a {
  color: #4783bf;
  text-decoration: none;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  position: relative;
  display: inline-block;
}

.kimagefiaze-mobeapied a:hover {
  color: #337AB7;
  text-decoration:none;
}

.kimagefiaze-mobeapied a::before, .kimagefiaze-mobeapied a::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1.3px;
  background: #6395c7;
  content: '';
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
}

.kimagefiaze-mobeapied a::after {
  opacity: 0;
  -webkit-transition: top 0.5s, opacity 0.5s, -webkit-transform 0.5s;
  -moz-transition: top 0.5s, opacity 0.5s, -moz-transform 0.5s;
  transition: top 0.5s, opacity 0.5s, transform 0.5s;
}
.kimagefiaze-mobeapied a:hover::before,
.kimagefiaze-mobeapied a:hover::after,
.kimagefiaze-mobeapied a:focus::before,
.kimagefiaze-mobeapied a:focus::after {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}
.kimagefiaze-mobeapied a:hover::after,
.kimagefiaze-mobeapied a:focus::after {
  top: 0%;
  opacity: 1;
}

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

3. Вариант:

Как сделать подчеркивание текста и ссылок в CSS

HTML

Код

<div class="uzaproperty-ceptsabukiut">
<p><a href="http://zornet.ru/forum">Сюда наводим клик для эффекта</a></p>
</div>

CSS

Код

.uzaproperty-ceptsabukiut a {
  color: #1a7de0;
  text-decoration: none;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  position: relative;
  display: inline-block;
}
.uzaproperty-ceptsabukiut a:hover {
  color: #337AB7;
  text-decoration:none;
}
.uzaproperty-ceptsabukiut a::before {
  position: absolute;
  top: 100%;
  left: 50%;
  color: transparent;
  content: '•';
  text-shadow: 0 0 transparent;
  font-size: 13px;
  -webkit-transition: text-shadow 0.2s, color 0.2s;
  -moz-transition: text-shadow 0.2s, color 0.2s;
  transition: text-shadow 0.2s, color 0.2s;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
  line-height: .1em;
}
.uzaproperty-ceptsabukiut a:hover::before,
.uzaproperty-ceptsabukiut a:focus::before {
  color: #2d86e0;
  text-shadow: 11px 0 #2581dc, -11px 0 #2581dc;
}

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

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

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

27 Июня 2018 Просмотров: 1245 Комментариев: (0)

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

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

Kosten

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