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

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

Оформление гипертекстовых ссылок

1. Псевдоклассы состояний гипертекстовых ссылок

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

Не посещенная — a:link
Посещенная — по которой уже выполнялся переход — a:visited
Не нажатая — над которой находится указатель мыши — a:hover
Нажатая — которая удерживается мышью — a:active

Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:

Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма каскадности).

2. Выборка отдельных ссылок

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

3. Подчеркивание ссылок

Добавление подчеркивания только при наведении на ссылку:

Внешний вид нижней границы ссылки:

4. Внешний вид курсора мыши cursor

Курсор мыши может иметь различный вид, также можно установить пользовательское изображение в качестве курсора. Наведите над ячейками таблицы ниже, чтобы увидеть, как выглядит курсор для каждого установленного значения. Значение по умолчанию cursor: pointer; .

5. Использование фонового изображения

Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение:

6. Изображения для ссылок

Добавить изображение для ссылки можно с помощью CSS-свойства background-image . Так как элемент является строчным a , то предварительно его нужно преобразовать в блочный элемент a .

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

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

Символ href$ в селекторе атрибута дает браузеру команду найти все атрибуты href , заканчивающиеся определенным образом (в данном случае .pdf ) и добавить к ссылке соответствующий значок.

Благодаря свойствам background-color , border и padding , ссылкам можно придать вид прямоугольных кнопок, а, меняя отображение тех или иных свойств ссылок при наведении курсора мыши a:hover , добавить интересные эффекты.

8. Примеры оформления ссылок

Гипертекстовые ссылки можно оформить различными способами, но основной прием оформления основывается на изменении внешнего вида ссылки при наведении на нее курсором мыши — состояние ссылки a:hover .

Креативные эффекты для ссылок

Сегодня мы поделимся с вами очередным экспериментом. Идея состоит в использовании псевдо-элементов для достижения нужного нам эффекта. В данных примерах, мы использовали эффекты, которые появляются при наведении мыши, но вы можете легко подделать их и под клик.

В большинстве своём HTML код будет состоять из ссылок:

Но в некоторых случаях, для достижения нужных эффектов, мы воспользуемся атрибутом data:

Так же, в некоторых случаях мы можем воспользоваться элементом span:

Вот пример определённого стиля. Мы располагаем псевдо-элемент поверх ссылки и при наведении мыши отображаем эффект:

Надеемся, данная коллекция вам пригодится.

Заметка: IE10 не поддерживает 3d эффектов.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2013/08/06/creative-link-effects/
Перевел: Станислав Протасевич
Урок создан: 10 Августа 2013
Просмотров: 45355
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Оформление гиперссылок — не всё так просто!

Гиперссылки — это неотъемлемая часть любого сайта. Без них всё было бы по-другому, если бы вообще было. Используя простой HTML элемент — – вы можете связать страницы и сайты друг с другом. Гиперссылки — это что-то магическое.

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

В этой статье мы рассмотрим несколько хороших примеров оформления гиперссылок.

Ссылки должны выглядеть как ссылки

Все гиперссылки должны нести вашим читателям явное послание: «Я ссылка. Кликни на меня»

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

Читайте так же:  Жалоба в фас по 135-фз

Думаю, что многие уже настолько привыкли к этому стандарту, что не стоит от него сильно отходить.

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

Ниже вы найдёте 3 разных примера оформления гиперссылок. Они взяты с самых разных популярных новостных порталов.

На первый взгляд, каждый из этих примеров хорош. Все они синего оттенка и хорошо выделяются из основного текста.

Почему же тогда ссылки с сайта The New York Times смотрятся лучше, чем другие?

Позвольте, я поясню.

Простой тест дизайна гиперссылки

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

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

Делается это очень просто:

Сделайте скриншот и вставьте его в Photoshop. Проделайте следующие операции:

  • Image > Adjustments > Desaturate
  • Filter > Blur > Gaussian Blur

Теперь давайте ещё раз взглянем на наши экспериментальные ссылки.

Вот пример для The Guardian; Трудно найти ссылку:

BBC использует жирный текст, поэтому если постараться, то её можно различить среди остального текста.

В The NY Times ссылку найти проще всего.

Подчёркивание ссылок

Вот тут-то есть небольшой подвох.

Некоторые исследования показывают, что подчёркивание ссылок снижает читабельность текста. Там говорится, что «это в значительной мере снижает юзабилити веб-страниц.» Так же исследователи говорят, что «альтернативные варианты должны быть так же тщательно продуманы.» Они надеются, что наше текущее восприятие ссылок со временем будет меняться.

Главной причиной того, что подчёркивание ссылок снижает разборчивость текста, заключается в том, что данный эффект перекрывает некоторые символы, элементы которых выходят за базовую линию — такие как p, g, j, и q. Эти буквы особенно подвержены данному эффекту, если мы применяем к ним text-decoration: underline.

Вот пример стандартной ссылки в Google Chrome (версия 28):

Какое решение может быть тут?

Мы сами можем чуть пофиксить этот минус. Не будем ждать, пока создатели браузера поменяют стандартный стиль отображения ссылок.

Как же? Мы можем воспользоваться CSS свойством border-bottom, вместо CSS text-decoration, тем самым, подчеркнув ссылки.

Используя свойство border-bottom, мы можем сместить подчёркивание на несколько пикселей ниже, тем самым, улучшив читабельность.

Вот пример CSS кода:

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

К примеру, мы можем уменьшить толщину линии и поработать над цветом, чтобы сделать ссылку более приятной.

В моём примере, я чуть изменил цвет подчёркивания. Сделал светлее:

Делайте тест ссылок длинным

Следующая тема, которую я хотел бы обсудить, относится больше к стратегиям.

За основу данного подхода, возьмём Закон Фиттса.

Фишка данного закона проста. Чем больше размер объекта, тем его легче заметить и сделать клик.

Данное высказывание имеет огромный смысл, если речь касается тачскринов.

Бывает сложно попасть пальцем по ссылке; часто приходится увеличивать масштаб страницы, чтобы сделать это.

К счастью, мы можем исправить это, отредактировав стили.

Мы можем сделать ссылки жирными, подчеркнуть, изменить цвет.

А что вы скажете на счёт того, чтобы изменить их размер?

Поэтому единственное, что мы можем сделать, расширить ссылки горизонтально.

Должны ли гиперссылки быть синими?

Согласно исследованиям Google, по синим ссылкам совершается больше кликов, нежели по каким-либо другим.

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

Хотя, по моему мнению, не все ссылки должны быть синими.

Есть так же примеры, где синие ссылки никуда не годятся.

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://sixrevisions.com/usability/hyperlink-design/
Перевел: Станислав Протасевич
Урок создан: 5 Сентября 2013
Просмотров: 28480
Правила перепечатки

5 последних уроков рубрики «Для сайта»

Эффекты блочного раскрытия

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

15 полезных .htaccess сниппета для сайта на WordPress

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

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

20 сайтов с креативным MouseOver эффектом

Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

45+ бесплатных материалов для веб дизайнеров за август 2016

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

Как красиво оформить ссылки CSS + HTML

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

Читайте так же:  Приказ мз рф no 245

21 способ красиво оформить ссылки:

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

Оформление ссылок

Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:

  • ссылки без подчёркивания;
  • декоративное подчёркивание;
  • выделение фоновым цветом;
  • рамки;
  • рисунок возле ссылки.

Далее указанные методы оформления ссылок рассматриваются более подробно.

Ссылки без подчёркивания

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

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

Пример 1. Отсутствие подчёркивания у ссылок

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration , они наследуют свойства селектора a .

Подчёркивание ссылок при наведении на них курсора мыши

Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration : none , следует воспользоваться псевдоклассом :hover . Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).

Пример 2. Подчёркивание ссылок

Декоративное подчёркивание ссылок

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom , которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed , получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3. Пунктирное подчёркивание для ссылок

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none , чтобы одновременно не получилось две линии (рис. 1).

Рис. 1. Использование пунктира для выделения ссылки

Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.

Пример 4. Двойное подчёркивание ссылок

Изменяя толщину линии, её тип и цвет, можно получить множество разнообразных эффектов.

Использование фонового цвета

Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background , присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover , тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).

Пример 5. Фон под ссылкой

Фон под ссылкой точно соответствует области текста, поэтому в примере для селектора a добавлено свойство padding , создающее поля вокруг текста (рис. 2).

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

Рамка вокруг ссылки

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

В примере 6 показано, как изменять цвет рамки, используя свойство border . Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

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

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding . Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background .

Если требуется добавить рамку к ссылкам при наведении на них курсора, то следует позаботиться о том, чтобы текст в этом случае не сдвигался. Достичь этого проще всего добавлением невидимой рамки вокруг ссылки и последующего изменения цвета рамки с помощью псевдокласса :hover . Прозрачный цвет указывается с помощью ключевого слова transparent , в остальном стиль не поменяется.

Рисунки возле внешних ссылок

Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).

Рис. 3. Выделение ссылки с помощью рисунка

Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a[href^=»http://»] <. >, как показано в примере 7.

Читайте так же:  Спор в автобусах

Пример 7. Рисунок возле ссылки

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right . Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left .

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*=»//»] , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

CSS Урок 8 Ссылки

Ссылки могут быть оформлены различными путями.

Оформление Ссылок

Ссылки могут быть оформлены с помощью любого CSS свойства (например color, font-family, background и т.д.).

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

Четыре состояния ссылки это:

  • a:link — обычная, не посещенная ссылка
  • a:visited — ссылка, которую пользователь уже посетил
  • a:hover — ссылка, над которой находится курсор мыши
  • a:active — ссылка, на которую в данный момент кликнули

При установке стиля для нескольких состояний ссылки, есть несколько порядковых правил:

  • a:hover ДОЛЖНО идти после a:link и a:visited
  • a:active ДОЛЖНО идти после a:hover

Способы Оформления Ссылок

В примере выше ссылка меняет цвет в зависимости от состояния, в котором она находится.

Давайте посмотрим некоторые другие способы оформления ссылок:

Декорация Текста

Свойство text-decoration в основном используется для удаления подчеркивания из ссылок:

Оригинальное оформление ссылок с помощью CSS

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

1. Подсвечивающаяся ссылка

Сделать такую ссылку не тяжело, для этого мы будем использовать CSS свойство тени (она будет светлая). Эффект подсветки будет срабатывать только на темных сайтах.

Цвета можно использовать разные. Главное для эффекта подсветки используйте темный фон и яркую контрастную тень. (черный – оранжевый, темно-синий – желтый)

Вот собственно и CSS код:

Если вы уже имели дело с CSS, то ничего сложного здесь не найдете. В text-shadow указываем по порядку [цвет] [сдвиг по x] [сдвиг по y] [радиус размытия]. Для эффекта подсвечивания указывать сдвиги по осям не нужно – просто оставьте нули.

2. Темнеющая ссылка

Не самый удобный способ оформления ссылки, но все научится создать его нам не помешает. Вот рабочий вариант: (если при наведении ничего не меняется, то попробуйте обновить страницу)

Такой эффект мы будем создавать с помощью свойства CSS opasity и анимации. Однако в браузерах не поддерживающих анимацию (IE) будет сразу выводится темный вариант ссылки.

Opasity – прозрачность объекта, значения которого изменяются от 0 до 1 (0.2 0.56 и т.д.)

Давайте поподробнее рассмотрим свойство анимации:

В этой строчке после -webkit-transition по порядку идет [выбранное свойство] [время в сек] [тип анимации]. Также прописывается и в -moz-transition, и в -o-transition.

3. Плавно меняющая цвет ссылка

Работает по схожему принципу, как и предыдущая, но менять мы будем свойство color. Такое оформление ссылки подойдет почти любому сайту, хотя я нигде его не видел. Ну, что ж будем первыми ;).

Изменения в коде не значительные по сравнению с предыдущим типом:

цвета можно добавлять абсолютно любые.

4. Обводящаяся ссылка

Также оригинальный вариант оформления ссылки, который я тоже нигде не встречал ). Смотрим:

Здесь мы также используем анимацию CSS и еще свойство border.

5. Появление фона у ссылки

Вот такое оформление ссылки встречается довольно часто. Но к сожалению применяется данный способ часто не к месту.

Можно получить еще один интересный эффект добавив border и закруглив его.

Чем то смахивает на логотип сервиса rookee. Если вы когда-то с ним встречались, то вы поняли чем именно.

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

6. Текст ссылки становится ПРОПИСНЫМ

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

Вполне можно использовать данный способ в сочетании с другими. Например с подсветкой, рамкой… в общем со всеми.

Еще в свойстве text-transform можно указать свойства:

capitalize — каждое слово с заглавной буквы

lowercase — все символы строчные

7. Жиреющая ссылка

С помощью свойства font-weight :

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

8. Текст ссылки становится курсивным

Такой вот красивый вариант оформления. По сравнению с предыдущими вариантами смещение идет минимальное.

Рекомендую добавить еще в дополнению к этом эффект один из ваше перечисленных (изменение цвета, подсветка…)

Кстати попробуйте добавить еще и эффект плавной анимации, думаю будет красиво.

Вот, дорогой друг, думаю ты разобрался как создать красивый эффект оформления ссылки при наведении. Удачи!

Почему Вы еще не прокомментировали?
Оставьте свой комментарий! Весь Интернет уже заждался!