[Задание по вёрстке #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. EdBond

    Вам не кажется, что оно похоже на предыдущее?

    1. usf

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

       

    2. Арсений (Автор записи)

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

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

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

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

  2. Alex

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

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

    1. Арсений (Автор записи)

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

      1. Alex

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

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

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

        1. usf

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

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

          1. Владимир

            ul то вот как раз явный, но в последнее время тенденция всё же ближе к inline-block.

          2. Alex

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

            1. Арсений (Автор записи)

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

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

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

  3. Sergalas

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

    1. Владимир

      В каком месте там javascript?

    2. Арсений (Автор записи)

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

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

  4. redsonja

    Курсор так же и остается пальчиком при наведении на тултип?

    1. Арсений (Автор записи)

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

  5. Николай

    http://jsfiddle.net/GruZZ/pwS4c/embedded/result/ — вот как-то так.

    Решение сырое, грязное, на победу не претендующее.

    Просто было немного свободного времени, хорошее настроение и ваш сайт всплыл в RSS-ленте (-:

    1. FataL

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

      Хорошо:

      Items 36
      Amount $2,504.36

      Плохо:

      Items
      Amount
      36
      $2,504.36

       

      1. Арсений (Автор записи)

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

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

        1. FataL

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

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

  6. Blowup

    решение — http://result.dabblet.com/gist/5188515/04d08ebfe7a1d57d18b1f5152c2e7ae0f8c1c2aa

    p.s. не ожидал, что выберете мою верстку к предыдущему заданию в качестве лучшей, я там с бэкграундами намудрил прилично, но тем не менее, приятно=)

     

    1. Blowup
      1. Annecy

        Спасибо, вы подкинули одну интересную мысль ;)

    2. acsy

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

  7. Annecy
  8. Libiros
  9. usf

    http://codepen.io/usf/pen/GgbEa

    как-то так. возможно допилю еще

  10. Sergalas

    http://jsfiddle.net/Sergalas/jYxgg/embedded/result так и не получилось transition вставить может подскажите как 

    1. Sergalas

      вначале не вудиел что использование ul не комельфо но уже позно 

    2. Blowup

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

      #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 должен работать

  11. lazuren

    Постарался учесть все сделанные мне ранее замечания и посмотрите что с этого вышло http://lazuren.ru/portfolio/2/

  12. Kletchatii

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

    http://jsfiddle.net/zusuw/1/embedded/result/

    1. Павел Тринько

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

      1. Антон

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

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

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

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

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