[Задание по вёрстке #13] Заметка (стикер)

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

 

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

Сегодня мы выбрали 2-х человек, amelice и krontill. Теперь немного конкретнее:

  • krontill — хорошее исполнение, но большое количество div-ов и id-шников
  • amelice — есть расхождения с макетом, касательно отступов

Благодарим остальных участников и смотрим новое задание!

Перейдём теперь к самому заданию.

Заметка (стикер)

Заметка (стикер)

Оригинальная заметка (стикер). Простенько  и со вкусом. Где и как применить? Предполагаю, за этим вопрос не станет. 

А вот решить поставленную задачу — куда увлекательнее. И так — за дело…

Скачать

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

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

2. Выложить до 28.02.2013 г. исходный код на jsfidle и дать ссылку на своё решение в комментариях к этой статье. (Также можно на Facebook и Вконтакте).

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

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

16 Комментарии

  1. EdBond

    Всем привет! Вот моя версия и ссылка на код.
    Пару слов о работе. Я решил использовать чистый css, поэтому кусочек скотча вышел не такой как на исходнике. Если кто-то смог сделать его только с использованием css, идентичным псдшнику, я бы с удовольствием посмотрел на это решение. Так же я решил добавить прозрачности.
    Далее, я решил поменять шрифт, во-первых, потому что его нет в свободном доступе, а во-вторых, мне кажется более рукописный шрифт лучше смотрится на стикере.
    Ну и в конце я добавил несколько вариантов цветов и чуть наклонил стикеры.

    1. Владимир

      Хорошо получилось. Хотя, я так понимаю, автор  упор делал  как раз на этот стикер…

      1. EdBond

        Конечно можно было вырезать картинки и слепить их, но я считаю, что надо более творчески подходить к той же верстке:)

        1. Владимир

          Нет, картинками делать эту маленькую липучку не интересно совсем)

          1. EdBond

            Еще думал сделать теньку типа такой. Как на первом примере, но там надо использовать :after и :before. Но :before у меня уже занят и добавлять лишний тег из-за "теньки" не захотелось) У меня была цель сделать максимально минимальный css и html :)

            1. Владимир

              И это правильно!  я придерживаюсь такого же мнения, чем меньше тем лучше)

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

      Хорошая работа! Очень оперативно)

  2. Sergalas

    http://jsfiddle.net/Sergalas/QfJQz/embedded/result/ 
    вот наваял просьба вот только есть если можно впредь использовать шрифты google font а то размещать их целая проблема.
     

    1. Sergalas

      чуть под редактировал http://jsfiddle.net/Sergalas/QfJQz/2/embedded/result/

      1. Sergalas

        все это последняя редакция http://jsfiddle.net/Sergalas/QfJQz/embedded/result/  
        ))

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

      Учтём вашу просьбу, спасибо за предоставленное решение. Смущает что стикер к низу экрана прилипает, отступ бы не помешал)

      1. Sergalas

        Да прото на локальном хосте выглядело нормально. А когда увидел в нете уже 4 раза иправлял решил не вылаживать новый но я испралю завтра(спать хочу).

      2. Sergalas
  3. Spamol

    Мой вариант и его код
    P.S. Думаю не принципиально, что не на jsfidleа код выложил)

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

      Благодарны, за предоставленное решение

  4. usf

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

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

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

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