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

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

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

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

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

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

a{   color: #fff;   }  a:hover {   color: #fff;   text-shadow: #0CF 0 0 4px;   }

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

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

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

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

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

Код css:

a {   opacity: 0.3;   -webkit-transition: opacity 1s linear;   -o-transition: opacity 1s linear;   -moz-transition: opacity 1s linear;   }   a:hover {   opacity: 1;   }

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

-webkit-transition: opacity 1s linear;

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

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

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

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

a {   color: #000;   -webkit-transition: color 1s linear;   -o-transition: color 1s linear;   -moz-transition: color 1s linear;   }   a:hover {   color: red;   }

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

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

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

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

a{   -webkit-transition: border 1s linear;   -o-transition:border 1s linear;   -moz-transition:border 1s linear;   border: 1px solid #fff;   }  a:hover {   border: 1px solid #000;   }

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

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

a{   color: #000;   background: #fff;   }  a:hover {   color: #fff;   background: red;   }

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

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

a{   color: #000;   background: #fff;   border: 5px solid #fff;   border-radius: 10px;   }  a:hover {   color: #fff;   background: red;   }

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

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

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

a{   text-transform: none;   }  a:hover {   text-transform: uppercase;   }

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

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

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

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

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

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

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

a{   font-weight : normal;   }  a:hover {   font-weight : bold;   }

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

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

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

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

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

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