• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Красивое оформление ссылок с помощью CSS (Как сделать стилизацию ссылок в CSS: поменять цвет и шрифт)
Красивое оформление ссылок с помощью CSS
Kosten
Пятница, 06 Декабря 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Красивое оформление при нажатии ссылки, где в сети вы можете увидеть большое количество красивых веб сайтов с отдельным css тегом для нажатых ссылок. Люди настроены на эти основные стили ссылок, это когда мы разрабатываем стиль ссылок, мы должны быть осторожны, чтобы не отойти от этой характеристики.

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

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

1. Изменение цвета ссылки

Это самый простой способ. Но не нужно устраивать резкие перемены. То есть если у вас ссылка зеленого цвета ненужно после нажатия ёё делать желтой. Как правило ссылки делаются немного темней. Если у вас зеленая ссылка то после нажатия оно должна быть темно-зеленой.
Код
a:link {color: #FF0000; text-decoration: none;}
a:visited {color: #990000; text-decoration: none;}

2. Перечеркивание ссылки

Многие делают это с помощью подчеркивания. Но чтобы не путаться с тем что подчеркивание используется и в обычных ссылках, то можно использовать перечеркивание.
Код
a:visited {color: #25A30A; text-decoration: line-through;}

3. Изменение цвета фона

Этот вариант уже более интересный... И красивей смотрится.
Код
a:link {
color: #25A30A;
text-decoration: underline;
background-color: transperent;
}

a:visited {
color: #FFFFFF;
text-decoration: none;
background-color: #77B575;
}

4. С использованием фоновой картинки

Код
a:link {
color: #25A30A;
text-decoration: underline;
}

a:visited  {
color: #888888;
text-decoration: none;
background: url(visited-icon.gif) no-repeat 0% 50%;
padding-left: 12px;
}

Чтоб оформление было красивей можно немного усложнить и сделать смену картинки.

Код
a:visited {
color: #888888;
text-decoration: none;
background: url(visited-icon.gif) no-repeat 0% 50%;
padding-left: 12px;

a:visited:hover {
color: #25A30A;
background: url(visited-icon-hover.gif) no-repeat 0% 50%;
}

5. Прибегая к помощи псевдоэлементов :before, :after

Данные пвсевдоэлементы не поддерживает в ИЕ6, хотя этот браузер некто уже не использует, но решать всё же вам.

Код
a:visited:before {
color: #25A30A;
text-decoration: underline;
content: "(ok) ";
}

a:visited:after  {
color: #25A30A;
text-decoration: underline;
content: " (ok)";
}

Так же можно вставлять unicode символы.

Например:

Код
a:visited:before {
color: #25A30A;
text-decoration: none;
content: "\221A\00A0";
}

Порядок, в котором вы их определяете, важен. Если вы переставите их, ваши эффекты наведения могут перестать работать, так как они будут переопределены. Просто убедитесь, что вы заказали их, как я сделал выше, и у вас не возникнет никаких проблем.
Страна: (RU)
Kosten
Четверг, 12 Декабря 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Красивый ховер для ссылки или эффекты при наведении курсора


See the Pen
Button Border Hover Effects
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Красивое оформление ссылок с помощью CSS (Как сделать стилизацию ссылок в CSS: поменять цвет и шрифт)
  • Страница 1 из 1
  • 1
Поиск: