Как сделать красивую ссылку?
Ниже приведен вольный перевод статьи от
Самый простой способ освежить ваш дизайн – изменить внешний вид ссылок.
Изменений стилей займет всего несколько секунд, но результат наверняка понравится посетителям вашего сайта. Ниже я приведу несколько примеров стилей для ссылок.
Спонсоры статьи: Ощутите волшебство Монако – это сказочное княжество, где предпочитают отдыхать самые яркие звезды шоу-бизнеса.
Мечтаете о роскошном свадебном путешествии? Поездка на экзотические мальдивские острова станет для вас лучшим подарком.
Новый конкурс для блоггеров и копирайтеров – «Июль-Август 2008». Приз за лучшую статью – 5000р.
А вы знаете, что трубочный табак Peterson имеет вкус ванили и пряного красного вина? Интересные статьи для настоящих ценителей табака на Pipeblog.ru
1. Цвет, подчеркивание – это самый привычный для нас вид ссылок на большинстве сайтов. Цвет выделяет ссылку из обычного текста, а подчеркивание даст понять пользователям, что это ссылка.
a {color: #0000ff; text-decoration:underline; }
2. Цвет, без подчеркивания – подчеркивание не всегда обязательно, иногда достаточно выделить ссылку цветом, чтобы не отвлекать внимание пользователя от чтения статьи, заставляя его переходить по ссылкам.
a {color:#0000ff; text-decoration:none;}
3. Жирный текст, подчеркивание – если у вас минималистический дизайн, то такая ссылка прекрасно впишется в ваш шаблон. Жирный текст и подчеркивание выделит ссылку из текста и станет хорошим дополнением к вашему дизайну.
a {font-weight:bold; text-decoration:underline; }
4. Мелкий шрифт, подчеркивание – маленькие буквы еще один хороший способ выделить вашу ссылку. А подчеркивание опять же даст понять пользователю, что это ссылка, а непросто необычно выделенный текст.
a {font-variant:small-caps; text-decoration:underline; }
5. Подчеркивание штрихами – мы привыкли, что ссылка подчеркнута сплошной линией. Подчеркивание штрихами придаст нашей ссылке необычный стиль ипользователям обязательно захочется узнать, что скрывается под этой ссылкой.
a {border-bottom: #000000 1px dashed; text-decoration:none;}
6. Цветной фон, подчеркивание – Выделение ссылки текстом более привычно, чем выделение фона ссылки, поэтому такой эффект непременно привлечет внимание пользователя и заметно обновит дизайн. А подчеркивание ввиде границы не собъет пользователя с толку и он сразу поймет, что это ссылка.
a {background:#a6d4ff; border-bottom:#99c4d5 1px solid; text-decoration:none;}
Эффекты при наведении на ссылку так же важны, как и, например, присуствие заголовка у статьи. Пользователь привык, что если он наводит на ссылку, то ее стиль меняется, что дает ему понять, что ссылка активна.
Вот несколько советов, какие эффекты лучше всего применить:
1. Удаление/добавление подчеркивания – самый привычный и эффективный способ указания активной ссылки.
2. Изменение цвета – лучше всего менять цвет на более контрастный, чтобы была заметна разница в смене цвета с одного на другой. Также можно менять и цвет фона.
3. Не меняйте жирность и наклон текста – это повлияет на отображение всего текста, т.к. измениться форматирование, а значит и ширина слова. Текст просто будет скакать, что не очень приятно.
А какой стиль обычно используете вы? Если я что-то упустила, пишите в комментариях :)
Dmoz
конечно же упустила как всегда!
см. на этой странице , в правом столбце, в блоке “что говорят”, ссылки синего цвета.
борянЦитировать
Обычная ссылка без подчеркивания, при наведении меняется цвет фона – это есть в статье. В вашем примере только добавлен эффект js.
АвторЦитировать
вот-вот, прикольный эффект js для включения в статью. Ведь “Эффекты при наведении на ссылку так же важны, как и, например, присуствие заголовка у статьи.”
борянЦитировать
но суть то эффекта остается – меняется цвет :) Как именно он меняется – фантазия разработчика.
Не спорю, эффект интересный, только вот с отключенным JS работать не будет.
АвторЦитировать
Считаю, что не хорошо задавать ссылкам border dashed, если только у этой ссылки не стоит return false и какой-то js по клику. Надо всётаки приучивать людей, что пунктирное подчёркивание это действие без перезагрузки страницы
R.M.Цитировать
Полностью поддерживаю. Более того, ссылка без подчеркивания, а просто выделенная, например, цветом — тоже далеко не лучший вариант.
Андрей ЛосьЦитировать
Да, а картинка, кстати очень красивая )))
SanyaЦитировать
Совершенно верно. Подчёрнутая пунктиром ссылка — это яваскрипт-хэндлер.
#1313Цитировать
хехе, а на страницах своего блога я через статью борюсь за то, чтобы ссылки просто выделяли цветом шрифта и подчеркивали сплошной линией (за исключением AJAX-линков)…
Денис СудилковскийЦитировать
А вот, что делаю я, и что мог бы делать ;)
1. border: dotted 1px yellow; – добавив такой стиль в a:visited (как в моей текущей работе) или же в a:hover (а можно и туда и сюда), получим пунктирную рамку. Поди плохо?
Я думаяю, понятно, что количество пикселов и цвет можно менять в зависимости от цветовой палитры страницы и других потребностей.
2. мне кажется, что если, к примеру, забабахать анимированный gif с нужным тебе для линка словом, в котором что-то будет происходить при наведении: буковки медлено и по одной выключаться-включаться, те же буковки по одной немного размер изменять, опять же буковки все вместе слегка вибрировать и т.д., то можно вполне остаться в пределах допустимых правилами web-юзабилити :)
Да, по многим причинам возится с картинками – геморрой! Но что не сделаешь ради искусства… :)
Но всегда не забыавайте протестировать все свои нововведения на реальных (лопоухих) пользователях. Они же к Вам на сайт не задачки отгадывать приходят!
NiqЦитировать
Привет, Денис!
Как-то даже собирался выиграть конкурс, который Вы объявили в своём блоге (), но не дошли руки что-нибудь запостить… :) Кстати, а кто победил, я что-то не понял?
Ну вот появилось немного времени, и я, с Вашего позволения, позволю себе типа критику.
Открываем книгу “Web-дизайн: удобство использования web-сайтов” (“Вильямс”, 2007) на 108 странице. На ней Якоб Нильсен (или его эффектная соавторша Хоа Лоранжер):
“ВЫДЕЛЕНИЕ ССЫЛОК ЦВЕТОМ
Раньше авторы этой книги настоятельно рекомендовали дизайнерам использовать синий цвет для оформления ссылок, поскольку пользователи уже привыкли ассоциировать именно его с объектами, которые активизируются с помощью щелчка мыши. Но сегодня посетители web-сайтов привыкли и ко многим другим цветам. Главное, чтобы ссылка чётко выделялась на фоне остального текста и меняла цвет после того, как ею воспользуются.”
Скажу честно – я никогда не любил синих ссылок с подчёркиванием. С точки зрения функционала сайта понимал, зачем такие нужны, а визуально обламывался…
И Нильсен для меня авторитет! Поэтому, если уж он даёт добро на цвет и оформление ссылок, то грех этим не воспользоваться!
Ваш блог в серых тонах, я бы все ссылки оформил бы болдом. Может быть с лёгким-лёгким цветным фончиком. Убрал бы болд из всех других мест, чтобы избежать неоднозначности. И всё подчёркивание туда же – на фиг – не люблю я его :)
С заголовками немного бы тоже поколдовал – с их цветами и кликабельностью. Трогать/Нажимать на красные кнопки/ссылки и т.д. среднестатическому человеку психологически некомфортно… Многих это реально напрягает! Опасность, все дела… :)
В Вашем случае цвет при наведении хоть и не ярко красный (кирпичный типа), но всё равно, я как-то ёжусь инстинктивно…
А вот то, что клик по заголовку статьи (уже на странице самой статьи) просто перегружает страницу саму на себя – это Вы вообще зря! :) Дедушка Нильсен очень не советывал делать такие вещи ещё в 2000г.
Если последовать соим советам (о цвете ссылок), то получим более современно выглядящий блог и более комфортный в использовании, что немаловажно!
PS Лебедев делает ссылки синие и с подчёркиванием. Конкретно это мне у него и не нравиться…
PPS Если возникнет желание, можем продолжить дискуссию на вашем блоге, чтобы не занимать чужого дискового пространства.
Niq`Цитировать
Цвет ссылки необязательно делать синим – это просто как пример, как и в оригинале статьи.
Блог в серых тонах? хм… мне кажется основной цвет это синий. Цвет обычных ссылок синий. Шапка синяя, фон темно синий..
Цвет заголовков – вы первый, кто побоялся кирпичного цвета :) Подумаю над этим.
Спасибо за критику.
АвторЦитировать
В наше время подчеркивание ссылок пунктиром обозначает динамический контент (сменяющийся без перезагрузки страницы). Использовать такое подчеркивание для обычных ссылок нежелательно — тем самым вы обманываете и расстраиваете пользователя.
Ярослав ПатрикеевЦитировать
Мунуточку! “Автор”, как я понимаю, это Вы, Ольга – хозяйка этого блога. А критиковал я блог Дениса Судилковского. Это он в серых тонах…
У Вас, впрочем, тоже ссылки с подчёркиванием и голубые-голубые такие… :)
NiqЦитировать
тогда все ясно :) Ссылки с подчеркиванием привычны для пользователей, зачем заставлять их думать ;)
АвторЦитировать
Но если пользователя можно порадовать более приятным для глаза дизайном (цветовой гаммой), не заставляя при этом думать, куда нажимать, разве это плохо?
Просто это немного сложнее делается – дизайнер/верстальщик должен, само сабой, уметь располагать любой текст максимально удобным для чтения образом.
И при этом не использовать подчёркнутый текст вообще, для того чтобы не срабатывали привычки пользователя…
PS Текст у Вас в комментах то слипается, то не слипается… Что-то не пойму…. А “” тут работает? Щас попробую.
NiqЦитировать
Всмысле слипается? Перевод на новую строку действует как <br> а два перевода – это абзац.
АвторЦитировать
Попытка №2 (Из Opera92.4)
Первая строка, первая строка, делаю два перевода…
Вторая строка, вторая строка, вторая строка.
NiqЦитировать
Но я хотел получить результат как в моём посте от 20.07.2008 в 15:13 Там все абзацы визуально друг от друга отделены… Кстати, в той же Opera9.24 делалось.
Niq`Цитировать
немного подправила стили. В вашем комментарии 21 Июль 2008 в 3:51 уже есть визуальное разделение на абзацы. Просто чтобы их увидеть нужно перезагрузать страницу.
АвторЦитировать
Ссылку конечно не обязательно выделять синим, но народ явно привык к синим сслкам
viktor_zЦитировать
Нет, Ольга, перезагружай или не перезагружай страницу, а результат я вижу следующим – в моём посте от 20.07.2008 в 15:13 и, допустим, от 20 Июль 2008 в 22:08 # или
от 21 Июль 2008 в 3:51 # расстояния между абзацами отличаются!
При этом я и там и тут (и вообще всегда) вставлял одну пустую строку для визуальной разбивки текста…
Мои мысли по этому поводу: пост от 20.07.2008 в 15:13, который на сером фоне, – типа родительский. Остальные посты – дети (на желтоватеньком). Может тут косяк зарыт?
А, вообще, где у Вас тут на блоге место для предъяв? :)
А то бедный Денис Судилковский, когда в своём посте нашу с Вами оффтопную “пургу” прочтёт, может и обидется… И жёстко всех забанит! :)
Niq`Цитировать
Для Niq:
Вы правильно заметили – синий фон комментария означает что он самый главный в иерархии, а остальные уже чередуются на желтом и белом фонах. Разница в отступах есть, но визуально абзацы различимы.
Место для предъяв.. Пока это только личная почта, либо icq :)
Денис надеюсь на нас не злиться ))
АвторЦитировать
Понравился 5ый и 6ой вариант. Но в блоге использую другой…У кого-то подсмотрю, немного переделаю – вуаля! Что действительно н естоит делать – так это добавлять наклон при наведении – текст скачет, порой и верстку задевая, если линка длинная.
MexxЦитировать
Вообще, откровенно говоря, комментарии тут гораздо занятней самих сообщений. (Не в обиду автору, конечно :))
СветикЦитировать
Ну это Вы, Светик, зря… Тема ссылок всегда была актуальна в нашей стране.
Не верите? А это Вас не убедит ?
Niq`Цитировать
Ольга, скорей делайте специальное место для предъяв, и я Вам обещаю его топовый рейтинг!
Пусть даже и одними моими постами… :)
Niq`Цитировать
Топовый ретйнг предъяв потому что все плохо? :)))
АвторЦитировать
Потому, что в жизни нет совершенства… И при желании, даже в чём-либо очень хорошем можно найти недостатки… И надо не лениться это делать! :)))
Вас, к примеру, полностью устраивает движок, на котором сделан Ваш блог? Не таитесь, огласите свою позицию в этом пикантном вопросе! :)
Мне было бы интересно в начале операции “предъява” разобраться, где Ваши упущения, а где движок накосячил… А Вам?
Niq`Цитировать
Нужно стремиться не к совершенству, а к тому, что бы всем было хорошо и это не обязательно что-то идеальное ;)
Не совсем поняла причем тут движок. Предъявы же вы хотите писать конкретно по тому как сделан сайт, а не потому, что он сделан на WordPress. Да, движок не идеален, но меня вполне устраивает существующий функционал.
АвторЦитировать
Нет, Ольга, надо стремиться к совершенству, а плохо получиться само собой… Вы и без меня об этом знаете, я уверен!
Все лучшие вещи в мире (по моему ощущению) делали перфекционисты. Просто у них иногда не всё получалось так, как они хотели… :)
А сделать всем хорошо – утопия… Угодить всем абсолютно всё равно не получиться, и не пытайтесь даже!
Чётко сформулируйте, для кого Вы этот блог создали и что эти люди ( по Вашему мнению) хотят увидить/сделать
на нём.
Напишите, наконец, дисклеймер, где укажите проблемы, которые Вы пока не можете решить, но знаете, что посетители от них не кайфуют…
Заведите то самое “место для предъяв”, где Вам такие как я будут подбрасывать уголька время от времени….
И тогда может оказаться, к примеру, что движок на wordpress – неверный выбор в вашем случае. И то, что им многие пользуются уже больше не будет для Вас существенным аргументом…
А там, глядишь, переосмысление всего сделанного/написанного наступит ;)
И благая цель (+ ещё и разумная!) – заставить вашего посетителя поверить, на вашем блоге о нём действительно заботятся, а не просто всяческой инфой кормят…
Немного побродив по блогам со сходной тематикой, понимаешь – инфы у всех предостаточно.., её качество, правда, не всегда высокое…
А вот кайфануть от них что-то не получается… :(
Niq`Цитировать
Сообщество форекс трейдеров. Аналитика, прогнозы, фундаментальный и технический анализ. Валютные пары и CFD. Ежедневный анализ рынка форекс. Обзор брокеров
fxtalkЦитировать
мне нужно чтоб моя картинка вобще не выдилалясь как ссылка как тут есть навигация по сути картинку но они не выделенны! как и мне так сделать!
SantiЦитировать
Santi,
не поняла вашего вопроса… Ссылка не появилась.
Блог для вебмастеровЦитировать
сори( как на сайте sv.my1.ru сверху там есть ссылки программы , форум и тп!
SantiЦитировать
Там просто прописан фон у ссылки. Пример:
a { background:url(image.jpg) repeat top left; text-decoration:none; color:#000; line-height:_высота картинки_ }Блог для вебмастеровЦитировать
Автор Подскажите пожалуйста как сделать подчёркивание ссылок при наведении
ГригорийЦитировать
a:hover {text-decoration:underline}Блог для вебмастеровЦитировать