[Задание по вёрстке #13] Заметка (стикер)
Добрый день, верстальщики! Уже пятница и пора потренироваться на выходных. [Задание по вёрстке] – это рубрика статей, которые мы публикуем по пятницам. В каждой статье Вы найдете шаблоны кнопочек, форм или даже сайтов в формате PSD. Ваша задача – красиво и качественно сверстать шаблон.
Лучшее решение [Задание по вёрстке #12]
Сегодня мы выбрали 2-х человек, amelice и krontill. Теперь немного конкретнее:
- krontill — хорошее исполнение, но большое количество div-ов и id-шников
- amelice — есть расхождения с макетом, касательно отступов
Благодарим остальных участников и смотрим новое задание!
Перейдём теперь к самому заданию.
Заметка (стикер)
Оригинальная заметка (стикер). Простенько и со вкусом. Где и как применить? Предполагаю, за этим вопрос не станет.
А вот решить поставленную задачу — куда увлекательнее. И так — за дело…
Требования к вёрстке:
1. Сверстать шаблон, используя HTML5 и CSS3. Добиться максимально одинакового результата во всех последних браузерах, начиная с IE10.
2. Выложить до 28.02.2013 г. исходный код на jsfidle и дать ссылку на своё решение в комментариях к этой статье. (Также можно на Facebook и Вконтакте).
Лучшее решение мы выберем и опубликуем через неделю в пятницу. Удачного коддинга на выходных! :D
P.S. Это тоже может быть интересно:
Всем привет! Вот моя версия и ссылка на код.
Пару слов о работе. Я решил использовать чистый css, поэтому кусочек скотча вышел не такой как на исходнике. Если кто-то смог сделать его только с использованием css, идентичным псдшнику, я бы с удовольствием посмотрел на это решение. Так же я решил добавить прозрачности.
Далее, я решил поменять шрифт, во-первых, потому что его нет в свободном доступе, а во-вторых, мне кажется более рукописный шрифт лучше смотрится на стикере.
Ну и в конце я добавил несколько вариантов цветов и чуть наклонил стикеры.
Хорошо получилось. Хотя, я так понимаю, автор упор делал как раз на этот стикер…
Конечно можно было вырезать картинки и слепить их, но я считаю, что надо более творчески подходить к той же верстке:)
Нет, картинками делать эту маленькую липучку не интересно совсем)
Еще думал сделать теньку типа такой. Как на первом примере, но там надо использовать :after и :before. Но :before у меня уже занят и добавлять лишний тег из-за "теньки" не захотелось) У меня была цель сделать максимально минимальный css и html :)
И это правильно! я придерживаюсь такого же мнения, чем меньше тем лучше)
Хорошая работа! Очень оперативно)
http://jsfiddle.net/Sergalas/QfJQz/embedded/result/
вот наваял просьба вот только есть если можно впредь использовать шрифты google font а то размещать их целая проблема.
чуть под редактировал http://jsfiddle.net/Sergalas/QfJQz/2/embedded/result/
все это последняя редакция http://jsfiddle.net/Sergalas/QfJQz/embedded/result/
))
Учтём вашу просьбу, спасибо за предоставленное решение. Смущает что стикер к низу экрана прилипает, отступ бы не помешал)
Да прото на локальном хосте выглядело нормально. А когда увидел в нете уже 4 раза иправлял решил не вылаживать новый но я испралю завтра(спать хочу).
http://jsfiddle.net/Sergalas/QfJQz/27/embedded/result/ вроде все
Мой вариант и его код
P.S. Думаю не принципиально, что не на jsfidleа код выложил)
Благодарны, за предоставленное решение
http://codepen.io/usf/pen/leBwH
Ссылки уже поломаться успели :(