Разное

Красивые ссылки css: Красивые ссылки на вашем сайте

01.09.2023

Эффекты для ссылок при наведении

О сайтеПравилаКонтакты

» Статьи » Разработка » 21 эффект для ссылки

  • Инструменты
  • Заработок
  • Раскрутка

03 августа 2015 . Антон Кулешов

Как оформить ссылку на сайте? Этот вопрос наверно один из самых простых, возникающих у веб-разработчика, тем более что до недавнего времени и вопроса, как такового и не было – редко кто менял даже стандартный набор цветов. Появление CSS3 внесло значительные изменения в «серые будни» и страницы «расцвели». Мы уже рассматривали ранее множество различных ховер эффектов, сегодняшняя же CSS библиотечка – заточена под ссылки, хотя, приведенные в ней эффекты легко можно применить и для других элементов страницы. Библиотека содержит следующие эффекты: ссылки при наведении вращаются, меняют перспективу, перестраивают бордеры, фиксируют взгляд, создают эффект куба, вызывают всплывающую подсказку, заключаются в скобки и много других причудливых выделений.

Если вы ещё не рассмотрели предложенные варианты ссылок в материалах демо, то не теряйте время и подберите себе что-нибудь. А ниже я опишу, как добавить к себе на страничку эту красоту.

Так как это CSS библиотека ею можно воспользоваться двумя способами:

  • Первый вариант — выковырять то, что вам нужно из CSS файла;
  • Второй вариант воспользоваться внутренними классами, о нём и пойдёт речь.

Для примера добавим немного ссылок в обёртке с class=cl-effect-номер_набора.

<nav>
 <a href="#">красивые ссылки</a>
   <a href="#">ховер эффекты у ссылок</a>
    <a href="#">оригинальные ссылки</a>
</nav>

Всё очень просто: в наборе всего 21 способ как оформить ссылки, у некоторых, к слову, есть возможность указать атрибут data-hover=заменяемый_текст. Если нужно создать 3D эффект — дополнительно в разметку, а именно внутрь ссылки, добавляется элемент span.

<nav>
    <a href="#">
        <span data-hover="Текст при наведении">
         Ещё одна интересная ссылка
      </span>
   </a>
  <a href="#">
        <span data-hover="Текст при наведении">
         Другая текстовка для ссылки
     </span>
   </a>
</nav>

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

#Эффекты при наведении #Кнопки

Waves — волна под курсором Делаем красивые чекбоксы в стиле IOS7 Социальные кнопки поделиться – пишем сами Умная кнопка прокрутки «Наверх и обратно» Adipoli – красивое представление ваших изображений

Комментарии не найдены

Видео на заднем фоне

Simple Text Rotator – спецэффекты для вращающегося текста

Популярное

1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы

Обратите внимание

Friendly URL (ЧПУ) и роутинг