CSS3 является очень мощным инструментом. В наши дни его можно использовать там, где раньше требовались изображения и JavaScript для получения различных эффектов. Данный урок демонстрирует шесть визуальных эффектов для вывода подписей к изображениям с применением только CSS3.

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

Internet Explorer 10+ (еще не выпущен)
Firefox 6+
Chrome 13+
Safari 3.2+
Opera 11+


Разметка HTML
У нас будет 6 изображений с разными по стилю подписями:

<div id="mainwrapper">
    <!-- Подпись  1 -->
    <div id="box-1" class="box">
        <img id="image-1" src="images/1.jpg"/>
            <span class="caption simple-caption">
                <p>Простая подпись</p>
            </span>
    </div>
    <!-- Подпись 2 -->
    <div id="box-2" class="box">
        <img id="image-2" src="images/2.jpg"/>
        <span class="caption full-caption">
            <h3>Подпись на всю картинку</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span>
    </div>
    <!-- Подпись 3 -->
    <div id="box-3" class="box">
    <img id="image-3" src="images/3.jpg"/>
    <span class="caption fade-caption">
        <h3>Проявляющаяся подпись</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
    </div>
    <!-- Подпись 4 -->
    <div id="box-4" class="box">
    <img id="image-4" src="images/4.jpg"/>
    <span class="caption slide-caption">
        <h3>Выскальзывающая подпись</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
    </div>
    <!-- Подпись 5 -->
    <div id="box-5" class="box">
    <div class="rotate">
    <img id="image-5" src="images/5.jpg"/>
    <span class="caption rotate-caption">
        <h3>Подпись с поворотом</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
    </div>
    </div>
    <!-- Подпись 6 -->
    <div id="box-6" class="box">
    <img id="image-6" src="images/6.jpg"/>
    <span class="caption scale-caption">
        <h3>Масштабная подпись</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
    </div>
</div>

Общие стили CSS
Перед определением стилей нашего проекта следует провести сброс свойств и установить для них значение по умолчанию, чтобы все браузеры выдавали одинаковый результат (может быть, за исключением IE6).

Стили располагаются в отдельном файле, поэтому их нужно подключить к нашей странице HTML.

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Начнем с определения стилей для тега html и основного контейнера:

html { background-color: #eaeaea; }
 
#mainwrapper {
  font: 10pt normal Arial, sans-serif;
  height: auto;
  margin: 80px auto 0 auto;
  text-align: center;
  width: 660px;
}

Основные стили

Стили для блока изображения
Определим несколько общих стилей для блоков изображений. Блоки будут выводиться один к одному со смещением влево. Обратите внимание на свойство overflow: hidden. Таким образом скрываются все элементы, вложенные в блок и выступающие за его границы.

Также определяем свойство transition - оно понадобиться нам позже.

#mainwrapper .box {
    border: 5px solid #fff;
    cursor: pointer;
    height: 182px;
    float: left;
    margin: 5px;
    position: relative;
    overflow: hidden;
    width: 200px;
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
}
 
#mainwrapper .box img {
    position: absolute;
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

Общие стили подписей
Подписи также имеют общие стили и свойство transition. Вместо использования свойство opacity мы применим режим цвета RGBA со значением 0.8 для альфа канала, чтобы сделать фон подписи немного прозрачным без влияния на текст.

#mainwrapper .box .caption {
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    color: #fff;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
}

Стили для подписей

Подпись 1
Первая подпись будет использовать простой распространенный эффект - текст будет подниматься снизу при наведении курсора мыши на изображение. Подпись имеет фиксированную высоту и мы располагаем ее в позиции -30px по вертикали, чтобы скрыть.

#mainwrapper .box .simple-caption {
    height: 30px;
    width: 200px;
    display: block;
    bottom: -30px;
    line-height: 25pt;
    text-align: center;
}

Подпись 2
Второй тип подписи имеет ширину и высоту равными параметрам блока изображения (200x200px), а эффект появления заключается в выскальзывании подписи сверху вниз при наведении курсора мыши на изображение.

#mainwrapper .box .full-caption {
    width: 170px;
    height: 170px;
    top: -200px;
    text-align: left;
    padding: 15px;
}

Подпись 3
Для третьей подписи используется эффект проявления. поэтому изначально она будет иметь свойство opacity: 0.

#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
    opacity: 0;
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
}

Подпись 4
Четвертая подпись будет выскальзывать слева направо сдвигая изображение. Поэтому изначально она имеет положение 200px влево (left:200px).

** Caption 4: Slide **/
#mainwrapper .box .slide-caption {
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
    left: 200px;
}

Подпись 5
Пятая подпись будет использовать эффект вращения. Вращается не только текст, но и все изображение

Добавляем трансформацию вращения на -180 градусов.

#mainwrapper #box-5.box .rotate-caption {
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
    top: 200px;
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
 
#mainwrapper .box .rotate {
    width: 200px;
    height: 400px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

Подпись 6
Последняя подпись будет использовать трансформацию масштабирования. Но текст будет появляться с небольшой задержкой.

#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {
    position: relative;
    left: -200px;
    width: 170px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
 
#mainwrapper .box .scale-caption h3 {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    transition-delay: 300ms;
}
 
#mainwrapper .box .scale-caption p {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    transition-delay: 500ms;
}

Теперь пришел черед вывода подписей при наведени курсора мыши на изображение.



Подпись 1. Поднимаем текст
Для реализации эффекта используем свойство transform для перемещения подписи на 100% ее высоту вверх.

#mainwrapper .box:hover .simple-caption {
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

Подпись 2. Опускаем текст
Для второй подписи нужно организовать обратный эффект - опустить текст на 100% высоты.

#mainwrapper .box:hover .full-caption {
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

Подпись 3. Проявление
Третья подпись имеет самый простой код реализации эффекта. Просто изменяем значение свойства opacity на 1.

#mainwrapper .box:hover .fade-caption {
    opacity: 1;
}

Подпись 4. Сдвигаем влево
Как уже упоминалось ранее, и подпись и изображение сдвигаются влево при наведении курсора. Поэтому здесь нужно использовать 2 определения CSS.

Код CSS будет сдвигать подпись влево при наведении курсора мыши на блок.

#mainwrapper .box:hover .slide-caption {
  background-color: rgba(0,0,0,1) !important;
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  opacity: 1;
  transform: translateX(-100%);
}

Но нужно также сдвинуть и изображение:

#mainwrapper .box:hover img#image-4 {
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

Подпись 5. Вращаем
При наведении курсора мыши на блок, весь элемент будет поворачиваться на 180 градусов, скрывая изображение и выводя подпись.

#mainwrapper .box:hover .rotate {
    background-color: rgba(0,0,0,1) !important;
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

Подпись 6. Масштабирование
Здесь комбинируется несколько эффектов. При наведении курсора мыши на блок изображение увеличивается до 140% от начального размера.

#mainwrapper .box:hover #image-6 {
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

А текст подписи будет выскальзывать слева:

#mainwrapper .box:hover .scale-caption h3,
#mainwrapper .box:hover .scale-caption p {
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
} 

Добавлено: 24 Апреля 2018 10:41:03 Добавил: Андрей Ковальчук Нравится 0

Добавить