CSS ефекти: използване на span за прекъсване на думи в URL адреси

Едно интересно използване на span таг.

Определение и употреба на SPAN таг

SPAN e инлайн елемент (inline element), което означава че може да бъде в един ред с останалите елементи.

Този таг се използва за групиране на инлайн елементи в документ. Той не предизвиква визуални промени сам по себе си. Предоставя начин да добавим hook към част от текст или част от документ, т.е. да добавим персонализиране на кода.

Използване на span за прекъсване на думи в URL адреси

Има сайтове с имена, състоящи се от няколко залепени думи. Както например и името на моя блог: ivytechnoweb.net. То не е толкова дълго и трудно за разделяне на думи, но ако се случи да имаш работа например с този сайт на име: afterhoursprogramming.com

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

Горният линк afterhoursprogramming.com може да бъде изписан, започвайки всяка дума с главна буква:

AfterHoursProgramming.com

Така е по-ясно. Но някои ще си помислят, че трябва да се пише по този начин винаги, а знаем, че тези линковете не са чувствителни към регистъра.

Можем да разбием думите в линка с помощта на различни цветове.

Това лесно се постига с елементарно CSS:

Ето един пример:

afterhoursprogramming.com.

Този вариант е приемлив и сега ще го създадем чрез кратък CSS код:

CSS

a span {
   color: #c00000;
}

Тогава в прилежащата му връзка в HTML просто увиваме думата, която желаем оцветена, така:

HTML

<a href="#">after<span>hours</span>programming.com</a>

Доразвиваме тази идея като добавяме и алтернативна смяна на цветовете, когато преминаваме  с курсора над линка.

Ето по този начин, чрез следния CSS код:

CSS

a {
   color: black;
}  
a span {
   color: #c00000;
}
a:hover {
   color: #c00000;
}
a:hover span {
   color: black;
}

Резултатът може да се види тук в дясно, прекарвайки курсора отгоре:

See the Pen
Example001 by Ivanka Grigorova (@Ivy2018)
on CodePen.

Или като гиф същото:

Заключение

Виж още за кодирането: Пищови по HTML, CSS, JavaScript

Автор на оригиналния урок Chris Coyier.