CSS-live.ru

[Задание по вёрстке #15] Корзина интернет-магазина

Добрый вечер, верстальщики! Уже пятница и пора потренироваться на выходных. [Задание по вёрстке] это рубрика статей, которые мы публикуем по пятницам. В каждой статье Вы найдете шаблоны кнопочек, форм или даже сайтов в формате PSD. Ваша задача красиво и качественно сверстать шаблон.

Лучшее решение [Задание по вёрстке #14]

Победителем на этой недели стал Blowup. Комментарии к работам:

  • Blowup — хорошая работа. В комментариях писали о подгрузке иконок, это заметно только в хроме, а так иконки в спрайте. Можно было оптимизировать css, прописать background один раз к тегу, а потом двигать его с помощью класса.
  • Sergalas — добавил transition, хорошо получилось, можно было поиграться со скоростью, ускорить немного. От спанов можно избавиться, например как Blowup. На макете сам тултип по аккуратнее выглядит.
  • Tyffaxyn — понравилось тем, что иконки в тултипе свёрстаны без классов, на вложенность. Если вести мышкой сверху-вниз, то тултип всплывает рано
  • usf — классный эффект на ховере, манера исполнения на отлично, жаль что не кроссбраузерно и шрифт подпортил иконки
  • Winner — неплохо для первой верстки. Можно сделать без использования списка, как в предыдущих работах, тем самым меньше вложенность, меньше html
  • Annecy — хорошая работа, но опять же ul
  • lazuren — иконки не в спрайте, ul, transition только для вебкита

Благодарим участников и смотрим новое задание.

Корзина — виджет для интернет-магазина

Корзина - виджет для интернет-магазина

Спасибо за терпение, из-за проблем с хостингом задание растянулось на две недели. Плюс — больше выполненных работ, минус — не смогли поздравить девушек, так что лучше поздно чем никогда. Девушки, вся мужская половина сообщества css-live.ru поздравляет Вас с международным женским днём.

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

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

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

Скачать

Требования к вёрстке:

1. Сверстать шаблон, максимально используя HTML5 и CSS3. Минимальные отклонения от макета ("пиксель в пиксель"). Добиться максимально одинакового результата во всех последних версиях браузеров, включая IE10.

2. Приветствуется минимальная вложенность, оптимизированный HTML5 и CSS3.

3. Выложить до 22.03.2013 г. исходный код на любой из площадок: jsFidle, codepen, JS Bin, CSSDeck. Дать ссылку на своё решение в комментариях к этой статье. (Также можно на Facebook и Вконтакте).

Лучшее решение мы выберем и опубликуем через неделю в пятницу. Удачного коддинга на выходных! :D

P.S. Это тоже может быть интересно:

33 комментария

    1. похоже действительно, но макет симпатичный, да и те, кто делал в предыдущий раз, могут сверстать этот с учетом рекомендаций к прошлому :)

       

    2. Похоже тем, что опять тултип для кнопки. Несколько "зайцев" тем самым хотели убить))

      1. Усложняем предыдущее задания, тут уже будет больше правильная семантика будет учитываться, и как сказали ранее, участники могут делать с учётом рекомендации, что несомненно прокачает скилл.

      2. Он розовенький с красненьким, в тему покупок подарков для 8 марта. Как бы подарок для девушек)

      3. Корзинок ещё не было в этой рубрике

  1. Про меня наверное забыли :) ?

    Я оставлял комментарий к посту в контакте, так как тогда сайт лежал.

    1. So sory! Впредь будем внимательнее) Две вещи, которые сразу заметил, это использование ul и иконки отдельными картинками, будем рады участию в этом задание)

      1. Не знаю принято ли тут обсуждать, но все же:

        — чем плохо использование ul? по моему явный ul.

        — иконки да отдельно, но они ведь ведь в data:url

        1. 1) потому что это увеличивается кол-во кода, а это вовсе не "явный ul".

          2) можно было в data:url  впихнуть спрайт ;)

          1. Зачем впихивать иконки в спрайт и делать лишнюю работу, если все равно это будет в data:url, объясните пожалуста?

            1. Я открыл результат вашей работы и посмотрел через фаербаг, увидел ul, увидел отдельные картинки и не стал углубляться дальше, так же не обратил внимания на использования data:url, если речь об этом.

              Если вопрос конкретно об оптимизации и правильности исполнения, типа что лучше спрайты или data:url в background, то это отличная темя для новой статьи на ccs-livesmiley

              Лично моё мнение: ну на один запрос стало меньше, но css стал больше. А если сделать спрайт и запихнуть его в data:url, то получиться — и запроса нет и css не такой большой, т.к. одна картинка в base64 против нескольких. Надеюсь понятно выразился)

  2.  Вопрос можно вы мне дали совет использовать работу Blowup:
     но насколько я понял он истользовал javascript  я себе просто ене мог позволить его использовать.

    1. Это было в том смысле что, он сделал это без спанов.

      И сразу отвечу на вопрос об ul. Вы можете делать списком, но в задании есть требования, касательно пункта 2. Оптимизированная работа имеет приоритет, это про html и css.

    1. Касательно этого макета, нет. Если оставить pointer, то получается что он весь кликабельный, но это же не так. В тултипе есть кнопка и ссылка куда пальчик нужен)

    1. Однозначно лучшее решение. Не знаю почему товарищи судьи не обращают внимания на семантику кода, отметив только, что ваш HTML слишком вложенный. В данном случае вы единственный, кто справился с заданием — у вас текст при отключенных стилях логичный (а это то, что "видят" поисковые системы и слепые в спец. браузерах-читалках). Этот фактор гораздо важнее любых безумных анимаций.

      Хорошо:

      Items 36
      Amount $2,504.36

      Плохо:

      Items
      Amount
      36
      $2,504.36

       

      1. Жадь что поисковики этого не оценят, т.к. товары покупать не умеют

        Для заданий есть требования и поддержка "слепыми" браузерами в данном случае не нужна

        1. Поисковики оценят связки слов, если они есть.

          А о слепых нужно заботится всегда, если не указано обратное (мы же ищем идеальную вёрстку). Да, и не только в слепых дело, некотрые браузеры умеют читать. Представьте, например, браузер на устройстве типа Google Glass.

    1. Если еще кнопочку закрасить фильтром градиента для ie9 — вообще супер будет. Действительно, ваш вариант лучший!

    1. добавьте следующие правила

      #table{

         visibility: hidden;
          opacity:0;
          -webkit-transition:all linear .3s;
          -moz-transition:all linear .3s;
          -o-transition:all linear .3s;
          transition:all linear .3s;

      }

      .but:hover #table{

      opacity: 1;
          visibility: visible;

      }   

      и уберите .but #table{transition: all 3s ease-in-out;}   

      после этого transition должен работать

    1. Следующее задание готовится, поэтому вы как раз успеваете ещё :)
      Сразу могу сказать, что слишком большой размер шрифта (не так, как в исходниках), что немного портит вид.

      1. И в правду шрифт немного портит вид, а то что вся верстка "поплыла ко все чертям" ЭТО НОРМАЛЬНО))))))))

Оставить комментарий

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

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.