Красивое оформление при нажатии ссылки, где в сети вы можете увидеть большое количество красивых веб сайтов с отдельным 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";
}
Порядок, в котором вы их определяете, важен. Если вы переставите их, ваши эффекты наведения могут перестать работать, так как они будут переопределены. Просто убедитесь, что вы заказали их, как я сделал выше, и у вас не возникнет никаких проблем.
