
Создаем класс для всех изображений
Изображение должны обязательно принадлежать классу pic. Он содержит информацию об расположении блока с изображением — float; о высоте и ширине блока — height и width; тип отображение, если изображении больше, чем размер блока — overflow, а также информацию об рамке — border, тени — box-shadow и отступе — margin. Полный CSS класса pic будет выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 |
.pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; } |
Масштабирование и панорамирование
Увеличение
Теперь к самим эффектам. Например, в эффекте «Увеличение«, HTML — код будет выглядеть так:
HTML
1 2 3 |
<div class="grow pic"> <img border="0" src="http://1.bp.blogspot.com/-13VSZrmIQyw/UhhoDaEgC9I/AAAAAAAAGIs/oxBNePz_aVo/s000/girl.jpeg" /> </div> |
где, class=»grow pic» выполняет подключение к обязательному классу pic и к своему эффекту grow. CSS будет иметь вот такой вид:
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*Увеличение*/ .grow img { height: 300px; width: 300px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .grow img:hover { width: 400px; height: 400px; } |
Сокращение в объеме
HTML
1 2 3 |
<div class="shrink pic"> <img src="http://4.bp.blogspot.com/-3M7MgqrqRfw/UhhoB6E-OwI/AAAAAAAAGIU/8w54W8rZLns/s000/city.jpeg" alt="city"> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*Сокращение в объеме*/ .shrink img { height: 400px; width: 400px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .shrink img:hover { width: 300px; height: 300px; } |
Боковое панорамирование
HTML
1 2 3 |
<div class="sidepan pic"> <img src="http://1.bp.blogspot.com/-sTY94AqZaPs/UhhoFqoQyMI/AAAAAAAAGI0/SmnsCkw7SgU/s000/kick.jpeg" alt="kick"> </div> |
Эффект бокового панорамирования должен применяться к прямоугольным изображениям горизонтального вида, потому что при наведении изображение будет делать сдвиг вправо.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*Боковое панорамирование*/ .sidepan img { margin-left: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } .sidepan img:hover { margin-left: -200px; } |
Вертикальное панорамирование
HTML
1 2 3 |
<div class="vertpan pic"> <img src="http://1.bp.blogspot.com/-OCi_1Jb2nN8/UhhoCRChZNI/AAAAAAAAGIc/ndLJqrMbOOU/s000/climb.jpeg" alt="climb"> </div> |
А вот эффект вертикального панорамирования применяться к прямоугольным изображениям вертикального вида, потому что при наведении изображение будет делать сдвиг вниз.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*Вертикальное панорамирование*/ .vertpan img { margin-top: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } .vertpan img:hover { margin-top: -200px; } |
Преобразования
Наклон
HTML
1 2 3 |
<div class="tilt pic"> <img src="http://4.bp.blogspot.com/-3QfVDLVQKyg/UhhoBMAY5aI/AAAAAAAAGII/nCseBq08Kwg/s000/car.jpeg" alt="car"> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*Наклон*/ .tilt { -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; } .tilt:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } |
Округление
HTML
1 2 3 |
<div class="morph pic"> <img src="http://1.bp.blogspot.com/-iQW0XOC57c8/UhhoGlXB43I/AAAAAAAAGJA/5tljT58aFRE/s000/sea.jpeg" alt="beach"> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*Округление*/ .morph { -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; } .morph:hover { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } |
Фокусирование
HTML
1 2 3 |
<div class="focus pic"> <img src="http://2.bp.blogspot.com/-lUMr0fZGQs4/UhhoAicL2AI/AAAAAAAAGIA/TQ_nh1RT-7s/s000/baseball.jpeg" alt="baseball"> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*Фокусирование*/ .focus { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .focus:hover { border: 70px solid #000; border-radius: 50%; } |
Фильтры Webkit
Расплывшиеся очертания
HTML
1 2 3 |
<div class="blur pic"> <img src="http://2.bp.blogspot.com/-5uNuklpf00g/UhhoACTie0I/AAAAAAAAGH8/V0MvkAqt-2E/s000/airplains.jpeg" alt="plane"> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 |
/*Расплывшиеся очертания*/ .blur img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .blur img:hover { -webkit-filter: blur(5px); } |
Обесцвечивание
HTML
1 2 3 |
<div class="bw pic"> <img src="http://2.bp.blogspot.com/-4M2ucdYdH0k/UhhoGb30DGI/AAAAAAAAGI8/oJx9BlfFBfY/s000/sea2.jpeg" alt="sea"> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 |
/*Обесцвечивание*/ .bw { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .bw:hover { -webkit-filter: grayscale(100%); } |
Полировка / яркость
HTML
1 2 3 |
<div class="brighten pic"> <img src="http://2.bp.blogspot.com/-54vP-i9Cgxc/UhhoC02MU1I/AAAAAAAAGIg/sh8WYeYTT2o/s000/dj.jpeg" alt="sea"> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*Полировка*/ .brighten img { -webkit-filter: brightness(-65%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .brighten img:hover { -webkit-filter: brightness(0%); } |
Money doesnt have to be the www.homework-writer.com spur or the genuinely rich members of our profession would not continue to write productively and well!