5 эффектов для псевдо класса :hover

Эффекты при наведении курсора мыши на объект придают любому сайту динамичный и живой вид. Обычно для них используется код JavaScript, но с наступлением CSS3 можно уже использовать только средства стилей.

Приведенные в данном материале эффекты работают в современных браузерах. Поддержка IE зависит от версии и перед применением в реальном проекте надо провести тщательное тестирование.

Ссылки на демонстрационные материалы находятся под картинками.

 

Подёргивание вверх

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

Его очень просто сделать. Для каждого элемента определяется поле и при наведении курсора мыши размер поля уменьшается. Начальное значение поля 15px, уменьшается оно до 2px, что заставляет изображение "подпрыгивать вверх". Данный эффект можно использовать и для текста в списке.

Свойство transition используется здесь в качестве дополнения, так как эффект отлично выглядит и без него. Оно придает гладкости эффекту.

CSS

.ex1 img{
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
 
.ex1 img:hover {
    margin-top: 2px;
}



 

Масштабирование

При наведении курсора мыши каждое изображение медленно увеличивается в размерах, а при потере фокуса - возвращается к своим оригинальным размерам.

Для данного эффекта используется набор изображений размером 400х133 px. Затем они уменьшаются в размерах в коде CSS до 300х100 px и расширяются при наведении курсора мыши. Используется центрирование по горизонтали, и изображение с новым размером может все испортить, поэтому применяется отрицательное значение поля равное половине ширины.

CSS

#container {
	width: 300px;
	margin: 0 auto;
}
 
#ex2 img{
    height: 100px;
    width: 300px;
    margin: 15px 0;
     -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
 
#ex2 img:hover {
	height: 133px;
	width: 400px;
	margin-left: -50px;
}

 

Проявляющийся текст

Данный эффект очень напоминает использование JavaScript, когда при наведении курсора мыши на один объект проявляется другой. Для его получения изображение и текст помещаются в один контейнер div, а затем все смещается влево, чтобы оба элемента находились на одном уровне. Затем применяем свойства color: transparent и line-height: 0px для элемента div. Таким образом текст помещается вверх элемента div и скрывается.

Для проявления текста при наведении курсора мыши, мы просто изменяем цвет и высоту строки. Так создается эффект масштабированного проявления текста.

CSS

#ex3 {
	width: 730px;
	height: 133px;
	line-height: 0px;
	color: transparent;
	font-size: 50px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	   font-weight: 300;
	text-transform: uppercase;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
 
#ex3:hover {
	line-height: 133px;
	color: #575858;
}
 
#ex3 img{
	float: left;
	margin: 0 15px;
}


 

Наклон изображения

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

Для данного эффекта используется много новых, специфичных для конкретного браузера свойств CSS, поэтому использование в старых браузерах не пройдет. Галерея использует тени, переходы и трансформации.

Если есть желание еще более разнообразить эффект, то можно исопльзовать псевдо селекторы для вращения иззображений под разными углами и в разные стороны.

CSS

#ex4 {
	width: 800px;
	margin: 0 auto;
}
 
#ex4 img {
	margin: 20px;
	border: 5px solid #eee;
	-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
 
#ex4 img:hover {
	-webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
}

 

Свечение и отражение

Это замечательный и сложный эффект. Изначально изображения имеют небольшую прозрачность.Затем, когда на него наводится курсор мыши, прозрачность полностью убирается, появляется свечение вокруг и отражение (только для браузеров Webkit).

CSS

#ex5 {
	width: 700px;
	margin: 0 auto;
	min-height: 300px;
}
 
#ex5 img {
	margin: 25px;
	opacity: 0.8;
	border: 10px solid #eee;
 
	/*Трансформацияя*/
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
 
	/*Отражение*/
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
 
 
#ex5 img:hover {  
   opacity: 1;
 
   /*Отражение*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
 
   /*Свечение*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}


Заключение

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

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ilDzfoSb-60/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

5 эффектов для псевдо класса :hover | | 2012-06-19 12:08:17 | | Статьи Web-мастеру | | Эффекты при наведении курсора мыши на объект придают любому сайту динамичный и живой вид. Обычно для них используется код JavaScript, но с наступлением CSS3 можно уже использовать только средства | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: