—»     —»   Разработка сетки миниатюр на CSS с динамическим меню
  Раздел: Руководства   Нет комментариев  

Разработка сетки миниатюр на CSS с динамическим меню



Представляя данные в сетке, вы часто теряете возможность включать дополнительную информацию. Кроме появляющихся при наведении курсора мыши менюшек, здесь также следует отметить возможность включать метаданные. Сегодня мы хотим предложить вам руководство, которое может также служить отличным примером создания сеток миниатюр.

Сюда мы включим небольшое вылетающее меню с информацией об изображении. Оно будет включать название изображения, исходный URL, а также URL на автора. Красота данного примера заключается в том, что мы будем разрабатывать этот динамичный эффект при помощи лишь CSS3-параметров. Практически все современные браузеры будут поддерживать эти CSS3-анимации, которые выглядят просто фантастически! Но стоит отметить, что даже без этих анимаций, вылетающий контент будет работать корректно, разве что оформление придется немного адаптировать под обычное поведение элементов на странице.

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.

Разрабатываем документ

Для начала нам нужно создать отдельный HTML5-документ, который будет выступать в роли нашей Index-страницы. Сюда мы включили копию Google Webfonts CSS, который добавит шрифт Kavoon. Его мы используем для текста заголовка. Также если пользователь будет использовать 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. Этот контент будет позиционирован абсолютно, чтобы он был извлечен из потока документа. Позиционирование важно, так как нам нужно, чтобы вылетающее меню появлялось поверх других элементов, а не вытесняло их.

<div id="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 &rarr;</a></span>
<span><a href="http://dribbble.com/shots/912406-Birdie" target="_blank">Source URL &rarr;</a></span>
</div>
</li>

Каждый пункт списка также обозначен классом .clearfix, который работает с внутренними плавающими элементами. Так как нам нужно держать все изображения вместе, одно за другим, преобразование их в float-элементы будет наипростейшим путем. Но это приводит нас к тому, что у нас плавающее изображение и абсолютно позиционированный div – и оба эти элемента сейчас находятся за пределами потока документа. Чтобы узнать об этом больше, вам лучше ознакомиться с нашим любимым ресурсом о clearfix, в котором приведен отрывок кода.

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

CSS-сброс и структура

В самом верху нашего 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, вам следует знать, что это относится к исходному неупорядоченному списку. Мы предпочитаем начинать с корневых селекторов, используя уникальный id, а затем разбираемся с другими внутренними стилями при помощи каскадного древа DOM. Давайте посмотрим на то, как это выглядит:

#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-кода немного длинноватая, но довольно простая. Нам нужно использовать то же количество CSS-переходов с отдельными браузерными префиксами. Также, как как мы указываем внутренние блоки .meta, нам будет проще применять те же стили.

#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-параметры на секции, чтобы их было проще понять. Все что нам нужно, это несколько закругленных углов, тени блока, а также несколько переходов, которые добавляли бы к блоку новый параметр display. Весь контент будет видимым на странице сразу после загрузки. Мы просто не будем видеть его, так как div’вам задан параметр ширины равный 0 пикселей.

К анимации добавляется дополнительный отступ, так как иначе она путается с box-display. Если мы добавим отступ к корневому элементу, то он появится как 5-10 пиксельная ширина, но абсолютно пустая при этом. Так что, вместо этого мы медленно расширяем ширину, а внутренний отступ немного быстрее, чем миниатюра изображения доходит до 100% непрозрачности. Все эти параметры поддаются настройке, поэтому вы без труда адаптируете их под свой проект.

Разработка сетки миниатюр на CSS с динамическим меню

Подытожим

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

Кроме знакомства с вышеприведенным демо, мы также предлагаем вам скачать копию исходного кода. Такой проект не сложно понять, но иногда бывает гораздо проще работать с уже готовым кодом. Существует также множество различных способов повысить качество анимаций, используя дополнительные jQuery-эффекты.

Постовой: Системный интегратор «Октис» оказывает услуги по разработке программного обеспечения и специализированных информационных систем по индивидуальным требованиям заказчика. Источник: http://www.octys.ru/development.html
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, фотография
Опубликовал Design FactoRy   Прочитано (раз): 6132   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31