Создание необычных стилей для ссылок
6 марта 2019 | Опубликовано в css | 2 Комментариев »
Вы, разумеется, знаете, как выглядят ссылки по умолчанию: текст синего цвета с синим же подчеркиванием, одинаково изменяющие цвет при наведении указателя мыши. Есть и другой способ создать немного более интересный вид ссылок:
Создание необычных стилей для ссылок
Широко известный вид ссылок по умолчанию
Вид ссылок при использовании другого способа.
Обратите внимание на небольшой отступ у подчеркивания, который смотрится интересней.
Первая ссылка создана с помощью свойства нижней рамки и внутреннего отступа 1px для небольшого улучшения внешнего вида. Обратите внимание, текст меняет цвет при наведении указателя мыши, но цвет подчеркивания не меняется.
Код для первой ссылки:
a { text-decoration: none; border-bottom:1px #75abea solid; padding-bottom: 1px; }
Вторая ссылка создана примерно так же, как первая, но с ее помощью становится видно, что цвет текста и подчеркивания при наведении указателя мыши можно задавать раздельно.
Код для второй ссылки:
a:hover { color: green; border-bottom: 1px solid red; }
Внешний вид третьей ссылки создан с помощью только фонового изображения.
Код для третьей ссылки:
a { text-decoration: none; background: url(link-line.gif) repeat-x 0 100%; padding-bottom: 1px; }
Если задать фону расположения по оси X 0, а по оси Y 100%, фоновое изображение будет расположено в самом низу текста, а если добавить внутренний отступ 1px, то расстояние между текстом и фоновым изображением станет 1px.
Так как часть людей отключают изображения, например, для экономии трафика, то использование свойства нижней рамки для создания подчеркивания может быть предпочтительней. Но использование фонового изображения дает нам больше возможностей для создания уникальных стилей и создания эффектов, как показано в примере на четвертой ссылке, в которой к используемому изображению применен градиент. Также возможно задать стили для состояния ссылки при наведении указателя мыши с помощью изображения.
Посмотрите, как работают все четыре ссылки и их код CSS в подробностях:
Автор урока Volkan Görgülü
Перевод — Дежурка
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
26 декабря 2020 в 23:04
x2UIaU myyedxbwgvky, [url=http://mohhirpdgxph.com/]mohhirpdgxph[/url], [link=http://gduqecfyeqwo.com/]gduqecfyeqwo[/link], rukzvgrooyqb.com
Ответить
26 января 2021 в 15:09
1CQkl0 beeg.x.fc2.com
Ответить