21 эффект для ссылки

3 августа 2015 Антон Кулешов 2987 0

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

Реклама

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

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

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

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

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

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

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

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Как определить пользователя, зашедшего с телефона

3 октября 2014 Антон Кулешов

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

Ленивая загрузка картинок, используя jQuery

2 апреля 2016 Антон Кулешов

Важной частью работы любого сайта является скорость его загрузки у пользователя в браузере. Тут правило одно - чем быстрее, тем лучше. Оптимизировать проект не всегда возможно, и тут к нам на выручку приходят некоторые хитрости. Сегодня мы поговорим о «ленивой загрузке» картинок на сайте, и использовать будем jQuery плагин lazy load.

Lightbox от falbar или falbox

20 октября 2015 Антон Кулешов

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