• Страница 1 из 1
  • 1
Форум » Все для вебмастера » Начинающему вебмастеру » Оформление внешних ссылок иконкой на CSS (Выделение внутренних и внешних ссылок с помощью CSS)
Оформление внешних ссылок иконкой на CSS
Kosten
Дата: Суббота, 24.02.2018, 18:35 | Сообщение 1
Администраторы
Сообщений:16798
Награды: 55


Обычная практика заключается в том, чтобы включать значки в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте посмотрим на очень простой пример, что добавляет иконку к внешним ссылкам, которые приводят к другим сайтам. Такой значок обычно выглядит как маленькая стрелка, указывающая из коробки.

Здесь мы вставляем пользовательское фоновое изображение по внешним ссылкам аналогично тому, как мы обрабатывали настраиваемые маркеры в элементах списков последней статье, где на этот раз мы используем background сокращенную версию вместо отдельных свойств. Мы устанавливаем путь к изображению, которое хотим вставить, укажем, no-repeat чтобы мы только вставили один экземпляр, а затем укажите позицию как 100% пути справа от текстового содержимого и 0 пикселей сверху.

Мы также используем, background-size чтобы указать размер, на который мы хотим отобразить фоновое изображение, это полезно иметь более крупный значок и затем изменять его таким образом, как это необходимо для гибкого дизайна. Однако это работает только с IE 9 и более поздними версиями, поэтому если вам нужно поддерживать эти старые браузеры, вам просто нужно изменить размер изображения и вставить его как есть.

Приступаем к установке:

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

HTML

Код
<div> <h4>Внутренние ссылки</h4>
    <a href="http://zornet.ru">внутренняя ссылка</a>
    <a href="http://zornet.ru">внутренняя ссылка</a>
    <a href="http://zornet.ru">внутренняя ссылка</a>
    <a href="http://zornet.ru">внутренняя ссылка</a>
</div>

<div> <h4>Внешние ссылки</h4>
    <a href="http://kinovego.ru">внешняя ссылка</a>
    <a href="http://kinovego.ru">внешняя ссылка</a>
    <a href="http://kinovego.ru">внешняя ссылка</a>
    <a href="http://kinovego.ru">внешняя ссылка</a>
</div>

CSS

Код
a[href^="http://"]:not([href*="zornet.ru"]):after,
a[href^="https://"]:not([href*="zornet.ru"]):after{
    content: " "
url(http://zornet.ru/Aben/ABGDA/zornet_ru/external-link-ltr-icon.png);     
}

Так все по умолчанию сделано.



Демонстрация:

Здесь вы самостоятельно прописываете доменное имя, где бы хотели видеть значок на ссылке. Больше всего ставят свой домен, чтоб работало по внутренним ссылкам.

Код
CSS
a[href ^= "http"]:after,
a[href ^= "https"]:after {
    content: " "
    url('http://zornet.ru/Aben/ABGDA/zornet_ru/external-link-ltr-icon.png');    
}

Визуально так выглядит.



Демонстрация:

Этот вариант будет работать на внутренний и внешних ссылок, просто его добавляю, чтоб у вас был выбор. Здесь установили некоторые padding-right ссылки, чтобы создать пространство для фонового изображения, поэтому мы не перекрываем его с текстом.

CSS

Код
a[href*="http"] {
    background: url(http://zornet.ru/Aben/ABGDA/zornet_ru/external-link-ltr-icon.png) no-repeat 100% 0;
    background-size: 12px 12px;
    padding-right: 14px;
}

Так визуально смотрится.



Демонстрация:

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

PS - Мы надеемся, что эта статья предоставит вам все, что вам нужно знать о ссылках - на данный момент. Вы также можете сменить кнопку и поставить свою оригинальную, она идет под изображение, где вы задаете размер и на каком расстояние она должна быть.
Прикрепления: 1971706.png(6.2 Kb) · 0167100.png(6.9 Kb) · 3724051.png(5.8 Kb)
Страна: (RU)
Форум » Все для вебмастера » Начинающему вебмастеру » Оформление внешних ссылок иконкой на CSS (Выделение внутренних и внешних ссылок с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: