Создание css-сетки миниатюр с динамическим всплывающим меню
11 апреля 2013 | Опубликовано в css | 1 Комментарий »
При размещении данных в сетке мы часто теряем возможность размещения дополнительной информации. Поэтому в этом уроке мы будем добавлять всплывающие меню при наведении на изображение. Оно может включать имя изображения, оригинальную ссылку на источник, либо информацию о авторе. Кроме того, в уроке рассказано, как создавать динамический эффект, использую только свойства CSS3. В основном все современные браузеры будут поддерживать анимацию CSS3. Но даже и без анимации всплывающий контент будет отображаться нормально. Давайте приступим.
Разметка
Для начала нам нужно создать документ HTML5. Добавляем шрифты CSS Google WebFonts, которые будут применяться к заголовку. Кроме того, если пользователь пользователь пользуется Internet Explorer 8 или более ранней версией, для нормального отображения подключаем документ HTML5shiv.
<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Thumbnail Gallery with CSS Flyouts</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://designshack.net/favicon.ico"> <link rel="icon" href="http://designshack.net/favicon.ico"> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Kavoon"> </head>
Это обеспечит поддержку новых элементов HTML5, таких как <section> или <footer>.Теперь переходим к основной части, которая будет включать нашу галерею. Различные изображения были разделены с помощью неупорядоченного списка, каждый элемент которого будет содержать различную миниатюру. Неупорядоченные списки очень хорошо использовать для создания макета сайта, поскольку они просты в настройках и могут содержать различные данные.
Сортировка миниатюр
Внутри каждого контейнера у нас должно быть два отдельных блока. В одном будет размещено изображение со ссылкой на другую страницу. Обычно такие ссылки ведут к внутренней странице с увеличенной копией изображения, но иногда могут вести и на первоисточник. Второй — внутренний DIV с именем класса .meta. Контент будет позиционирован абсолютно. Позиционирование достаточно важно, поскольку нам нужно раскрывающееся меню, которое будет появляется в верхней части других элементов, а не отталкиваться от них.
<divid=«container»>
<ul id="thumbs"> <li class="clearfix"> <img src="images/01-birdie-shot-illustration.png"> <div class="meta"> <h4>Birdie</h4> <span><a href="http://dribbble.com/helder-oliveira" target="_blank">Author URL →</a></span> <span><a href="http://dribbble.com/shots/912406-Birdie" target="_blank">Source URL →</a></span> </div> </li>
Возможно, вам придется во всплывающее окно включить больше данных или добавить дополнительные атрибуты. Эти изменения не должны повлиять на css3 анимацию.
Давайте перейдем к стилям.
CSS стили
В верхней части мы скидываем стили по умолчанию и настраиваем несколько дополнительных свойств. Это достаточно важно, чтобы все наши поля и отступы правильно отображались в современных браузерах. Еще одной интересной техникой является значение height: 101% к элементу телу HTML . Это будет гарантировать, что наш сайдбар не будет прыгать, когда появится динамический контент.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 101%; } body { background: #d6d6d6; font-family: Verdana, Arial, sans-serif; font-size: 62.5%; line-height: 1; padding-bottom: 65px; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } h2 { display: block; font-family: 'Kavoon', Tahoma, sans-serif; font-size: 4.2em; line-height: 1.2em; text-shadow: 1px 2px 1px #fff; margin-bottom: 8px; } p { font-size: 1.3em; color: #666; margin-bottom: 16px; }
CSS становится более интересным, как мы переходим к галерее. Вы видите ID #thumbs, к которому в дальнейшем будут применены следующие стили. Давайте взглянем, как это выглядит:
#thumbs { list-style: none; text-align: center; } #thumbs li { position: relative; margin-right: 7px; margin-bottom: 14px; } #thumbs li img { float: left; cursor: pointer; opacity: 0.6; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } #thumbs li:hover img { opacity: 1.0 }
Вы также можете можете видеть, что каждое изображение отображается с непрозрачностью в 60% . Такие переходы, как мы видим, применены к изображением, а не к всплывающему меню, поэтому при желании, анимацию можно изменить на любую другую или вообще ее убрать. Но с такой анимацией легче отобразить, какое изображение является активным.
Эффект всплывающего меню
Это заключительная часть CSS , но она не сложная. Мы будем использовать такое же количество свойств CSS3 и вендорными префиксами.
#thumbs li > .meta { float: left; overflow: hidden; position: absolute; z-index: 9999; left: 125px; height: 85px; width: 0; font-family: Arial, Tahoma, sans-serif; font-size: 1.2em; background: #fff; -webkit-box-shadow: 1px 0px 4px #8f8e88; -moz-box-shadow: 1px 0px 4px #8f8e88; -o-box-shadow: 1px 0px 4px #8f8e88; box-shadow: 1px 0px 4px #8f8e88; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-transition: width 0.3s linear; -moz-transition: width 0.3s linear; -ms-transition: width 0.3s linear; -o-transition: width 0.3s linear; transition: width 0.3s linear; } #thumbs li:hover > .meta { width: 115px; padding: 3px 5px; }
Новые свойства CSS3 были разделены на разделы для более легкого восприятия. Мы будем использовать закругленные углы и небольшие тени. При загрузке весь наш контент будет видимым, но мы не сможем его увидеть, так как ширина установлена на 0px. При наведении мы увеличиваем ширину.
Как видим, идея со скрытыми элементами является достаточно интересной. Это урок — демонстрация того, как такие эффекты можно реализовать с помощью CSS свойства. Существует также много различных способов для улучшения качества анимаций с помощью JQuery.
Автор урока - Jake Rocheleauon
Перевод — Дежурка
Смотрите также:
Адаптивная сетка изображений с предварительным просмотром
549