CSS-live.ru

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

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

 

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

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

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

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

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

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

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

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

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

Скачать

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

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

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

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

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

17 комментариев

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

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

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

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

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

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

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

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