Пример работы 7 урок
Работа с иконками
Чтобы вставить иконки на сайт,необходимо подключить их, для этого перейдите по ссылке http://fortawesome.github.io/Font-Awesome/get-started/, скопируйте тег линк и разместите его в контейнер head
Все иконки здесь: http://fortawesome.github.io/Font-Awesome/icons/.
Эффекты для фото.
Попробуйте создать собственную галерию на странице galereya.html с фотографиями.
1. Переходи к эфектам первый эффект увеличение. Стиль:
/*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;
}
И между тегами <body></body> изображение к которому нам небходимо применить стиль:
<div class="grow pic"> <img src="gorod.jpg" alt="portrait"> </div>
Результат:
Само по себе изображение 400х400px, но мы его подгоняем под размеры блока 300x300px и указываем transition свойство, означающее что другие свойства будут изменяться плавно в течении одной секунды. Так как нам необходимо увеличение изображение то при наведении оно возвращается к исходным размерам.
2. Второй эффект Это абсолютно противоположный эффект. Изначально изображение в полноценном размере, а при наведении уменьшается до 300х300px. таким образом создается эффект сжатия.
Стиль:
/*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="shrink pic"> <img src="gorod1.jpg" alt="city"> </div>
3. Горизонтальное смещение, при наведении картинка смещается горизонтально в сторону.
<div class="sidepan pic">
<img src="gorod2.jpg" alt="kick"><br>
</div>
Стиль:
/*SIDEPAN*/
.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;
}
Все с помощью того же свойства transition мы плавно меняем, но уже свойство margin. При наведении смещаем картинку влево на 200px.
4. Вертикальное смещение аналогичен предыдущему:
<div class="vertpan pic"> <img src="gorod3.jpg" alt="climb"> </div>
И стиль:
/*VERTPAN*/
.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;
}
5. Еще один эффект используя свойство transform , создадим наклон изображения, небольшой поворот изображения в результате наведения курсора мыши, повернув изображение на десять градусов.
<div class="tilt pic"> <img src="gorod4.jpg" alt="car"> </div>
Стиль:
/*TILT*/
.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);
}
обратите внимание, что эффект нацелен на сам класс, а не на изображение.
6. Когда пользователь наводит на изображение, оно начинает вращаться. Пока изображение вращается, блок див трансформируется в круг.
<div class="morph pic"> <img src="gorod6.jpg" alt="beach"> </div>
И
/*MORPH*/
.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);
}
Суть заключается в том, что для классы morph вращается на 360 градусов при наведении курсора мыши. В это же время, border-radius принимает значение 50%, в результате чего получается круг.
7. Подобный эффект предыдущему, однако вращения не будет просто изображение закруглим и увеличим толщину границы.
<div class="focus pic"> <img src="gorod5.jpg" alt="cricket"> </div>
Стиль:
/*FOCUS*/
.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%;
}
В результате мы получим такую галерею:
