Набор эффектов при наведении CSS — изображения при наведении CSS

Набор эффектов при наведении CSS Прошлый месяц был связан с уроками о возможностях CSS3. На какое-то время оставим те уроки и хочу вам показать готовые фишки, которые нужно лишь взять и применить на своём сайте. Надеюсь вы знаете такую фразу Простота залог успеха. Я ее услышал давно от друга дизайнера и она сильно мне запомнилась, но раньше я не придавал ей значения. А сейчас прекрасно понимаю, что чем проще дизайн сайта (ну не прям белый лист, хотя и здесь нужно смотреть 😉 ), тем проще посетителям разобраться что и где находится. В связи в с этим мы рассмотрим эффекты при наведении CSS. Мне очень нравятся такие эффекты. Смотрите 30 вариантов эффектов по ссылке ниже:

Посмотреть примерСкачать

Все статьи, которые связи с эффектами при наведении CSS на моём сайте, которые я писал раньше:

  • CSS3 библиотека — 40+ эффектов при наведении
  • Потрясающие эффекты CSS3 при наведении
  • Оригинальный эффект CSS3 при наведении на…

Установка по шагам

К примеру мне понравился первый вариант из первого набора. img12

Ваш заголовок

Подробное описание Подробнее img1

Ваш заголовок

Подробное описание Подробнее Вы видите как он выглядит. На этом примере я хочу показать как применить эти эффекты на вашем сайте.

Шаг 1 HTML при наведении

Сейчас нужно открыть файл index.html (если вам понравился эффект из первого набор) или index2.html (если из второго) и найти в HTML коде тег &lt,h2&gt,Вариант НОМЕР&lt,/h2&gt,, где НОМЕР это понравившийся вам вариант. Затем скопировать всё, что ниже это тега, то есть блок &lt,div&gt, и классом grid. Вот какой получился у меня:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 &lt,div class=grid&gt, &lt,figure class=effect-lily&gt, &lt,img src=img/12.jpg alt=img12/&gt, &lt,figcaption&gt, &lt,div&gt, &lt,h2&gt,Ваш &lt,span&gt,заголовок&lt,/span&gt,&lt,/h2&gt, &lt,p&gt,Подробное описание&lt,/p&gt, &lt,/div&gt, &lt,a href=#&gt,Подробнее&lt,/a&gt, &lt,/figcaption&gt, &lt,/figure&gt, &lt,figure class=effect-lily&gt, &lt,img src=img/1.jpg alt=img1/&gt, &lt,figcaption&gt, &lt,div&gt, &lt,h2&gt,Ваш &lt,span&gt,заголовок&lt,/span&gt,&lt,/h2&gt, &lt,p&gt,Подробное описание&lt,/p&gt, &lt,/div&gt, &lt,a href=#&gt,Подробнее&lt,/a&gt, &lt,/figcaption&gt, &lt,/figure&gt, &lt,/div&gt,

Сейчас у нас есть структура. Осталось подключить необходимые стили.

Шаг 2 CSS

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

set1.css если понравился первый набор.
set2.css если понравился второй набор.

Между тегами &lt,head&gt,&lt,/head&gt, подключаем выбранный CSS файл:

1 &lt,link href=css/set1.css rel=stylesheet type=text/css /&gt,

Но это еще не всё! Так как в нескольких примерах есть иконки, а я думаю и они вам также понравятся. Чтобы появились иконки, вам необходимо скопировать папку font-awesome-4.2.0 в папку fonts вашей темы. А затем подключить между тегами &lt,head&gt,&lt,/head&gt,:

1 &lt,link href=fonts/font-awesome-4.2.0/css/font-awesome.min.css rel=stylesheet type=text/css /&gt,

Это самая простая установка, что только может быть. Уверен вы справитесь!

Вывод

Эти эффекты мне нравятся больше, чем просто изменение цвета при наведении на ссылку. Но здесь дело вкуса. Этот набор эффектов при наведении CSS дает вам множество вариантов (30!) на выбор, которые вы можете применять на собственном сайте.

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: