Создаем страницу с интерактивными фото посредствам 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. Но я надеюсь, что все-таки, скоро уже не останется пользователей, которые их используют. Если Вам все же понадобиться такая защита, пишите, я выложу. Наша чудо-страничка готова. Я думаю Вы найдете применение Вашим новым знаниям в своих работах.

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

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

Читайте также:

Рассылка на твоем сайте

Дизайн блога в стиле ретро

Понравилась статья? Поделись с друзьями!


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

Комментарий добавил(а): Сергей
Дата: 2014-06-26

Супер! Давно хотел подобное, но не мог реализовать. А здесь нашел. Спасибо.

Добавить Комментарий:


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: