Портфолио-временная шкала

Портфолио-временная шкала

От автора: Timeline – это плагин jQuery, специализирующийся на показе хронологического ряда событий. Вы можете вставлять любые виды средств, включая твиты, видео и карты, и связывать их с датой. После некоторой отладки дизайна он будет идеален для портфолио, в котором вы продемонстрируете свою работу и интересы.

скачать исходникидемо

HTML

Timeline по умолчанию комплектуется темой в светлых тонах. Идеально практичная, в большинстве случаев она – то, что нужно. Однако нашему портфолио лучше всего подойдет дизайн в темных тонах, поэтому мы переделаем его на свой вкус. Во-первых, давайте рассмотрим базовую разметку страницы:

index.html

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В первом разделе у нас имеется таблица стилей плагина – timeline.cssиstyles.css, где будут содержаться наши модификации. В нижнем колонтитуле находится библиотека jQuerylibrary, плагин временной шкалы timeline и инициализирующий ее script.js. При вызове плагина тот отыщет на вашей странице div с ID timeline. Внутрь него он вставит всю нужную ему для представления временной шкалы разметку:

При изменении CSS временной шкалы вышеприведенный фрагмент сможет лучше представить вам ее идею. Обратите внимание, что мы не станем воссоздавать таблицу стилей плагина с нуля, а просто отменим некоторые из правил в своем файле css. Преимущество этого метода в том, что будущие обновления плагина станут прямолинейными, не говоря о том, что они значительно облегчатся.

Писать CSS, глядя только на разметку – задача сложная, при условии, что у наших правил должно быть предшествование перед теми, что употребляются в timeline.css. К счастью, есть более легкий путь, о чем вы узнаете из раздела CSS этого учебника.

jQuery

Для инициализации плагина нам нужно вызвать метод VMM.Timeline() в documentready:

Метод init принимает один аргумент – источник данных. Это может быть либо файл json, как выше, либо электронная таблица Google (напоминание о нашем FAQ-учебнике о таблицах).

Получить дополнительную информацию о поддерживаемых источниках данных можно в документации на сайте плагина или просмотрев файлdata.json в скачиваемом zip-файле этого учебника.

CSS

Для получения нужных селекторов тех элементов, которые мы собираемся переделывать, я пользовался HTML-инспектором Firebug’а. В закладке HTML видно, какие правила применил timeline.css к каждому из элементов. Для их отмены я скопировал те же самые селекторы в styles.css, где будет происходить наша модификация. Для облегчения работы в некоторых случаях я, тем не менее, использовал флаг !important.

Все нижеприведенные модификации отменяют всего несколько стилей CSS. Остальные унаследованы таблицей стилей по умолчанию. Давайте начнем! Первое, что мы сделаем в styles.css после назначения стилей самой странице – изменим фоны временной шкалы:

Для создания 3D-эффекта навигации временной шкалы нам придется применить дополнительные элементы. Но в свою разметку плагин Timeline таковые не включает. Простое решение – использовать псевдоэлементы:before / :after. Элемент :after– это более темная верхняя часть и для усиления эффекта он пользуется линейным градиентом.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Затем мы добавляем темный фон к навигации временной шкалы (сектор с представляющими события маленькими подсказками-тултипами, на которые можно щелкать):

Позже мы назначаем стили кнопкам увеличения/уменьшения и панели инструментов:

Далее следует числовая шкала внизу:

Указатели предыдущего и следующего события:

Экран загрузки:

Затем переходим к слайдам:

Наконец мы модифицируем появление первой страницы. Я пользуюсь nth-child(1) для выбора только первого элемента слайдера, содержащего название и описание временной шкалы, определенного в источнике данных JSON.

Все, что осталось сделать – это открыть timeline.psd, который скачался в комплекте с плагином, и изменить цвет некоторых иконок в photoshop’е. Я включил необходимые файлы в скачиваемый zip-файл этого учебника. После этого наше портфолио-временная шкала закончено!

Готово!

Это портфолио можно использовать не только для показа последних проектов, но и ваших интересов и важных моментов карьеры. Поделитесь своими мыслями и предложениями в разделе комментариев.

Автор: Martin Angelov

Источник: http://tutorialzine.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree