2 009 Сегодня мы попробуем построить на CSS3 стикеры-заметки и стикеры-таблички.
И так, поехали...
Посмотрите примеры, чтобы поиграть с кодом с помощью jsFiddle. Как вы видите, реализация очень проста.
CSS3 реально хорош. Изображений нет (кроме kiwi или dodo).
HTML разметка
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin' rel='stylesheet' type='text/css'> <ul id="notes"> <li> <p>Push new feature to Kiln for code review</p> </li> <li class="kiln"> <p>Browse hacker news for a bit</p> </li> <li> <p>Read JavaScript: The Good Parts by Douglas Crockford</p> </li> </ul> |
Обратите внимание, что уникальные шрифты вытягиваются прямо из Google CDN.
Немного CSS3 магии:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
body { background: #B2CCCC; } #notes li { position: relative; width: 300px; min-height: 100px; margin: 25px auto; padding: 60px 15px 15px 15px; background: #fff url(https://our.fogbugz.com/images/tbKiwiLogo.gif) no-repeat 4px 8px; -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5); -moz-box-shadow: 0 2px 12px rgba(0,0,0,.5); box-shadow: 0 1px 2px #000; -webkit-transform: rotate(-.5deg); -moz-transform: rotate(-.5deg); -o-transform: rotate(-.5deg); } #notes li:nth-child(even) { -webkit-transform: rotate(.5deg); -moz-transform: rotate(.5deg); -o-transform: rotate(.5deg); } #notes li.kiln { background-image: url(https://rob.kilnhg.com/Content/Images/kiln_focus.gif); } #notes li p { text-align: center; font: normal normal normal 40px/48px 'Reenie Beanie', Helvetica, Arial, sans-serif; color: #000; text-shadow: white 1px 1px 0px; overflow:hidden; } #notes li::before { content: ' '; display: block; position: absolute; left: 115px; top: -15px; width: 75px; height: 25px; z-index: 2; background-color: rgba(243,245,228,0.5); border: 2px solid rgba(255,255,255,0.5); -webkit-box-shadow: 0 0 5px #888; -moz-box-shadow: 0 0 5px #888; box-shadow: 2px 2px 2px #000; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -o-transform: rotate(-6deg); } #notes li:nth-child(even)::before { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -o-transform: rotate(6deg); } |
У каждой записки есть градиент на фоне, придающий стикеру цвет. Каждый стикер немного наклонен с помощью свойства transform и имеет небольшую тень, выполненую с помощью box shadow для придания 3D эффекта.
Липучка выполнена с помощью ::before,также имеет box shadow, абсолютного cпозиционирована, немного наклонена и имеет полупрозрачный фон (использована альфа-прозрачность).
Мы надеемся, что набор таких CSS техник был вам полезен. Смотрите код, изучайте...
