—»     —»   Создаем подписи к изображениям на CSS3
  Раздел: CSS/Style Sheets   Нет комментариев  

Создаем подписи к изображениям на CSS3

CSS3 – это на самом деле мощная технология. Сегодня для того, чтобы сделать простой эффект перехода, нам нужны изображения или несколько строк javascript-кода. И все это стало возможным благодаря CSS3.

Создаем подписи к изображениям на CSS3

В сегодняшнем руководстве мы хотим рассказать вам о том, как разработать подписи к изображениям с различными переходами при помощи 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;
}

Создаем подписи к изображениям на CSS3

Стиль блока изображения

Мы применяем некоторые общие стили для блоков, содержащих изображения. Блоки будут отображены друг за другом при помощи параметра 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;
}

Создаем подписи к изображениям на CSS3

Общий стиль подписи и рамки

Подпись и рамка будут иметь общие стили и параметр 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;
}

Создаем подписи к изображениям на CSS3

Пример 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;
}

Создаем подписи к изображениям на CSS3

Давайте заставим их двигаться

В следующем разделе мы определим поведение подписи при наведении курсора на изображения или блоки.

Поведение подписи 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-функции довольно круты, сейчас их вряд ли можно использовать повсеместно, так как браузерная поддержка все еще ограничена. Тем не менее, старайтесь экспериментировать и раскрывать для себя новые функции, так как это обязательно пригодится вам в будущем.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 11510   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031