Мощь CSS3 огромна, и в этом уроке мы увидим, как использовать её в творчестве. Мы собираемся создать некоторые эффекты миниатюр с переходами CSS3. Мы раскроем некоторые описание процесса, используя различные стили в каждом примере. Пожалуйста, обратите внимание, что это будет работать только в современных браузерах, которые поддерживают свойства CSS3 в использовании.
Разметки
Структура разметки очень просто и интуитивно понятно. Создайте контейнер, который будет иметь свой имидж и все другие детали.
Внутри view вставить элемент с class mask, который будет отвечать за наши эффекты, управляемые CSS3, и внутри него мы поставим заголовок, описание и ссылку на полный размер. (Для некоторых примеров, мы должны добавить маску в виде отдельного элемента и обернуть описание в div с class content.)
<div class="view">
<img src="image.gif" />
<div class="mask">
<h2>Title</h2>
<p>Your Text</p>
<a href="#" class="info">Read More</a>
</div>
</div>
CSS
После создания нашей верстки мы собираемся установить наш стиль.
Мы установили общие правила для нашего класса, а затем мы собираемся добавить специальный класс с нужными стилями эффектов. Мы будем опускать префиксы CSS3 при показе стиля.
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
И теперь мы будем смотреть на эффекты.
Пример 1
Мы будем добавлять специальный класс для каждого примера. Например (view-first, view-second, view-third, и т.д.).
<div class="view view-first">
</div>
В этом первом примере мы будем использовать только некоторые основные переходы, чтобы создать хороший эффект при наведении.
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
И вот сердце нашего эффекта. Когда вы перемещаете курсор на изображение, мы можем использовать свойство задержки для эмуляции простой анимации. Переход задержки, что мы используем в классе наведении могут быть изменены, чтобы отличаться от нормального класса. В этом примере мы не использовали каких-либо задержек в обычном классе; но мы добавили задержку при наведении курсора мыши, который начнёт переход немного позже. Перемещение мыши вне, значение по умолчанию 0 sec будет применяться, и “reverse” будет быстрее.
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
Пример 2
Во втором примере мы добавим специальный класс view-second, но мы оставим элемент класса mask пустым и обернём описание в DIV с классом content.
<div class="view view-second"> <img src="images/5.jpg" /> <div class="mask"></div> <div class="content"> <h2>Hover Style #2</h2> <p>Some description</p> <a href="#" class="info">Read More</a> </div> </div>
Здесь класс mask будет иметь различные атрибуты, чтобы удовлетворить наши эффекты, на самом деле мы собираемся применить преобразование свойств (перевод и повернуть) и сделает квадрат из него. Описание элементов будут переведены, то есть перемещается так, что мы можем установите их при наведении курсора мыши:
.view-second img {
transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(115,146,184, 0.7);
width: 300px;
padding: 60px;
height: 300px;
opacity: 0;
transform: translate(265px, 145px) rotate(45deg);
transition: all 0.2s ease-in-out;
}
.view-second h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: translate(200px, -200px);
transition: all 0.2s ease-in-out;
}
.view-second p {
transform: translate(-200px, 200px);
transition: all 0.2s ease-in-out;
}
.view-second a.info {
transform: translate(0px, 100px);
transition: all 0.2s 0.1s ease-in-out;
}
Элементы описания будут приходить с небольшим опозданием:
.view-second:hover .mask {
opacity:1;
transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
transform: translate(0px,0px);
transition-delay: 0.3s;
}
.view-second:hover p {
transform: translate(0px,0px);
transition-delay: 0.4s;
}
.view-second:hover a.info {
transform: translate(0px,0px);
transition-delay: 0.5s;
}
Пример 3
В этом третьем примере мы будем использовать переходы и вращающиеся преобразования, чтобы открыть наш контент:
.view-third img {
transition: all 0.2s ease-in;
}
.view-third .mask {
background-color: rgba(0,0,0,0.6);
opacity: 0;
transform: translate(460px, -100px) rotate(180deg);
transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
transform: translateY(-100px);
transition: all 0.2s ease-in-out;
}
.view-third p {
transform: translateX(300px) rotate(90deg);
transition: all 0.2s ease-in-out;
}
.view-third a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
Это простые инструкции, которые применяются при наведении курсора мыши. Теперь мы будем использовать появление описания элементов с помощью настройки соответствующих задержки переходов:
.view-third:hover .mask {
opacity:1;
transition-delay: 0s;
transform: translate(0px, 0px);
}
.view-third:hover h2 {
transform: translateY(0px);
transition-delay: 0.5s;
}
.view-third:hover p {
transform: translateX(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-third:hover a.info {
transform: translateY(0px);
transition-delay: 0.3s;
}
Пример 4
Здесь, в четвертом примере мы выполним простой “Zoom Out” изображение и увеличение контента с вращением, все благодаря шкале преобразования. Мы устанавливаем задержку перехода 0,2 с для стиля изображения, но при наведении мы будем говорить, что это 0s. Это позволит начать сразу при наведении курсора мыши, но задержать его при убирании мыши.
.view-fourth img {
transition: all 0.4s ease-in-out 0.2s;
opacity: 1;
}
.view-fourth .mask {
background-color: rgba(0,0,0,0.8);
opacity: 0;
transform: scale(0) rotate(-180deg);
transition: all 0.4s ease-in;
border-radius: 0px;
}
.view-fourth h2{
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transition: all 0.5s ease-in-out;
}
.view-fourth p {
opacity: 0;
transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
opacity: 0;
transition: all 0.5s ease-in-out;
}
Это простые инструкции, чтобы получить эффект. С CSS3 вы можете делать все :)
.view-fourth:hover .mask {
opacity: 1;
transform: scale(1) rotate(0deg);
transition-delay: 0.2s;
}
.view-fourth:hover img {
transform: scale(0);
opacity: 0;
transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
opacity: 1;
transition-delay: 0.5s;
}
Пример 5
В этом пятом примере мы будем использовать переход содержимого вместе с transition-timing-function ease-in-out для того, чтобы сдвинуть содержимое влево.
.view-fifth img {
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
transform: translateX(-300px);
opacity: 1;
transition: all 0.4s ease-in-out;
}
.view-fifth h2{
background: rgba(255, 255, 255, 0.5);
color: #000;
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
opacity: 0;
color: #333;
transition: all 0.2s linear;
}
Эффект при наведении будет делать изображение слайда справа и описание приходить слева, как если бы он толкает изображения:
.view-fifth:hover .mask {
transform: translateX(0px);
}
.view-fifth:hover img {
transform: translateX(300px);
transition-delay: 0.1s;
}
.view-fifth:hover p{
opacity: 1;
transition-delay: 0.4s;
}
Продолжение здесь.