Блог старого компьютера

Блог старого компьютера


Главная html & css CSS эффекты для изображений

CSS эффекты для изображений

06.03.2013 03:13 Администратор html & css
Печать PDF
Сегодня рассмотрим несколько css свойств для работы с изображениями. Думаю для вашего глаза они давно не новы так как возможно в интернете вам уже удалось их лицезреть. В основом покажу свойства на примере их изменения при наведении. Ранее подобные эффекты можно было реализовать тольео с помощью javascript.  Извращаться мы будем над изображением тюнингованного автомобиля. Его вы видите чуть выше.  

 

Эффект №1 Поворот изображения при наведении

 

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

<style>
.rotate:hover{
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
 -o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}
</style>
<img class="rotate" src="/i.jpg">

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

Эффект №2 Цветное изображение при наведении

 <style>
.gray{
-webkit-filter: grayscale(100%);
}

.gray:hover{
-webkit-filter: grayscale(0%);
}
</style>
<img class="gray" src="/i.jpg">

В данном случае будем картинку обесцвечивать при помощи использования фильтра, а при наведении будем возвращать им цвет. Этот эффект как и прошлый можно использовать не только с изображениями, но и с блоками. Данный эффект будет работать только в браузерах которые были разработаны на движке webkit  кним относится к примеру Google Chrome. С другими браузерами беда для них фильры я не нашел, вот для ie есть фильтры но их я не рассматриваю. Так же с помощью данного фильтра можно придать размытие, серпию, инверсию, осветление, затемнение изображению и многое другое, об этом я думаю вы почитает в документации.

 Эффект №3 Анимированный поворот изображения на 360 градусов при наведении

<style>
.circle {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.circle:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<img class="circle" src="/i.jpg">

Данный эффект доволно интересный, при наведении на изображение осуществляется анимированный поворот изображения на 360 градусов.  Работает данный пример во всех современных браузерах. Работает он так же с блоками. Если взять квадратное изображение и скруглить у него углы то получится круг который будет еще интересней вращаться. Эффект плавной анимации достигается с помощью свойства transition: all 0.5s ease; с помощью которого можно изменить скорость анимации. Это свойство можно добавить и в первый эффект тогда и он будет выполнятся с анимацией.

Эффект №4 Плавное увеличение изображения

<style>
.increase {
width: 167px;
height: 100px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.increase:hover{
width: 267px;
height: 200px;
}
</style>
<img class="increase" src="/i.jpg">

 Данный эффект выполняет увеличение изображения при наведении. Исходно показываем уменьшенное изображение а при наведении показываем его в реальном размере. Для плавности увеличения я использовал свойство transition: all 1s ease; По сути его можно использовать практически везде так сказать это некая альтернатива функции animate в jquery. Таким образом можно не только увеличивать изображение, но и уменьшать так же сдвигать. О том как сделать сдвиг покажу в следующем эффекте.

Эффект №5 Плавное движение изображения

<style>
.margin {
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}

.margin:hover{
margin-left: -200px;
}
</style>
<img class="margin" src="/i.jpg">

Эффект представляет плавное движение изображения на 200 пикселей влево. Данный эффект как и остальные можно использовать не только с изображениями. Так же как и остальные эффект работает во всех соверменных браузерах. Подключив смекалку можно добится довольно интересных эффектов с помощью таких движений.

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

Комментарии  

 
0 #2 fixbob 07.07.2014 16:09
Спасибо - хорошая статья
Цитировать
 
 
+1 #1 ваня 27.03.2013 12:17
:D спс
Цитировать
 

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


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

Поиск

Голосование

Что Вы думаете на счет битрикса?