sticky notes

Стикеры на CSS3

Сегодня мы попробуем построить на CSS3 стикеры-заметки и стикеры-таблички.

И так, поехали...

Посмотрите примеры, чтобы поиграть с кодом с помощью jsFiddle. Как вы видите, реализация очень проста.

CSS3 реально хорош. Изображений нет (кроме kiwi или dodo).

HTML разметка

Обратите внимание, что уникальные шрифты вытягиваются прямо из Google CDN.

Немного CSS3 магии:

У каждой записки есть градиент на фоне, придающий стикеру цвет. Каждый стикер немного наклонен с помощью свойства transform и имеет небольшую тень, выполненую с помощью box shadow для придания 3D эффекта.

Липучка выполнена с помощью ::before,также имеет box shadow, абсолютного cпозиционирована, немного наклонена и имеет полупрозрачный фон (использована альфа-прозрачность).

Мы надеемся, что набор таких CSS техник был вам полезен. Смотрите код, изучайте...


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