Здравствуйте, уважаемые читатели
kamorka.ucoz.com! В этой статье подготовлены
15 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из
HTML разметки и
стилей CSS. Вам остается только скопировать и добавить в свой исходный код. Чтобы увидеть их в действии посетите демонстрационную страницу.
Установка
Перед тем, как приступить к созданию отдельных демонстраций, вот кусочек
CSS, который устанавливает базовые правила для изображений.
Код
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #333;
}
.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;
}
border-box означает, что высота и ширина блоков с изображениями будут включать в себя значения полей и границ, а
класс pic является общим для всех изображений. Ограничивает высоту, ширину, задает границу и тень. И что самое важное содержимое (т.е. изображения) этого блочного элемента, будет отображаться только внутри, за пределы не выйдет свойство
overflow :
hidden.
Масштабирование и панорамирование
Наша первая группа эффектов включает в себя использование нескольких трюков с масштабированием и перемещением изображения.
Увеличение
Для начала мы сделаем так, что когда пользователь наводит курсор на изображение фотография увеличивается, оставаясь в пределах своих границ. Вот
HTML:
Код
<div class="grow pic">
<img src="http://lorempixel.com/400/400/people/9" alt="portrait">
</div>
Как Вы можете видеть здесь мы используем два класса pic и grow. Базовый pic который задает размер изображения и границы. Теперь давайте посмотрим,
CSS.
Код
/*GROW*/
.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;
}
Само по себе изображение
400х400px, но мы его подгоняем под размеры блока
300x300px и указываем
transition свойство, означающее что другие свойства будут изменяться плавно в течении одной секунды, подробно про
transition. Так как нам необходимо увеличение изображение то при наведении оно возвращается к исходным размерам.
Уменьшение
Это абсолютно противоположный эффект. Изначально изображение в полноценном размере, а при наведении уменьшается до
300х300px. таким образом создается эффект сжатия.
Код
<div class="shrink pic">
<img src="http://lorempixel.com/400/400/nightlife/4" alt="city">
</div>
Код
/*SHRINK*/
.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;
}
Черно-белое изображение
С помощью этого фильтра, добьемся эффекта черно-белого изображения.
Код
<div class="bw pic">
<img src="http://lorempixel.com/300/300/nature/2" alt="sea">
</div>
Код
/*B&W*/
.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%);
filter: grayscale(100%);
}
Здесь я установил оттенки серого (
grayscale) со значением
100%. Процент оттенков серого можно понизить
Сепия
Еще один ретро эффект) перевод цветного изображения в тональность сепия.
Код
<div class="sepia pic">
<img src="http://lorempixel.com/output/people-q-c-300-300-4.jpg" alt="people">
</div>
Код
/*SEPIA*/
.sepia 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;
}
.sepia img:hover {
-webkit-filter: sepia(100%);
}
Значения фильтров сепия и оттенки серого указаны в процентах, где
100% является максимальным. Если не указывать число то
100% будут применены по умолчанию.
Прозрачность
Наверное самый распространенный способ манипуляции с цветами изображения, так это добавление прозрачности. Теперь и с помощью
CSS3. Вынес его в отдельный раздел в связи с одной особенностью, о ней ниже.
Код
<div class="opacity pic">
<img src="http://lorempixel.com/output/sports-q-c-300-300-6.jpg" alt="soccer">
</div>
Код
/*OPACITY*/
.opacity 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;
}
.opacity img:hover {
-webkit-filter: opacity(25%);
}
Значение прозрачности в фильтре задается опять таки процентами, где
100% это не прозрачно, а
0% полностью прозрачно. Особенность использования прозрачности заключается в том, что его можно использовать как обычное свойство
CSS, а не только как фильтр. Соответственно и работает такой эффект во всех браузерах, даже в
IE9+.
Код
img {
opacity: 0.5;
}
При таком варианте использование значение берется из интервала от
1 до
0.
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
