Яндекс Метрика
Стили CSS для ссылок | при наведении размывается контент

Стили оформления ссылок в тексте для их выделения в контенте

Стили оформления ссылок в тексте для их выделения в контенте

Стили оформления ссылок в тексте для их выделения в контенте

Стили для ссылок, при наведении на которые, происходит размытие окружающего контента и создается акцент на главном.

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

Сам пример:

Так выглядит ссылка внутри текста на любом сайте: ссылка.

* Отлично подходит для desktop версий, так как эффект достигается при наведении мыши на ссылку

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

В первом блоке содержится пример исходного HTML, а во втором стили CSS, которые применяются для создания такого эффекта.


HTML текст для описания самого содержимого с синтаксисом


CSS для описания внешнего вида и эффекта бэкграунда

Это то, что вам необходимо добавить в файл style.css на вашем сайте и далее вы можете использовать указанный в HTML класс для создания подобных ссылок.