Цвет ссылок

Чистый CSS: 4 метода анимирования цвета ссылок

Автор статьи, перевод которой мы сегодня публикуем, предлагает, пользуясь чистым CSS, создать механизм изменения цвета текста ссылки при наведении на неё мыши. Но это должна быть не обычная смена цвета. Новый цвет должен заполнять ссылку слева направо, заменяя старый.

Для того чтобы это сделать, можно прибегнуть к одному из четырёх методов, описанных в этом материале. Рассмотрим эти методы, обращая особое внимание на разные важные вещи вроде доступности контента, производительности решения и браузерной поддержки.

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

Во время написания этого материала свойство background-clip: text носит статус экспериментального. Оно не поддерживается в Internet Explorer 11 и ниже.Этот метод предусматривает создание так называемого «knockout text» (текста, который выглядит так, будто он вырезан в некоей поверхности и из него просвечивает фон) с резким градиентом. HTML-разметка состоит из единственного элемента , описывающего гиперссылку.

Начнём с создания стилей для ссылки. Использование overflow: hidden приведёт к тому, что при изменении внешнего вида ссылки отсекается всё то, что выходит за пределы этого элемента.

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

Воспользуемся свойством background-clip для обрезки градиента. Дадим ему значение text для вывода текста. Мы ещё будем использовать свойства background-size и background-position . Делается это для вывода начального цвета.

И наконец — добавим к стилю CSS-свойство transition и стилизуем псевдокласс гиперссылки :hover . Для того чтобы при наведении на ссылку мыши новый цвет заполнял бы ссылку слева направо, воспользуемся свойством background-position .

Вот — пример на CodePen.Хотя эта методика и позволяет достичь желаемого эффекта, Safari и Chrome подвергнут обрезке элементы оформления текста и тени. Это значит, что они показаны не будут. Применение текстовых стилей, таких, как подчёркивание текста с помощью CSS-свойства text-decoration , работать не будет. Поэтому, если нужно, чтобы ссылки были бы подчёркнутыми, стоит рассмотреть другие способы настройки подчёркивания.

Метод №2: применение width/height

CSS-код похож на тот, что использован в предыдущем примере, за исключением настроек свойства фона. Здесь, кроме того, будет нормально работать свойство text-decoration :

Для того чтобы текст не перешёл бы на новую строку, к псевдоэлементу будет применён стиль white-space: nowrap . Для изменения цвета ссылки зададим значение CSS-свойства color псевдоэлемента ::before и сделаем так, чтобы в начале значение свойства width равнялось бы 0:

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

Вот пример применения этого метода.Хотя мы, воздействуя на свойства элемента width и height , достигаем того, что нам нужно, этот метод отличается невысокой производительностью. Для того чтобы получить плавную смену цветов на 60 кадрах в секунду — лучше пользоваться свойствами transform или opacity .Применение свойства text-decoration позволяет использовать в анимированных ссылках различные стили подчёркивания текста. Вот пример, демонстрирующий это, созданный с помощью третьей методики, которую мы сейчас рассмотрим. Она основана на применении CSS-свойства clip-path.

Метод №3: применение clip-path

Здесь мы будем пользоваться CSS-свойством clip-path и многоугольником, в данном случае — прямоугольником. Прямоугольник имеет четыре угла, длина двух из его сторон увеличивается при наведении мыши на ссылку. Фигура расширяется, одна из её сторон двигается слева направо.

Тут используется та же разметка, что и в предыдущем примере:

Мы, снова, будем пользоваться псевдоэлементом ::before . Но CSS-код здесь другой:

В отличие от предыдущего метода, здесь свойство text-decoration: underline должно быть задано для псевдоэлемента ::before . Это нужно для того, чтобы изменение цвета коснулось бы не только текста ссылки, но и линии, подчёркивающей ссылку.Теперь присмотримся к CSS-коду свойства clip-path :

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

Позиции вершин многоугольника в свойстве clip-path заданы в процентах, они определяют координаты в порядке, соответствующем их размещению на многоугольнике:

• 0 0 = верхний левый угол
• 0 0 = верхний правый угол
• 0 100% = нижний правый угол
• 0 100% = нижний левый угол

Вот рабочий вариант этого примера.Эта методика анимирования цвета ссылок работает очень хорошо, но перед её применением стоит учесть поддержку свойства clip-path различными браузерами. Создание CSS-переходов с использованием clip-path — это лучше, чем использование методики height/width. Однако её применение приводит к тому, что браузер выполняет весьма ресурсозатратные операции Paint (рисование).

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

В разметке, которая здесь применяется, используется методика маскировки с помощью элемента . Так как мы будем использовать в элементе содержимое, дублирующее содержимое ссылки, то мы, ради улучшения доступности контента, воспользуемся атрибутом aria-hidden=»true» . Это скроет повторяющийся текст от средств для чтения с экрана.

Такой текст не будет озвучен дважды:

CSS-код для элемента содержит описание перехода, который начинается слева:

Теперь нужно организовать перемещение элемента вправо, выглядящее так, как показано ниже.

Для того чтобы это сделать, воспользуемся псевдоэлементом ::before элемента . И, как прежде, прибегнем к использованию атрибута data-content . Зададим изменение позиции элемента, применяя трансформацию transform: translateX(100%) , перемещая его по оси X .

Так же, как и у элемента , позиция псевдоэлемента ::before будет установлена с помощью конструкции transform: translateX(0) :

Вот этот пример на CodePen.Хотя этот метод отличается наилучшей кросс-браузерной поддержкой из рассмотренных, для его реализации нужно больше HTML и CSS-кода. Тем не менее, применение CSS-свойства transform не вредит производительности, его использование не вызывает перерисовывания элементов, и, в результате, ведёт к формированию плавных CSS-переходов на 60 кадрах в секунду.

Итоги

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

Уважаемые читатели! Анимируете ли вы ссылки в своих проектах?

Источник

Как изменить вид ссылки при наведении на нее курсора мыши?

Изменить цвет текстовой ссылки, когда на неё наводится курсор мыши и вернуть цвет обратно при уведении курсора.

Решение

Псевдокласс :hover , который добавляется к селектору A , определяет состояние ссылки при наведённом на неё курсоре мыши. В стилях вначале указывается селектор A , потом :hover (пример 1).

Пример 1. Изменение вида ссылки

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Cras ingens iterabimus aequor — завтра снова мы выйдем в огромное море.
  

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки в данном случае не будут изменять свой цвет.

Рис. 1. Вид ссылки при наведении на неё курсора мыши

Аналогично можно изменить и цвет фона под ссылкой при её наведении, добавив свойство background к селектору A:hover , как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Audaces fortuna juvat - счастье покровительствует смелым.
  

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding .

Рис. 2. Изменение цвета фона ссылки

Источник

Цвет ссылок

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

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве атрибутов тега . Атрибуты являются необязательными и если они не указаны используются значения по умолчанию.

link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).

alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.

vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb , где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

Пример 1. Задание цветов ссылок

      
Содержание сайта
  

Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A .

visited — Стиль для посещенной ссылки.

active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

hover — Стиль для ссылки при наведении на нее мышью.

В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей. Для этого воспользуемся стилевым свойством color , оно задает цвет определенного текста, в данном случае, ссылок.

Пример 2. Цвет ссылок, заданных через стили

       
Содержание сайта
  

Задание цвета отдельных ссылок на странице

Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.

Пример 3. Изменение цвета ссылки с помощью стилей

      
Содержание сайта
 
Интернет-маркетинг
 
Юзабилити
  

В данном примере приведены три разных способа задания цвета с помощью стилей.

Источник

Как изменить цвет ссылки в CSS

В этой статье мы расскажем, как стилизовать ссылки с помощью свойств CSS (например. изменить цвет ссылки в CSS) Оформление ссылок зависит от состояния, в которых они находятся:

• Не посещенная ссылка : состояние ссылки по умолчанию. Оно определяется с помощью псевдокласса :link.
• Посещенная ссылка : стилизуется с помощью псевдокласса :visited.
• Активная : ссылка, которая активируется нажатием. Задается с помощью псевдокласса: active.
• С сылка, на которую пользователь навел курсор : стилизуется псевдоклассом :hover.
• Выделенная фокусом ввода : стилизуется с использованием псевдокласса :focus.

Пример оформления простой ссылки

    p 
Example for a simple link
  

По умолчанию не посещенные ссылки оформляются синим цветом, посещенные – фиолетовым, выделенные фокусом ввода – контуром, а активные – красным цветом.

Эти стили можно изменить, используя следующие свойства CSS. Пример использования свойства text-decoration:

    p < font-size: 30px; text-align: center; >a:link < text-decoration: none; >a:visited < text-decoration: none; >a:hover < text-decoration: underline; >a:active 
Here is a link
  

Пример, в котором для оформления ссылки используется свойство background-color

    p < font-size: 30px; text-align: center; >a:link < background-color: coral; >a:visited < background-color: cyan; >a:hover < background-color: DarkMagenta; >a:active 
This is a link
  

Для оформления ссылки как кнопки потребуются следующие свойства: color, text-decoration, text-align, background color display, padding и другие.

    a:link, a:visited < background-color: DarkSalmon ; border: none; color: #FFFFFF; padding: 25px 52px; text-align: center; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-decoration: none; font-size: 20px; text-align: center; cursor: pointer; display: inline-block; >a:hover, a:active  BUTTON   

Свойства, указанные в псевдоклассе :hover, могут применяться и к другим элемента, а не только к ссылкам.

Ссылки могут быть стилизованы так, чтобы в определенных ситуациях выглядеть и вести себя как кнопки. Навигационное меню размечено как список, содержащий ссылки. Его можно оформить так, чтобы оно выглядело как набор кнопок управления. Пример

мы устанавливаем нулевой отступ, устанавливая и ширину 100% внешнего контейнера, (в нашем случае ).

, оставляя небольшое пространство между каждой кнопкой. После этого устанавливаем ширину и расстояние между каждой кнопкой. Затем задаем line-height: 3, чтобы придать кнопкам определенную высоту. В конце мы устанавливаем белый цвет для текста.

Заключение

Надеюсь, эта статья предоставила вам всю необходимую информацию о ссылках и их стилизации.

Источник