ZorNet.Ru — портал вебмастера
Круто suroundatikem
Прохладный квадрат одновременно
.bordersyoser <
margin:3em 0;
>
a,a:visited,a:hover,a:active <
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:relative;
transition:0.5s color ease;
text-decoration:none;
color:#81b3d2;
font-size:2.5em;
>
a:hover <
color:#d73444;
>
a.before:before,a.after:after <
content: «»;
transition:0.5s all ease;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:absolute;
>
a.before:before <
top:-0.25em;
>
a.after:after <
bottom:-0.25em;
>
a.before:before,a.after:after <
height:5px;
height:0.35rem;
width:0;
background:#d73444;
>
a.first:after <
left:0;
>
a.second:after <
right:0;
>
a.third:after,a.sixth:before,a.sixth:after <
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
>
a.fourth:before,a.fourth:after <
left:0;
>
a.fifth:before,a.fifth:after <
right:0;
>
a.seventh:before <
right:0;
>
a.seventh:after <
left:0;
>
a.eigth:before <
left:0;
>
a.eigth:after <
right:0;
>
a.before:hover:before,a.after:hover:after <
width:100%;
>
.suroundatikem <
box-sizing:border-box;
margin-left:-0.4em;
position:relative;
font-size:2.5em;
overflow:hidden;
>
.suroundatikem a <
position:static;
font-size:100%;
padding:0.2em 0.4em;
>
.suroundatikem:before,.suroundatikem:after <
content: «»;
box-sizing:border-box;
transition:0.25s all ease;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
position:absolute;
width:5px;
width:0.35rem;
height:0;
background:#d73444;
>
.suroundatikem:before <
left:0;
bottom:-0.2em;
>
.suroundatikem.individual:before <
transition-delay:0.6s;
>
.suroundatikem:after <
right:0;
top:-0.2em;
>
.suroundatikem.individual:after <
transition-delay:0.2s;
>
.suroundatikem a:before <
left:0;
transition:0.25s all ease;
>
.suroundatikem a:after <
right:0;
transition:0.25s all ease;
>
.suroundatikem.individual a:after <
transition:0.25s all ease 0.4s;
>
.suroundatikem:hover:before,.suroundatikem:hover:after <
height:calc(100% + 0.4em);
>
.suroundatikem:hover a:before,.suroundatikem:hover a:after <
width:100%;
>
Оформление внешних ссылок визуальными иконками CSS
Сегодня я расскажу, как оформить иконками или цветом внутренние и внешние ссылки. Расскажу, а вы уж сами решайте, нужно это вам или нет. На мой взгляд, это удобно и красиво. Удобно тем, что ваш посетитель сайта сразу увидит какая перед ним ссылка – внешняя или внутренняя. Всё просто! Это можно реализовать несколькими способами. Я вам покажу пару вариантов, а вы уж решайте. Внимательно изучите примеры, постарайтесь въехать в логику, а тогда уж все ваши желания станут вам по силам.
Как красиво оформить внешние ссылки свойствами CSS
Да что там: взгляните на фото чуть ниже. Увидели!? Да, именно так, например, в Wikipedia ссылки и оформлены.
Ну что! …если это нужное дело – вперёд. Вся наша работа сведётся к использованию селекторов псевдоклассов after и before. И, конечно же, мы решим задачу по отделению внутренних ссылок от внешних. Собственно об этом ниже… Вот иконка
копируйте её и переносите к себе на сервер. У меня она располагается в папке с темой, в подпапке images. Как только перенесёте эту иконку к себе, смело можно считать что большая часть дела выполнена. Кстати скажу: иконку ссылки возможно заменить на любую другую, более симпатичную, или же вовсе за место неё прикрепить текст.
CSS Оформляем иконками внешние ссылки статей
Для этого вам потребуется открыть ваш файл стилей style.css (в WordPress он лежит в папке с используемой вами темой по адресу: … /wp-content/themes/Название темы/ ) и дописывайте в него подобный код:
.post a[href^="http://"]:not([href*="mihalica.ru"]):after, .post a[href^="https://"]:not([href*="mihalica.ru"]):after, .post a[href^="ftp://"]:not([href*="mihalica.ru"]):after < content: "" url('/wp-content/themes/Real/images/extera.png'); padding-left:3px; >Думаю, ясно, что мой домен в примере нужно заменить на свой, а так же и путь к файлу иконки. А в остальном тоже, думаю, понятно. Но немного поясню: у меня все посты «обёрнутые» классом – контейнер post А ПОЭТОМУ Я И ДОБАВИЛ ЕГО К ТЕГУ «а». Иначе все ссылки ведущие за пределы вашего сайта будут тоже обозначены иконкой. В их числе, например, окажется и ссылка счётчика посещаемости, а это уже перебор в красЯвостях)) …теперь, после нашей работы, ваш сайт (его CMS) станет принудительно сравнивать все ссылки на вашем блоге, а к внешним, из проверенных, добавлять иконку. Ну, а та, посредством нашего примера, станет выводится рядом с текстом ссылки. Последняя строка примера: padding-left:3px; – три пикса — это и есть расстояние отступа от текста внешней ссылки. (В вашей теме, класс КОНТЕНТА может быть иным. Это не страшно. Посмотреть его вы запросто сможете расширением, которое есть в любом браузере: клик по нужному элементу вашей вебстраницы правой кнопкой мыши… и выбор в подменю подобного пункта «Просмотр кода элемента». Посмотрите и всё станет ясно. А ещё для этих целей, и не только этих, есть отличный инструмент для web-мастеров — Фаербаг (о нём в следующем параграфе. …теперь… …если вас иконка не устраивает, — с лёгкостью вместо неё можно добавить какую-то надпись «Внешняя ссылка», например – просто замените содержимое свойства content … …как-то так:
…а коли есть желание заменить цвет ВНУТРЕННЕЙ ссылки от внешней, всё точно так же и подобно… простки-напрстки вместо словца content допишите нужные вам свойства CSS.
Если что неясно, спрашивайте в комментариях.
Пожалуй, всё! Правило, по которому теперь ваш блог станет работать – добавлено.
И работать, управляя ссылками вашего сайта, вам станет запросто. Тем же кто пока мало разбирается в скриптах CSS и т.п. — смотрите видео, там подробно разъяснено начальное оформление ссылок лёгким посредством правки кода. Буду рад, если эта коротенькая статья кому-то пригодится.
Также у нас сайте есть ещё полезные рубрики: Плагины WordPress и их настройка ИЛИ HTML, CSS, PHP — подробно .
Online консультация по настройкам и созданию сайтов на WordPress
Михаил ATs — владелец блога запросто с Вордпресс — в сети нтернет давным-давно.
. веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети. — заказы, вопросы. разработка.
Оформление внешних ссылок с помощью CSS
Привет! Вы наверно замечали, как на крупных порталах оформлены ссылки, ведущие на другие сайты? Для наглядности приведу в качестве примера Википедию, где они отмечены особым образом:
Вы заметили маленький значок, который расположен рядом с каждой из ссылок? Один из них я специально подчеркнул красной линией.
Для пользователя это простой визуальный сигнал, говорящий о том, что при нажатии на такой URL-адрес он перейдет на другой сайт. Сегодня я расскажу Вам, как с помощью CSS красиво оформить внешние ссылки на сайте.
Я предлагаю рассмотреть два различных варианта:
- добавление текста с предупреждением о переходе на другой сайт;
- добавление графической иконки — это может быть изображение или иконочный шрифт.
Добавление к внешним ссылкам текстовой подсказки
Сначала давайте разберем первый вариант и добавим в конце ссылки простое текстовое предупреждение, это может быть любое слово или словосочетание. Желательно не использовать длинные обороты речи. Особое внимание обратите на свою целевую аудиторию — смогут ли посетители понять что скрыто за этой фразой.
Добавьте следующий код в файл таблицы стилей stylesheet.css Вашей темы:
a[href^="http://"]:not([href*="webliberty.ru"]):after, a[href^="https://"]:not([href*="webliberty.ru"]):after, a[href^="ftp://"]:not([href*="webliberty.ru"]):after < content: "(Переход на другой сайт)"; padding-left:5px; >Что выполняет данная функция? Сперва идет проверка, совпадает ли домен с текущим, при этом анализируются два протокола интернет-соединения — HTTP и защищенный протокол HTTPS, а также соединение по FTP. В том случае, если домен целевого URL не совпадает с текущим, то в конце ссылки с отступом 5 пикселей добавляется текст. В моем примере свойство CSS content генерирует сообщение, заключенное в кавычках. Наглядный пример:
В данном примере смените доменное имя webliberty.ru на свое. Используйте идентификаторы id и классы class , чтобы применить эти правила CSS к определенным блокам контента.
Как добавить рисунок к внешним ссылкам
Переходим ко второму варианту. Теперь давайте добавим иконку до или после URL анкора. В этом нет ничего сложного, в качестве иконки используется обычная картинка, например, такая
Код, который необходимо добавить в stylesheet.css:
a[href^="http://"]:not([href*="webliberty.ru"]):after, a[href^="https://"]:not([href*="webliberty.ru"]):after, a[href^="ftp://"]:not([href*="webliberty.ru"]):after < content: "" url('/images/external.png'); padding-left:5px; >Не забывайте указывать свой домен и путь к файлу изображения, используемого в качестве графической иконки. Вместо картинки можно использовать иконочный шрифт, который отлично масштабируется и не будет создавать лишних http-запросов к серверу.
В таком случае внешняя ссылка будет выглядеть следующим образом:
Внешняя ссылка
Допустим, Вам необходимо добавить иконку не после ссылки, а перед ней, в таком случае вместо псевдоэлемента :after используйте :before и смените отступы:
a[href^="http://"]:not([href*="webliberty.ru"]):before, a[href^="https://"]:not([href*="webliberty.ru"]):before, a[href^="ftp://"]:not([href*="webliberty.ru"]):before < content: "" url('/images/external.png'); padding-right:5px; >Иконка в таком случае будет расположена слева от анкора:
Внешняя ссылка
Напоследок предлагаю совместно обсудить сразу два вопроса:
- Повлияет ли применение такой фишки на юзабилити сайта?
- Каким образом это отразится на кликабельности ссылок?
На этом небольшой урок по стилизации ссылок подошел к концу, оставляйте свои комментарии, если появятся вопросы — задавайте, с удовольствием на них отвечу.