В сегодняшнем руководстве мы хотим рассказать вам о том, как разработать подписи к изображениям с различными переходами при помощи CSS3.
Смотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Браузерная поддержка
Эта подпись будет гораздо больше зависеть от довольно новых параметров transform и transition, поэтому было бы неплохо позаботиться о браузерной поддержке, необходимой для плавной работы эффекта.
Следующие браузеры уже поддерживают параметры transform и transition:
* Internet Explorer 10+ (еще не вышел)
* Firefox 6+
* Chrome 13+
* Safari 3.2+
* Opera 11+
А теперь, давайте приступим к руководству.
HTML-структура
У нас есть 6 изображений, каждое из которых имеет разный стиль подписи.
<div id="mainwrapper"><!-- This #mainwrapper section contains all of our images to make them center and look proper in the browser ->
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="css3-image-captions/1.jpg"/>
<span class="caption simple-caption">
<p>Simple Caption</p>
</span>
</div>
<!-- Image Caption 2 -->
<div id="box-2" class="box">
<img id="image-2" src="css3-image-captions/2.jpg"/>
<span class="caption full-caption">
<h3>Full Caption</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>
<!-- Image Caption 3 -->
<div id="box-3" class="box">
<img id="image-3" src="css3-image-captions/3.jpg"/>
<span class="caption fade-caption">
<h3>Fade Caption</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>
<!-- Image Caption 4 -->
<div id="box-4" class="box">
<img id="image-4" src="css3-image-captions/4.jpg"/>
<span class="caption slide-caption">
<h3>Slide Caption</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>
<!-- Image Caption 5 -->
<div id="box-5" class="box">
<div class="rotate"><!-- Rotating div -->
<img id="image-5" src="css3-image-captions/5.jpg"/>
<span class="caption rotate-caption">
<h3>This is rotate caption</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>
<!-- Image Caption 6 -->
<div id="box-6" class="box">
<img id="image-6" src="css3-image-captions/6.jpg"/>
<span class="caption scale-caption">
<h3>Free Style Caption</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> <!-- end of #mainwrapper-->
Базовый CSS
Перед тем, как приступить к стилизации каких-либо элементов, всегда не будет лишним начать со сброса параметров при помощи CSS-сброса, и задать им стандартные значения стилей, чтобы все браузеры отображали их одинаково (за исключением, возможно, IE6).
Стили будут отделены в файл style.css, поэтому наш HTML-код будет довольно опрятным. Тем не менее, не забудьте добавить ссылку на документ внутри секции «head» в вашем документе, чтобы применить стилизацию.
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
OK, давайте начнем оформление элемента. А начнем мы конкретно с тега HTML и id основной оболочки:
html { background-color: #eaeaea; }
#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0 auto;
text-align: center;
width: 660px;
}
Стиль блока изображения
Мы применяем некоторые общие стили для блоков, содержащих изображения. Блоки будут отображены друг за другом при помощи параметра float: left. Учтите, что мы также добавили параметр overflow: hidden. Это позволит нам скрыть все объекты, которые выходят за пределы нашего div’а.
Мы также объявляем параметр 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 {
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;
}
Пример 1
Первая подпись будет оформлена простым эффектом перехода, который часто используется в подобных случаях. Подпись будет появляться в нижней части, когда мы наводим курсор на изображение. Чтобы расположить подпись, мы используем фиксированную высоту 30 пикселей, и применим параметр bottom: -30px для того, чтобы скрыть ее под изображением.
#mainwrapper .box .simple-caption {
height: 30px;
width: 200px;
display: block;
bottom: -30px;
line-height: 25pt;
text-align: center;
}
Пример 2
Второй тип будет занимать всю ширину и высоту изображения/блока (200х200px), а эффект будет напоминать раздвижную дверь, только в вертикальном направлении.
#mainwrapper .box .simple-caption {
height: 30px;
width: 200px;
display: block;
bottom: -30px;
line-height: 25pt;
text-align: center;
}
Пример 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
Пятый пример будет оформлен эффектом вращения. Здесь будет вращаться не только подпись, но и изображение. Здесь все больше похоже на смену расположения за счет вращения.
Итак, мы добавляем параметр transform с вращением на -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
Последний пример будет оформлен эффектом изменения в размере. Тем не менее, в предыдущих примерах, текст внутри блока отображался на протяжении всего смещения .caption в переходе. В данном разделе мы сделаем немного по-другому.
Текст будет появляться после того, как будет выполнен переход. Итак, мы применяем к тексту transition-delay, в данном случае к тегам h3 и p.
#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, а нижеприведенный CSS-код сообщает, что подписи нужно переместиться вверх на расстояние равное 100% ее высоте.
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
Если вы не поняли, почему нам нужно выставлять отрицательное значение в translateY, то вам, вероятно, нужно ознакомиться с этим руководством.
Поведение подписи 2: Перемещение вниз
Вторая подпись у нас, наоборот, будет перемещаться сверху вниз. Поэтому здесь у нас будет положительное значение translateY.
#mainwrapper .box:hover .full-caption {
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
Поведение подписи 3: Появление
Третья подпись будет, наверное, самой легкой. Когда на блок наводится курсор мыши, параметр непрозрачности изменяется на 1, чтобы сделать блок видимым, и так как мы добавили параметр transition в класс caption, переход будет осуществлен плавно.
#mainwrapper .box:hover .fade-caption {
opacity: 1;
}
Поведение подписи 4: Скольжение влево
Как мы уже говорили раньше, подпись будет скользить из левой части. Тем не менее, изображение будет скользить вправо. Итак, здесь у нас есть 2 CSS-объявления.
Нижеприведенный CSS-код указывает нам на то, что когда мы наводим курсор на блок, подпись скользит влево на расстояние равное 100% ее ширине. Обратите внимание на то, что мы теперь мы использовали translateX, так как нам нужно переместить слайд горизонтально справа налево.
#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: Вращение
Эта подпись отличается от остальных тем, что она не будет перемещаться влево или вправо, она будет вращаться. Когда мы наводим курсор на блок, div с изображением и подписью будет вращаться на -180 градусов против часовой стрелки, скрывая изображения и отображая подпись.
/** Rotate Caption :hover Behaviour **/
#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% (1.4) от исходного разрешения.
#mainwrapper .box:hover #image-6 {
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
И если вы видели код CSS, приведенный под заголовком Подпись 6, то там мы скрыли текст, переместив его влево на 200 пикселей. Нижеприведенный CSS-код сообщает, что текст должен переместиться на исходное положение. Так что, текст будет одновременно выезжать слева направо.
#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);
}
Смотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Завершение
Хотя эти CSS-функции довольно круты, сейчас их вряд ли можно использовать повсеместно, так как браузерная поддержка все еще ограничена. Тем не менее, старайтесь экспериментировать и раскрывать для себя новые функции, так как это обязательно пригодится вам в будущем.