Подчеркивание ссылки другим цветом на CSS
 | |
| Теперь можете создать красивый эффект подчеркивание ссылки или название под любым оттенком цвета, где все создается с помощью стиля CSS. Вероятно лучше сразу подметить ключевое слово в статье или в описание, которое установлено под переход на другую страницу, или просто стоит по заданной ссылкой. Здесь и создаем подчеркивание, что делает под любой палитрой цвета, где также идет под один пиксель ширины, но по усмотрению можно сделать шире. Все редактируется в стиле, где только идут заданные значение с закрепленной гаммой цвета. Если углубиться, то стандартное подчеркивание зависит свойство text-decoration, где идет к нему значение underline, что не будет позволять вам выставить ширину подчеркиваемой полосы, и аналогично оттенка. Но нам нужно обязательно задать тот оттенок к обозначению, что просто заменяем text-decoration, на свойство border-bottom, где у нас появляется доступ к любым значениям. Вторым этапом, где не указан в название, это создание эффекта, который также будет связан со цветовой гаммой. Где можно аналогично добавить такой трюк, как при наведении будет меняться знаки, а точнее те слова, которые стоят под ссылкой. Что по умолчанию идут в темном, но стоит навести, как становится алым цветом. Но и это еще не все, мы же собираемся переходить, а значить делать клик, то при нем вы может заметите, как аналогично цветовая палитра на всех знаках изменится. Чтоб было понятно, то изначально раскидал все эффекты на 2 стиля, что можно каждый по отдельности выставить или все вместе. Приступаем к установке: HTML Код <a href="http://zornet.ru">Здесь ссылка с подчеркиванием под другой оттенок</a> CSS Код a { text-decoration:none; border-bottom:1px solid #33CC00; } Второй стиль CSS Код a {color:#4d523f; transition:0.3s;} a:hover {color:#ea1515;} a:active {color:#191717;} a:visited {text-decoration:none;} Чтоб понять задуманное, то лучше посмотреть как все будет смотреться при рабочем процессе. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |