Создаем страницу с интерактивными фото посредствам CSS3

С развитием новых технологий в веб дизайне становится возможным создавать проекты с помощью html и css3, которые раньше можно было реализовать лишь с применением скриптов JavaScript или с помощью программы Flash. Примером тому может служить этот урок. Мы создадим страницу с интерактивными фото, при наведении на каждое из которых, они будут меняться с некоторым анимационным эффектом на соответствующее описание. Смотрите Демо и создавайте…

дополнительные материалы к урокам

демо версия урока

1. Итак, начнем с создания html файла. Назовем его photo_css.html и поместим в него следующий код:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title>CSS3 Effects</title>
</head>

<body>
</body>
</html>

 

2.

Теперь создадим файл таблицы стилей css и назовем его photo_style.css. Подключим нашу таблицу стилей в html-файле с помощью следующей строчки (ее нужно расположить между тегами head):

<link rel="stylesheet" type="text/css" href="photo_style.css">

 

При таком подключении стилей подразумевается, что файл таблицы стилей и html-файл лежат в одной папке. Если Вы кладете файл со стилями в отдельную папку, не забудьте прописать правильный путь до него.

3. Теперь займемся подготовкой наших изображений. В дополнительных материалах Вы можете найти изображения, которые я использовала в своем примере, а можете использовать и свои изображения, предварительно обработав их в Photoshop. Размер изображений (в нашем примере) 400px в ширину и 250px в высоту.

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

5. Теперь поработаем немного с html-файлом. Между тегами body создадим контейнер, в котором будем хранить div с заголовком нашей страницы и div с основным ее содержимым, то есть с картинками. Они будут храниться в ненумерованном списке. После каждой картинки, также будут храниться ее заголовок, описание и ссылка на более подробную информацию. В итоге нашей работы эти элементы будут на обороте каждой картинки. На данном этапе между тегами body прописываем следующий код:

<div id="conteiner">

<div id="header">
<h1>Лучшие Работники Нашего Офиса</h1>
</div>

<div id="content">
<ul class="roll">
<li>
<img src="img/1.jpg" width="400" height="250" alt="Katerina">
<h2>Работник Катерина</h2>
<hr/>
<p>Информация о работнике</p>
<a class="button" href="#" title="Нажми на кнопку, чтобы узнать больше">Узнать о ней больше</a>
</li>

<li>
<img src="img/2.jpg" width="400" height="250" alt="Pypkin">
<h2>Работник Пупкин</h2>
<hr/>
<p> Информация о работнике </p>
<a class="button" href="#" title="Нажми на кнопку, чтобы узнать больше">Узнать о нем больше</a>
</li>

<li>
<img src="img/3.jpg" width="400" height="250" alt="Fedor">
<h2>Работник Федор</h2>
<hr/>
<p> Информация о работнике </p>
<a class="button" href="#" title="Нажми на кнопку, чтобы узнать больше">Узнать о нем больше</a>
</li>

<li>
<img src="img/4.jpg" width="400" height="250" alt="Ydalennii Sotrydnik">
<h2>Удаленный Сотрудник</h2>
<hr/>
<p> Информация о работнике </p>
<a class="button" href="#" title="Нажми на кнопку, чтобы узнать больше">Узнать о нем больше</a>
</li>
</ul>
</div>
</div>

 

Сейчас, если мы откроем нашу страницу в браузере, то выглядеть она будет примерно так:

6. Давайте перейдем в файл таблицы стилей и пропишем основные стили для наших дивов и ненумерованного списка. На этом этапе у меня получился следующий код:

body{
	margin:0;
	padding:0;
	background:#9d9d9d url(img/bg.jpg) repeat top left;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:80.5%;
	font-style:italic;
	color:#333;
}
#conteiner{
	position:relative;
	width:960px;
	margin:auto;
}
#header{
	position:relative;
	text-align:center;
}
h1{
	font-size:2.5em;
	font-style:normal;
	text-transform:uppercase;
}
#content{position:relative;}
ul.roll {
		position:relative;
		margin:0;
		padding:0;
	}
	ul.roll li {
		background:#FFFFC1;
		position:relative;
		list-style:none;
		margin:0;
		padding:0;
		width:400px;
		height:250px;
		overflow:hidden;
		border:20px solid #FFFFC1;
		float:left;
		margin-right:20px;
		margin-left:20px;
		margin-bottom:40px;	
		-webkit-box-shadow:0px 0px 10px #333;
		-moz-box-shadow:0px 0px 10px #333;
		-ms-box-shadow:0px 0px 10px #333;
		-o-box-shadow:0px 0px 10px #333;
		box-shadow:0px 0px 10px #333;
	}

 

После этих преобразований со стилями, обновив нашу страницу в браузере мы увидим следующее:

7. Наша задача состоит в том, чтобы при наведении мышью на картинку появлялся ее текст. В нашем html-коде картинка стоим выше остального, относящегося к ней контента. Нам нужно задать для нее z-index, который позиционирует ее над остальными элементами, а также задать абсолютное позиционирование:

ul.roll li img{
		z-index:30;
		position:absolute;
		top:0px;
		left:0px;
	}

 

8.

Не переживайте, что пока ничего не работает. Мы будем делать анимацию немного позже. А пока давайте придадим некоторые стили для элементов описания наших картинок:

ul.roll li h2 {
		font-size:3em;
		color:#333;
		margin:0;
		padding:0;
		line-height:1.5em;
		letter-spacing:0.1em;
		text-align:center;
		text-transform:uppercase;
	}
	

	ul.roll li hr {
		width:0px;
		color: #333;
		background-color:#333;
		border:none;
		height:2px;
		margin:auto;
	}
	
		
	
	ul.roll li p {
		font-family:helvetica, arial, sans-serif;
		text-transform:uppercase;
		margin:0;
		padding:0;
		font-size:0.9em;
		padding:20px;
		text-align:center;
		text-tranform:uppercase;
	}
	
	
	ul.roll li a.button {
		display:block;
		text-align:center;
		font-family:helvetica, arial, sans-serif;
		position:relative;
		text-transform:uppercase;
		letter-spacing:0.2em;
		padding:4px;
		text-decoration:none;
		font-size:0.9em;
		background:#333;
		color:#d1d694;
		width:150px;
		margin-left:125px;
		border:none;
		cursor:pointer;
		z-index:50;
	}

 

Внешне все должно выглядеть вот так:

9. Вот теперь настал волшебный момент исчезновения и появления. Все это будет основано на убавлении непрозрачности картинки на 0. Поэтому вставляем в наш файл со стилями следующий код:

ul.roll li:hover img {
		-webkit-transform: scale(6);
		-moz-transform: 	scale(6);
		-ms-transform: 	scale(6);
		-o-transform: 	scale(6);
		opacity:0;
	}

 

Эффект от данного кода Вы можете посмотреть запустив файл в браузере.

10. Итак, наши интерактивные картинки уже работают, но неплохо было бы добавить какой-нибудь анимационный эффект, с которым они будут меняться на описание и обратно. Добавьте следующий код в ul.roll li img и еще раз протестируйте страничку:

-webkit-transition:all 0.7s ease-out;
		-moz-transition:all 0.7s ease-out;
		-ms-transition:all 0.7s ease-out;
		-o-transition:all 0.7 ease-out;

 

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

11. Я протестировала эту страницу в Опере, Firefox, IE, Google Chrome. Везде все работает корректно. Единственное, что от старых версий IE необходимо будет обезопаситься дополнительно. Так как старые-престарые версии браузеров не понимают CSS3. Но я надеюсь, что все-таки, скоро уже не останется пользователей, которые их используют. Если Вам все же понадобиться такая защита, пишите, я выложу.
Наша чудо-страничка готова. Я думаю Вы найдете применение Вашим новым знаниям в своих работах.

Если Вам был интересен данный урок оставляйте своем мнение в комментариях, мне будет очень приятно и интересно почитать.
Еще раз спасибо за внимание, подписывайтесь на обновление блога. В ближайшее время я планирую выпустить много новых полезных статей и уроков. Не пропустите!

С Вами была Анна Котельникова. До встречи в следующих уроках!

Leave a Reply