Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Создание страницы портфолио адаптивной временной шкалы

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Design and Build a Responsive Timeline Portfolio Page.
Design a Stylish Timeline Portfolio Page Using Photoshop
Finishing the Responsive Timeline Portfolio Page

Russian (Pусский) translation by Svetlana (you can also view the original English article)

Final product image
What You'll Be Creating

Во время этого урока мы будем строить фантастическое портфолио Timeline, как показано в предыдущем учебнике Томаса Лауринавичуса. Мы будем использовать некоторые гибкие методы, а также анимацию CSS3, Sass и немного jQuery.

Структура файлов и каталогов

Итак, первым шагом будет создание необходимых файлов и папок. На рисунке ниже показана наша корневая структура.

Как вы можете видеть, у нас здесь очень простая настройка. Внутри каталога «css» и создайте файл styles.scss, а также возьмите копию normalize.css. Чтобы использовать Sass в этом проекте, вам потребуется либо Sass, установленный на вашем компьютере, либо вам понадобится приложение для просмотра и компиляции для вас. В настоящее время я использую CodeKit для Mac, но есть много альтернатив, таких как Prepos, Scout и Koala, чтобы назвать несколько. Они не все бесплатны, но какой бы вы ни выбрали, это сэкономит вам много времени!

Внутри папки «js» создайте файл app.js и загрузите копию modernizr.js, чтобы разместить здесь. Модернизация Modernizr, которую я использовал, включает в себя все тесты CSS3 и HTML5, поскольку нам не нужно больше этого. Правильно, это охватывает наши начальные файлы и папки. Следующим шагом является проверка нашей PSD-конструкции, чтобы увидеть, какие биты нуждаются в разрезе.

Нарезка ОСЧС

Дизайн этой страницы является прямым, что позволяет решить, нужны ли нам какие-либо фрагменты. Томас фактически предоставил все эти активы вместе с PSD, так что из этого дизайна можно было бы вообще не иметь кусочков. Тем не менее, я решил, что для этого урока мы должны вырезать три изображения портфолио и значок загрузки в нижней части страницы. Это просто для удобства больше, чем что-либо еще, поэтому нам не нужно делать какие-либо изменения размера в Photoshop.

В Photoshop возьмите инструмент для среза и аккуратно вытяните ломтики. Вы можете назвать каждый фрагмент, дважды щелкнув по нему. Затем используйте Save for Web ... (или аналогичный пункт меню в зависимости от вашей версии Photoshop), чтобы экспортировать фрагменты в наш каталог изображений.

Затем я создал новую папку внутри «изображений» под названием «портфолио», в которой будут храниться изображения, относящиеся к элементам портфеля. Переместите три изображения портфолио в эту папку, и это завершает наш процесс нарезки!

Аватарка

Теперь перейдите на сайт uifaces.com и выберите одно из изображений для использования в качестве изображения нашего профиля. Мне удалось найти то же самое, что и дизайн, но неважно, кого вы выбираете. Возьмите 128x128 версию и поместите ее в папку «images».

Мы почти закончили с нашими изображениями только для социальных медиа и навигационных значков. Мы сделаем это дальше.

Спрайты

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

Таким образом, используя ссылки на ресурсы, предоставляемые Tomas, мы можем загрузить каждый из значков социальных сетей. Возьмите 128x128 пикселей каждой из них, чтобы мы могли масштабироваться до размеров, которые нам нужны. Затем в Photoshop нам нужно создать файл размером 101px на 51px. Перетащите каждый из значков социальных сетей в этот файл и измените размер до 24px на 24px. Значки черные, но нам нужно, чтобы они были белыми, поэтому применяйте стиль слоя к каждому, который дает цветное наложение белого. Измените цвет фона на что-то темное, чтобы мы могли их видеть, а затем упорядочить их так ...

Каждый значок имеет ровно 1 пиксель от краев и друг от друга. Я также изменил непрозрачность каждого значка до 80%. Теперь дублируйте эту строку значков и поместите ее непосредственно ниже, убедившись, что она будет содержать 1 пиксель с краев. Измените непрозрачность второй строки значков на 100%. Он должен выглядеть примерно так ...

Теперь скройте фоновый слой в Photoshop, чтобы создать прозрачный фон и сохранить для Интернета как PNG под названием social-sprite.png внутри папки «images». Следующий шаг - создать сетчатую версию этого спрайта, чтобы мы получили четкие значки на дисплеях с высокой плотностью пикселей. Это должно быть довольно простым и просто включает в себя удвоение размера того, что у нас уже есть. Таким образом, версия сетчатки будет 202px на 102px. Помните, что все должно быть удвоено, включая интервалы вокруг каждого значка, поэтому для этого спрайта нам понадобится 2 пикселя между каждым значком и по краям. Готовая версия сетчатки должна выглядеть так ...

Чудесно! Теперь просто скройте фоновый слой, как раньше, и экспортируйте его как PNG, но на этот раз назовите его social-sprite@2x.png. Это стандартное соглашение об именах для версии сетчатки файла изображения.

Поэтому теперь нам просто нужно сделать то же самое с значками навигации. Эти значки являются векторными объектами внутри PSD, что означает, что мы можем просто дублировать их в новый файл и масштабировать их по мере необходимости. Размер, необходимый для нормальной версии, составляет 49 пикселей на 18 пикселей, а версия сетчатки с двойным размером - 98 пикселей на 36 пикселей. Готовые изображения должны выглядеть так:

Отлично! Сохраните их как nav-sprite.png и nav-sprite@2x.png. Я думаю, что это завершает все, что нам нужно сделать для изображений, поэтому давайте продолжим писать код!

Базовый HTML и Sass

Начнем с barebones нашей страницы. В нашем index.html скопируйте следующую разметку, чтобы начать работу:

Это простой макет с основным элементом обертывания, содержащим боковую панель в стороне и содержимое div. В боковой панели у нас есть два раздела: my-info и nav с классом меню. Наши зависимости также включены, в частности, последняя версия jQuery 1.x. Давайте теперь начнем заполнять наш файл Sass некоторыми переменными.

Это прекрасный кусок кода, чтобы начать с! Это действительно просто настройка некоторых значений по умолчанию и переменных для использования в нашем Sass-файле. Наиболее важным здесь является то, что содержит четыре переменные точки разрыва. Они определяют, в каких точках наш макет должен измениться. Сасс очень полезен здесь, так как мы можем просто ссылаться на эти переменные при написании наших медиа-запросов, и если точка останова должна измениться, есть только одно место для ее изменения.

Как вы можете видеть по инструкции @import, мы также импортируем шрифт Google, используемый в проекте, и копию Normalize.css, которую мы скачали ранее. До сих пор единственным объявлением является класс группы, который является clearfix для элементов, содержащих плавающие элементы. Ознакомьтесь с nicolasgallagher.com для получения дополнительной информации.

Если все настроено правильно, сохранение styles.scss создаст простой CSS-файл, который мы включили в нашу страницу. Просмотр страницы теперь покажет довольно скучный белый экран, поэтому давайте сделаем это более увлекательным, добавив еще несколько стилей и создав боковую область.

Боковая панель; Моя информация

Прежде всего, добавим следующее в наш файл Sass:

Теперь каждый элемент должен быть расположен относительно, а также имеет свойство box-sizing, установленное в border-box, позволяющее элементам иметь процентную ширину, включая их заполнение. Это означает, что мы можем установить два элемента рядом друг с другом шириной 50%, а затем отрегулировать заполнение в каждом из них так, как нам нравится, не нарушая макет. Очень, очень полезное правило CSS! Поддержка почти всех браузеров осуществляется через объявления с префиксом поставщика.

Остальные стили здесь действуют как значения по умолчанию для нашей страницы. Мы должны убедиться, что основные оберточные элементы остаются на высоте 100% в любое время, так как наша боковая панель должна заполнять экран вертикально. Здесь мы устанавливаем фон тела $ darkblue, который на самом деле является нашим цветом боковой панели. Это то, что дает нашей боковой панели внешний вид на 100%. На самом деле элемент боковой панели будет только до уровня его содержимого, но будет иметь прозрачный фон, тем самым отображая цвет позади него.

Давайте начнем склеивать боковую панель ...

Добавьте этот код в div .my-info. Возможно, вам придется переименовать portfolio-image в зависимости от того, что вы назвали. Здесь не так много, но сохранить файл и посмотреть в браузере.

Прекрасно. Теперь откройте style.scss и введите следующий код:

Поскольку мы следим за мобильной стратегией здесь, нам нужна наша боковая панель для полноразмерной и полной высоты при разрешении мобильных устройств. Быстрый запрос на получение информации для нашей $break-three три точки прерывания   боковой панели слева и ограничивает ширину до 20%.

Стили для .my-info достаточно просты. Мы просто хотим сосредоточить все и дать все пространство вокруг краев. Чтобы отделить наше ближайшее меню, мы просто используем границу 1px на нижнем краю. Чтобы сделать круговое изображение портфолио, дайте ему 50% -ный радиус границы и, наконец, мы должны переопределить некоторые стили шрифтов для любых элементов h1 или h2 внутри этого раздела.

Социальные медиа-ссылки

Теперь нам нужно заняться этими связями в социальных сетях, используя один из созданных нами спрайтов. Поместите следующий код непосредственно после деклараций h2 в последнем блоке кода.

Это выглядит довольно сложно, но на самом деле это не так. Основная часть этого кода обрабатывает отображение значков и их состояний зависания. Прежде всего мы должны пускать в ход каждый из элементов <a>, дать им ширину и высоту и также некоторые разницы к пространство их. Следующее, что мы делаем это указать фоновый рисунок: Это должно быть настроено на социальный спрайт, который мы создали ранее. Наконец, мы должны убедиться, что текст, используемый в каждом элементе, не отображается на странице. Свойство text-indent прекрасно позаботится об этом.

Следующий раздел интересный. Здесь мы указываем, какой фон использовать для дисплеев с высокой плотностью пикселей. Идея здесь состоит в том, чтобы использовать «удвоенную» версию социального спрайта, если соотношение пикселей устройства равно 2. Свойство background-size необходимо для масштабирования файла до исходного размера,поэтому весь наш код позиционирования работает без дублирования.

Следующие четыре раздела имеют одинаковую концепцию. Мы просто устанавливаем фоновое положение для каждого значка и соответствующего состояния зависания. Давайте посмотрим в браузере:

Потрясающие! Это выглядит очень хорошо. Если все правильно, все зависающие состояния должны работать, и все они должны выглядеть четкими на iPhone / iPad и т. Д. Теперь давайте начнем заниматься меню боковой панели.

Меню боковой панели

Начните с ввода следующего в index.html в контейнере меню.

Я думаю, что я просто объясняю, поэтому давайте продолжим, введя следующие стили после раздела my-info, но все же внутри общего элемента боковой панели.

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

Каждый из элементов h3 должен иметь разные цвета и разные значки. Для этого мы используем комбинацию: перед псевдоэлементом, спрайтами и медиа-запросами. Помимо этого, у нас есть несколько медиа-запросов для управления полями элементов h3 при больших размерах экрана. Это значит, что они всегда правильно расположены в отношении их меню.

Говоря о меню, мы добавим CSS для них в одно мгновение. Во-первых, давайте посмотрим в браузере:

Названия выглядят очень красиво! Меню не так много. Давайте быстро позаботимся об этом, прежде чем синие значения по умолчанию вызовут у нас больше боли ...

Список меню

В мобильных разрешениях мы хотим, чтобы наши меню были скрыты, поэтому пользователь может выбрать, чтобы скрыть или показать их, когда им нужен доступ к ним. Как только мы нажмем на нашу точку разрыва $break-three,  все меню должны быть видны все время.

Класс .open обрабатывает отображение меню при их открытии. Дизайн их довольно точно размещен, поэтому мы делаем то же самое здесь, используя поля. Опять же, точка разрыва $break-three входят в игру и переопределяют поля для этих резолюций и выше. Стили для элементов li довольно просты. Главное отметить использование CSS3 Transitions. Я использовал их здесь, чтобы при ярком угасании элемента выглядел приятный внешний вид. Я рекомендую вам поиграть с переходами, чтобы увидеть, какие интересные эффекты вы можете достичь!

Сохраним файл и просмотрим результаты в браузере.

Очень хорошо! Меню ведут себя так, как должны. Теперь мы собираемся выполнить наш первый бит JavaScript / jQuery, чтобы контролировать открытие и закрытие меню.

Откройте приложение app.js и введите следующую функцию:

Мы начинаем этот файл с функцией готов документ jQuery, которая в основном ожидает документа полностью будет готова перед запуском какого-либо кода. Подробнее о события ready на api.jquery.com.

Затем мы прикрепляем событие click к любому h3 внутри нашего элемента меню. Когда это событие происходит (когда пользователь нажимает на h3), мы используем jQuery, чтобы найти «следующий» элемент ul и переключить класс open на нем. Поэтому, если элемент уже имеет класс, он удалит его, и наоборот, если это не так. Конечная строка заключается в том, чтобы остановить любое действие по умолчанию для элемента. Это, вероятно, не применяется здесь, потому что элементы h3 не имеют действия по умолчанию, тогда как, например, тег привязки. Тем не менее, это хорошая практика, чтобы привыкнуть включать его при использовании обработчиков событий кликов.

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

Это завершает боковую область! Давайте продвигаемся вперед и получаем некоторый контент на странице.

Основное содержание

Первым шагом здесь является добавление HTML, который нам нужен на странице.

Поместите этот код внутри div .content. У нас есть три статьи, которые представлены в дизайне, а также статья «Загрузка». Я поместил значок загрузки в свой собственный элемент портфеля, чтобы мы могли сохранить структуру страницы. Затем я могу просто поместить значок загрузки внутри элемента портфолио-изображения. Вы также увидите здесь, что первый элемент портфеля имеет первый класс. Это будет важно в нашем CSS, с которым мы столкнемся, сделав еще один быстрый просмотр в браузере:

Приятно, но не совсем то, что мы хотим, поэтому давайте прямо в стили.

Еще один большой кусок кода! Давайте разложим его по частям. Стили .content аналогичны стилям боковой панели в том, что в мобильных разрешениях нам просто нужна полная ширина, но что-либо на уровне $ break-three или выше, мы должны поплавать и увеличить ширину до 80%. Нам также необходимо предоставить content div на белом фоне, чтобы отделить его от боковой панели.

Элементы элементов портфеля должны иметь серый фон. Чтобы создать временную шкалу, проходящую по левому краю области содержимого, мы собираемся предоставить каждому элементу портфолио элемент a: before. Здесь мы просто абсолютно позиционируем его 17px с левого края и используем трюк top / bottom, чтобы заставить его иметь 100-процентную высоту. Это включает настройку как верхнего, так и нижнего свойств на 0, что в действительности означает, что элемент находится в обоих местах, в результате чего элемент полной высоты. Это также работает для свойств слева и справа для создания элемента полной ширины. Мы должны позиционировать наш первый элемент портфеля в стороне от верхнего края окна, которое мы достигаем здесь, установив верхнее свойство на 30 пикселей.

Кроме того, статьи с портфолио-информацией должны быть на 100% больше, если мы не находимся в $ break-three или выше. Чтобы создать маленький красный круг, видимый на дизайне, я решил использовать элементы даты, поскольку эти два кажутся связанными. В CSS лучший способ добиться этого - использовать: перед псевдоэлементом. Чтобы сделать его кругом, он должен иметь некоторую высоту и ширину, а радиус границы - 50%. Затем мы полностью позиционируем его слева от даты. Чтобы получить небольшой промежуток вокруг него, просто примените границу того же цвета, что и элементы элемента портфеля.

Мета-информация очень проста. Просто установите текст черным и дайте ему верхний край. Любые  <p> теги внутри здесь не должны иметь полей. Сохраните файл и посмотрите, что достигло этого относительно короткого раздела кода.

Сейчас это очень близко! Давайте продолжим наши стили контента ...

Поместите это непосредственно после стилей портфолио. Этот короткий блок кода сделает изображения внутри элементов портфеля отзывчивыми. Идея состоит в том, чтобы уменьшить изображение до столь же небольшого, как нам нужно, но только масштабировать до их фактической ширины. Это означает, что у вас должны быть изображения с фиксированной шириной, но это вполне возможно в макете / шаблоне, подобном этому, поскольку изображения, вероятно, будут динамически генерироваться и обрезаны до определенного размера.

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

Следующий

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.