WEBduty.ru css html javascript jquery

5 способов улучшить ссылки

Статья от 21.07.09 в категории CSS, jQuery
Теги: ссылки

При наведении курсора на ссылку она, как правило, меняет свой цвет, либо становится подчёркнутой. Это довольно скучно. Вот несколько способов улучшения ваших ссылок.

Border-bottom

Border-bottom лучше чем text-decoration: underline. Он не пересекает нижние части букв, например yjgр, что в некоторых случаях выглядит ужасно. Также вы можете использовать разные стили бордера. Например границу из точек или пунктира.
Пример:

a { border-bottom: dashed 1px #000; }
a:hover { border-bottom: solid 1px #000; }

Background

Вы можете использовать другой фон ссылки. Например в Wordpress ссылка Удалить становится красной при наведении, что говорит об опасности нажатия на неё.
Пример:

a {
color:red;
border-bottom: 1px solid red;
}
a:hover {
color:#fff;
background-color:red;
}

Ссылка с иконкой

Вы можете добавить к своей ссылке иконку, делается это очень просто:

a { background: #fff url('icon.png') no-repeat center left; }

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

Увеличение букв ссылки

Ещё можно увеличить буквы при наведение на ссылку

a:hover { text-transform: uppercase; }

Анимированные ссылки

С помощью jQuery можно сделать анимированные ссылки, например как здесь. Реализует этот эффект вот такой код:

$(document).ready(function() {  
    $('a.nudge').hover(function() {
        $(this).animate({ paddingLeft: '20px' }, 400);  
    }, function() {
        $(this).animate({ paddingLeft: 0 }, 400);  
    }); 
});

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

Постовой:
Звуковые наркотики, скачать звуковые наркотики.

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

Похожие статьи:

• 5 способов оптимизации CSS
• Делаем кнопку как в Skype с помощью jQuery
• Селекторы CSS. Часть первая.
• Великолепная галерея с помощью jQuery
• 10 полезных CSS приёмов