Сегодня 15 мая, среда

Какой рейтинг вас больше интересует?

получить код

Главная / Каталог блогов / Cтраница блогера Блог счастливого веб-разработчика / Запись в блоге

	Блог счастливого веб-разработчика Голосов: 1 Адрес блога: http://ridler-fun.livejournal.com/ Добавлен: 2010-12-26 16:27:55

Подчеркивание ссылок (text-decoration)

2010-12-11 07:46:59 (читать в оригинале)

Еще с самого начала развития Сети ярко-синий подчеркнутый текст сигнализировал: "Нажмите сюда и перейдете туда". Однако стандартные атрибуты подчеркивания и цветового оформления ссылок - это то, что в первую очередь изменяет любой веб-дизайнер. Подчеркивание - слишком распространенный способ выделения, который уже очень надоел. У нас есть возможность изменить ситуацию, одновременно обеспечив хорошее оформление ссылок.

Полное удаление подчеркивания. Чтобы убрать стандартное подчеркивание, используем свойство text-decoration со значением none:

   a : link { text-decoration: none; }

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

Добавление подчеркивания только при наведении на ссылку указателя мыши. Некоторые веб-дизайнеры убирают подчеркивание для всех ссылок, выделяют их каким то другим способом, а затем включают атрибут подчеркивания только при наведении указателя мыши. Чтобы обеспечить такой эффект, просто удалим подчеркивание ссылок, а затем повторно введем его в псевдокласс :hover:

a : link, a : visited
{
   text-decoration: none;
   background-color: #f00;
}

a : hover
{
   background-color: transparent;
   text-decoration: underline;
}

Использование свойства нижней границы. У нас есть возможность управлять цветом, толщиной или стилем стандартной линии подчеркивания ссылок, которое всегда отображается в виде линии толщиной 1 пиксел того же цвета, что и текст
Большего разнообразия можно добиться путем использования вместо подчеркивания свойства border-bottom
Скрыть обычное подчеркивание и добавить черту в виде пунктирной линии-границы можно следующим образом:

a : link
{
text-decoration: none;
border-bottom: dashed 2px #f55;
}

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

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

a
{
   text-decoration: none;
   background: url(umages/underline.jpg) repeat-x left bottom
   padding-bottom: 5px;
}

Тэги: decorate, text

Блограйдеров
14490
(+1 сегодня)

Блогов
219902
(+0 сегодня)

Сообществ
1309
(+0 сегодня)

ЖЖ все стерпит
по количеству голосов (152) в категории «Истории»

Категория «Поп звезды»

Взлеты Топ 5


+173	226	Наша жизнь просто прекрасна
+168	219	Little Showroom
+160	212	Heilig
+147	233	Ulanet.ru - Информационно-развлекательный сайт города Улан-Удэ
+17	29	КАТЯ ЧЕХОВА 2008

Падения Топ 5


-1	73	Список диет
-1	43	Диетические рецепты
-1	8	Nique
-2	7	anmak
-2	9	Vlad_Topalov

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.