fbpx
-3.2 C
София

4 начина за анимиране цвета на линковете с помощта на чист CSS

Оригиналът е на Katherine Kato

Най-четени

Даниел Десподов
Даниел Десподовhttps://www.kaldata.com/
Новинар. Увличам се от съвременни технологии, информационна безопасност, спорт, наука и изкуствен интелект.

Авторът на тази статия предлага с помощта само на чист CSS да бъде създаден механизъм за промяна цвета на линка, когато върху него попадне курсора на компютърната мишка. Само че това не е обикновена смяна на цвета. Новият цвят трябва плавно да променя цвета на препратката, като това трябва да става отляво надясно и старият цвят трябва да се заменя постепенно.

За да се направи това, могат да се използват един от четирите метода предложени в този материал. Да разгледаме тези методи и да обърнем повече внимание на най-различни важни и полезни неща, като например достъпност на съдържанието, производителност на решението и поддръжката от страна на различните браузъри.

Метод №1: използване на background-clip: text

Докато се пишеше този материал, свойството background-clip: text е с експериментален статут. То не се поддържа в Internet Explorer 11 и надолу. Този метод предвижда създаването на така наречения knockout text (текст, който изглежда сякаш е вмъкнат в някаква повърхност и през него се вижда фонът) с линеен градиент. HTML кодът се състои от един единствен таг <a>, който описва хиперпрепратката:

<a href="#">Link Hover</a>

Да започнем със създаването на стилове за този линк. Използването на overflow: hidden ще доведе до това, че при промяна на външния вид на препратката се отсича всичко, което е извън пределите на този елемент.

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

Ние ще трябва да използваме остър линеен градиент с 50% за началния и крайния цвят на линка.

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

Ще използваме свойството background-clipbackground-clip за да отрежем градиента. Ще му дадем значение text за извеждане на текста. Ще използваме още и свойствата background-size и background-position. Това е необходимо за показването на началния цвят.

a {
  /* Same as before */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

И накрая ще добавим към CSS стила свойството transition и ще стилизираме псевдо клас за хиперлинка :hover. А за да може при попадане курса на мишката върху линка цветът да се промени отляво надясно, ще използваме свойството background-position.

a {
  /* Same as before */
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

Ето как изглежда този пример в CodePen. Въпреки че тази методика дава възможност за постигането на желания ефект, браузърите Safari и Chrome ще изрежат елементите на оформяне на текста и сенките. Тук и използването на текстови стилове, като промяна на текста чрез CSS свойството text-decoration няма да работи. Ето защо ще трябва да се приложи друга методика.

Метод №2: използване на width/height

Този метод се базира на използването на атрибута data-*, включващ същия текст, като тага <a>. Тук се използва управление на свойството width за запълване текста на препратката с друг цвят отляво надясно и отдясно наляво или свойството height, което е подходящо за създаването на същия ефект, само че отгоре надолу или отдолу нагоре. Конкретно в нашия случай се използва въздействие върху свойството width, което при посочване с курсора на мишката се променя от 0 до 100%. Ето HTML кода:

<a href="#" data-content="Link Hover">Link Hover</a>

CSS кодът прилича на този, който използвахме в предишния пример, с изключение на настройките за свойствата на фона. Освен това, тук нормално работи и свойството text-decoration:

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: royalblue;
  font-weight: 800;
  text-decoration: underline;
  overflow: hidden;
}

Именно тук ни се налага да използваме текста от атрибута data-content. Този текст ще бъде разположен върху съдържанието на тага <a>. Тук можем да използваме една малка хитрост – можем да копираме текста от атрибута и да го изведем с помощта на функцията attr() в свойството content на псевдоелемента на линка ::before.

a::before {
  position: absolute;
  content: attr(data-content); /* Prints the value of the attribute */
  top: 0;
  left: 0;
  color: midnightblue;
  text-decoration: underline;
  overflow: hidden;
  transition: width 275ms ease;
}

За да не се прехвърли този текст към нов ред, към псевдоелемента ще бъде приложен стилът white-space: nowrap. За промяна цвета на линка ще зададем на значението на CSS свойството color псевдоелемента ::before и ще направим така, че в началото значението на свойството width да е равно на 0:

a::before {
  /* Same as before */
  width: 0;
  white-space: nowrap;
}

Увеличаваме значението на width на псевдоелемента ::before до 100% за да получим необходимия ефект когато курсорът на мишката попадне върху този линк:

a:hover::before {
  width: 100%;
}

По-горе е даден примера за използването на този метод. Въпреки че чрез въздействието върху свойствата на елемента width и height достигаме каквото е необходимо, този метод е с ниска производителност. За да получим плавна смяна на цветовете с 60 кадъра в секунда, е по-добре да се използват свойствата transform или opacity. Използването на свойството text-decoration дава възможност за използване в анимираните линкове на различни стилове за подчертаване на текста.

Метод №3: използване на clip-path

Тук ще използваме CSS свойството clip-path и многоъгълник, който конкретно в този случай е правоъгълник. Правоъгълникът има четири ъгъла, а дължината на две от неговите страни се увеличава при поставяне курсора на мишката върху линка. Фигурата се разширява, като едната от нейните страни се придвижва отляво надясно.

Тук се използва същия начален код, като при предишния пример:

<a href="#" data-content="Link Hover">Link Hover</a>

И отново ще използваме псевдоелемента ::before. но CSS кодът е друг:

a::before {
  position: absolute;
  content: attr(data-content);
  color: midnightblue;
  text-decoration: underline;
  clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
  transition: clip-path 275ms ease;
}

За разлика от предишния метод, тук свойството text-decoration: underline трябва да бъде зададено за псевдоелемента ::before. Това е необходимо, за да може промяната в цвета да засегне не само текста на линка, но и подчертаващата линия. Не се вгледаме в свойството clip-path:

clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)

Позициите на върховете на правоъгълника в свойството clip-path са зададени в проценти и определят координатите на фигурата по следния начин:

  • 0 0 = горния ляв ъгъл
  • 0 0 (вторият параметър на clip-path) = горния десен ъгъл
  • 0 100% = долния десен ъгъл
  • 0 100% = долния ляв ъгъл

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

a:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Ето един работен вариант на този пример. Този метод за анимиране цвета на линковете работи много добре, но трябва да се предвид, че свойството clip-path не се поддържа от всички браузъри. Създаването на CSS преходи с използването на clip-path е по-добро в сравнение с методиката height/width. Но нейното използване води до използване на операцията Paint от страна на браузъра, която изисква много ресурси.

Метод №4: използване на transform

Тук се използва метод за маскиране с помощта на елемента <span>. И тъй като в този елемент ще използваме дублиране съдържимото на линка, то за подобряване достъпността на съдържанието ще използваме атрибута aria-hidden=“true“. Това ще скрие повтарящия се текст в програмния прозорец.

Следният текст няма да се появи два пъти:

<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

CSS кодът за елемента <span> включва описание на прехода, който започва отляво:

span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 275ms ease;
}

А сега трябва да организираме преместването на елемента <span> надясно, което изглежда по следния начин:

За да можем да постигнем правилния ефект ще използваме псевдоелемента ::before на елемента <span>. И както преди, ще използваме атрибута data-content. Ще зададем промяната в позицията на елемента, използвайки трансформацията transform: translateX(100%), която го премества по оста Х.

span::before { 
  display: inline-block;
  content: attr(data-content);
  color: midnightblue;
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}

Също както при елемента <span> позицията на псевдоелемента ::before ще бъде зададена с помощта на конструкцията transform: translateX(0):

a:hover span::before {
  transform: translateX(0);
}

По-долу даден примерът на CodePen. Този метод се поддържа от всички браузъри, но за неговата реализация е необходим повече HTML и CSS код. Но използването на CSS свойството transform не оказва влияние на производителността, то не използва ново рендиране на обектите и в резултат от това се получават плавни CSS преходи със скорост 60 кадъра в секунда.

Извод

Разгледахме четири метода, чрез които се постига един и същ ефект с помощта на CSS. Всеки от тях си има своите плюсове и минуси, но се вижда, че съвсем не е сложно да се направи анимация на цвета на линковете, когато курсорът на мишката попадне върху тях. Това е един неголям, но много приятен ефект, чрез който линковете стават по-интерактивни и се възприемат по-добре.


Коментирайте статията в нашите Форуми. За да научите първи най-важното, харесайте страницата ни във Facebook, и ни последвайте в Telegram и Viber или изтеглете приложението на Kaldata.com за Android, iOS и Huawei!

Нови ревюта

Подобни новини