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

Оформление ссылок внутри текста через CSS

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

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

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

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

Приступаем к установке:

HTML

Код

<div class="transparencyn_sointinglink">
<p><a href="http://zornet.ru">Наведи на текс и увидете красивый эффект с переходои по клику</a></p>
</div>

CSS

Код

.transparencyn_sointinglink a {
  color: #2776c5;
  text-decoration: none;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  position: relative;
  display: inline-block;
}
.transparencyn_sointinglink a:hover {
  text-decoration:none;
  color: #cc135f;
  z-index:1;
  position:relative;
}
.transparencyn_sointinglink a::after{
  position: fixed;
  width: 100%;
  height: 100%;
  content: "";
  z-index:-1;
  top:0;
  left:0;
  pointer-events: none;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  opacity:0;
}
.transparencyn_sointinglink a:hover::after,
.transparencyn_sointinglink a:focus::after {
  background: #fbf8f9;
  opacity:0.7;
}

За прозрачность отвечает свойство opacity:0.7, где меньше делаете, то становится более оригинальнее, а больше, это означает, более прозрачнее, что видимость небольшая.

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

Второй вариант анимации:

HTML

Код

<div class="rekerence-cartosonga">
<p><a href="#">Наведи курсор и увидишь реально красивый эффект.</a></p>
</div>

CSS

Код

.rekerence-cartosonga a {
  color: #1a1a1b;
  text-decoration:none;
  position:relative;
  display:inline-block;
}
.rekerence-cartosonga a:hover {
  text-decoration:none;
}

.rekerence-cartosonga a::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(245, 240, 240, 0.56), rgba(247, 246, 246, 0.5)) no-repeat 100% 0%;
  background-size: 100% 100%;
}
.rekerence-cartosonga a:hover::before,
.rekerence-cartosonga a:focus::before {
  transition: 0.7s linear;
  background-size: 0 100%;
}
.rekerence-cartosonga a::after {
  position: absolute;
  display: block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #4d87ab;
  transition: width 0.7s ease-in-out;
}
.rekerence-cartosonga a:hover::after,
.rekerence-cartosonga a:focus::after {
  width: 0%;
  right:0;
  }

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

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

26 Августа 2018 Просмотров: 2427 Комментариев: (0)

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

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

Kosten

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