Подписи к изобаражениям с визуальными эффектами на CSS3

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);
}  


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/irkK5MPKbzI/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Подписи к изобаражениям с визуальными эффектами на CSS3 | | 2012-10-21 22:49:16 | | Статьи Web-мастеру | | CSS3 является очень мощным инструментом. В наши дни его можно использовать там, где раньше требовались изображения и JavaScript для получения различных эффектов. Данный урок демонстрирует шесть | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: