И еще 30 CSS эффектов при наведении

5 ноября 2015 Антон Кулешов 2136 0

Здравствуйте дорогие читатели! Наступило время пополнить коллекцию сайта ещё 30-тью красивыми CSS эффектами при наведении курсора на изображение. Данная тема поистине очень обширна и мы не устаем пополнять нашу библиотеку все новыми и новыми эффектами.

Реклама

Сегодня мы будем использовать CSS/CSS3 библиотеку, которая состоит из 2-ух наборов. Каждый из них находиться в отдельном файле set1.css и set2.css. Переходим на страницу демо, чтобы воочию удостовериться, о чём я веду речь – классные эффекты, не так ли? Скажу честно, самому не приходилось использовать ничего из предложенных вариантов, но это хорошо проработанные и, главное, красивые CSS эффекты, которые рано или поздно найдут пристанище в одном из проектов. К примеру: эти эффекты при наведении просто отлично будут смотреться в привью статей блога или новостного сайта.

Приступим. Всё по порядку.

Во-первых, подключаем стили с эффектами из первого набора:

<link href="css/set1.css" type="text/css" rel="stylesheet" />

Далее, не забываем добавить шрифты с иконками, которые находятся в папке fonts к себе в проект.

Теперь добавляем разметку:

<div class="grid">
	<figure class="effect-lily">
		<img src="img/12.jpg" alt="img12"/>
		<figcaption>
			<div>
				<h2>Ваш <span>заголовок</span></h2>
				<p>Подробное описание</p>
			</div>
			<a href="#">Подробнее</a>
		</figcaption>
	</figure>
</div>

Тут элемент с class=grid является обёрткой для картинки с эффектом effect-lily. Внутри элемента figure добавляем своё изображение, а также описание к нему. Вот собственно и всё, использование второго набора происходит по аналогии, как в этом примере.

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

О том, как запретить индексацию тегами и атрибутами

4 июля 2015 ti1schweiger

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

Разбираемся, как сделать бегущую строку на сайте

21 января 2015 Антон Кулешов

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

Делаем подгрузку контента при прокрутке страницы

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

В настоящее время на многих сайтах можно увидеть динамически подгружаемый контент при прокрутке страницы. Этот эффект стал одной из хороших альтернатив обычной постраничной навигации. Хотя и у него есть свои недостатки, но удобство этого способа их компенсирует. Из этой статьи вы узнаете, как реализовать такой функционал у себя в проекте используя jQuery плагин jScroll.