Создаем адаптивную страницу портфолио с фильтрами

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

HTML разметка

Указываем заголовок страницы, необходимые meta-теги, подключаем .css и .js файлы:

code
<!doctype html>
<html>
  <head>
  <title>Адаптивная страница портфолио с фильтрами</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  <meta http-equiv="keywords" content="">
  <meta http-equiv="description" content="">  
   
  <meta name="author" content="">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="">
  <link rel="apple-touch-icon" href="">

  <link rel="stylesheet" href="css/index.css" >
  <link rel="stylesheet" href="css/media-queries.css">
   
  <script src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script>
  <script src="js/index.js"></script>
  </head>


Создаем тело страницы. В блоке каждому элементу присваиваем идентификатор категории, по которому будем обращаться через JavaSript:

  • Код
    <!doctype html>
    <body>
      <div class="container">
      <header>
      <h1 class="title">
      Адаптивная страница портфолио с фильтрами
      </h1>
      <nav>
      <ul>
      <li id="all">Все</li>
      <li id="web">Сайты</li>
      <li id="design">Дизайн</li>
      <li id="infogrphic">Инфографика</li>
      <li id="movie">Ролики</li>
      </ul>
      </nav>
      </header>
      <section class="work">
      ...
      </section>
      <footer></footer>
      </div>
    </body>


    Создаем элементы портфолио
    , классы которых равны идентификатору категории. Внутри элементов портфолио будет изображение и список определений

    Код

    <figure class="web">
      <a href="#">
      <img src="images/1.png" alt="" />
      <dl>
      <dt>Категория</dt>
      <dd>Описание работы</dd>
      </dl>
      </a>
    </figure>


    CSS

    Стилизуем основные элементы-контейнеры:

    Код

    body {
      background: #dfdfdf url('/images/pattern.png');
      padding: 0;
      margin: 0;
    }

    .container {
      width: 960px;
      margin: 10px auto;
      oveflow: hidden;
    }

    header {
      text-align: center;
    }

    h1 {
      font-family: Ubuntu;
      font-size: 30px;  
      font-weight: 300;  
    }


    Задаем стиль для навигационной панели:

    Код

    nav ul {
      list-style: none;
      padding: 0;
      margin: 50px 0;
      text-align: center;
    }
    nav ul li {
      display: inline;
      cursor: pointer;
      margin-right: 10px;
      color: #666;
      font-size: 12px;
      transition: 0.3s;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      -ms-transition: 0.3s;
    }
    nav ul li:hover {
      color: #000;
    }
    nav ul li:last-child { /* Убираем margin у последнего элемента списка для корректного центрирования */  
      margin-right: 0;
    }
    nav ul li:after { /* Добавляем разделитель '/' */  
      margin-left: 10px;
      content: '/';
      color: #bbb;
    }
    nav ul li:hover:after {
      color: #bbb;
    }
    nav ul li:last-child:after { /* Убираем разделитель '/' после последнего элемента списка */  
      content: '';
    }

    .current-li { /* Присваиваемый класс выбранному элементу категории */  
      color: #000;
    }


    Стилизуем элементы портфолио:

    Код

    .work {
      margin: 20px 0;
    }
    .work figure {
      float: left;
      margin: 20px;
      width: 200px;
      height: 200px;
      background: #0296BA;
      /* Используем webkit фильтр */
      -webkit-filter: sepia(0.4);  
      position: relative; /* Поскольку к <dl> применяется абсолютное позицианирование */
      padding: 0 !important;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
      transition: 0.6s;
      /* Анимация сортировки работ при выборе категории */
      -webkit-transition: 0.6s;
      -moz-transition: 0.6s;
      -o-transition: 0.6s;
      -ms-transition: 0.6s;
    }
    .work figure a img {
      height: 100%;
      width: 100%;
    }


    Описание к каждой работе в портфолио должно появляться при наведении на нее (тег
    ). Устанавливаем нулевую непрозрачность и абсолютное позицианирование для
    :

    Код

    .work figure a {
      text-decoration: none;
    }

    .work figure a img {
      height: 100%;
      width: 100%;
    }
    .work figure dl {
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      padding: 20px;
      margin: 0;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      transition: 0.6s;
      -webkit-transition: 0.6s;
      -moz-transition: 0.6s;
      -o-transition: 0.6s;
      -ms-transition: 0.6s;
    }
    .work figure:hover dl {
      opacity: 1;
    }
    .work figure dl dt {
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .work figure dl dd {
      font-size: 12px;
    }


    Стилизуем классы .selected и .not-selected, свойства которых описывают изменения в анимации элементов
    при выборе категории.

    Код

    .selected {
      -webkit-filter: sepia(0) !important;
      -webkit-transform: scale(1.05);
      -moz-transform: scale(1.05);
      -o-transform: scale(1.05);
      -ms-transform: scale(1.05);
      transform: scale(1.05);
    }

    .not-selected {
      -webkit-transform: scale(0.75);
      -moz-transform: scale(0.75);
      -o-transform: scale(0.75);
      -ms-transform: scale(0.75);
      transform: scale(0.75);
      -webkit-filter: grayscale(1) !important;
    }


    Selection и Scrollbar

    Прошли те дни, когда было актуально стилизовать scrollbar в IE 5.5 и IE6 с помощью не стандартизированных W3C свойств вида scrollbar-base-color. Хочется поделиться одной интересной особенностью webkit:

    Код

    ::selection {
      background: #333;
      color: #FFF;
    }
    ::-webkit-scrollbar {
      width: 9px;
    }
    ::-webkit-scrollbar-track {
      background:#eee;
      border: thin solid lightgray;
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset;
    }
    ::-webkit-scrollbar-thumb {
      background:#999;
      border: thin solid  


    C помощью псевдо-селекторов ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb; мы простилизовали scrollbar в webkit, что похоже на скроллинг в Gmail. Учитывая количество пользователей Google Chrome, Safari, Yandex Browser мы можем смело применять эти свойства, так как это не останется незамеченным практически для половины аудитории Вашего сайта.

    Media Queries

    965px или меньше

    840 = (170+40)*4. Ширина .conteiner равна сумме ширины и значений свойств margin-left и margin-right помноженных на 4 (элемента).

    Код

    /* Старые мониторы, нетбуки, планшеты (в горизонтальном положении) */
    @media only screen and (max-width: 965px) {
      .container {
      width: 840px;  
      }
      .work figure {
      width: 170px;
      height: 170px;
      }
    }


    860px или меньше

    При этом разрешении в одной строке выводится три элемента — 720 = (200+40)*3.

    Код

    /* Нетбуки, планшеты */
    @media only screen and (max-width: 860px) {
      .container {
      width: 720px;
      }
      .work figure {
      width: 200px;
      height: 200px;
      }
    }


    740px или меньше

    600 = (160+40)*3. Добавим непрозрачность 0.5 что бы на устройствах с данным разрешением заметнее выглядели элементы с классом .not-selected:

    Код

    /* Планшеты и телефоны */
    @media only screen and (max-width: 740px) {
      .container {
      width: 600px;
      }
      .work figure {
      width: 160px;
      height: 160px;
      }
      .not-current {
      opacity: 0.5;
      }
    }


    610px или меньше

    460 = (160+70)*2

    Код

    /* Телефоны (в горизонтальном положении) и Планшеты (в вертикальном положении) */
    @media only screen and (max-width: 610px) {
      .container {
      width: 460px;
      }

      .work figure {
      margin: 20px 35px;
      }
    }


    480px или меньше

    320 = 200 + 120

    Код

    /* Телефоны (в горизонтальном положении) */
    @media only screen and (max-width: 480px) {
      .container {
      width: 320px;
      }
      .work figure {
      width: 200px;
      height: 200px;
      margin: 20px 60px;
      }
    }


    JavaScript — jQuery

    Все просто — манипулируем классами:

    - Создаем обработчик события при клике на категории nav > li
    - У всех элементов, где класс совпадает с идентификатором выбранной категории удаляем класс .not-selected и добавляем .selected.
    - Удаляем класс .corrent-li и добавляем .current-li выбранной категории.
    - Для всех работ не входящих в выбранную категорию удаляем класс .selected и присваиваем .not-selected

    Код

    function scaleDown() { // Заменяем классы у выделенных элементов, и удаляем класс у текущей категории
      $('.work > figure').removeClass('selected').addClass('not-selected');
      $('nav > ul > li').removeClass('current-li');
    }

    function show(category) { // Добавляем класс к категории, меняем классы у выбранных работ
      scaleDown();
      $('#' + category).addClass('current-li');
      $('.' + category).removeClass('not-selected');
      $('.' + category).addClass('selected');
      if (category == "all") { // Если выбраны все работы
      $('nav > ul > li').removeClass('current-li');
      $('#all').addClass('current-li');
      $('.work > figure').removeClass('selected, not-selected');
      }
    }

    $(document).ready(function(){
      $('#all').addClass('current-li');
      $("nav > ul > li").click(function(){
      show(this.id);
      });
    });

    • FalleN

    • 2306

    • 1

    • 202

    Ссылки на статью:

    Прямая ссылка:
    HTML-код:
    ББ-код:

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

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

    Для добавления вы должны авторизироваться!