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