Великолепные стикеры с помощью CSS3

Доброго времени суток!

Введение

В своё время было необходимо сделать заметки в форме стикеров для веб-сайта. Как вы понимаете, выбора большого особо не было и мой выбор пал на всеми нам любимый CSS3. С его появлением осуществление задуманного стало возможным без какого-либо велосипедостроения. Итак, моё решение проблемы под катом. На самом деле, мопед не мой. Мне дали всего-лишь покататься.

Данное решение работает в последних браузерах на движке Webkit (Safari и Chrome), Firefox и Opera. В остальных браузерах (читай, IE) есть шанс получить квадратный стикер жёлтого цвета без тени и анимации.

Шаг 1

Давайте начнём с простейшего варианта, который будет работать во всех браузерах. Для того, чтобы сделать стикер, мы будем использовать HTML5 и CSS3, что логично. А начнём мы с обычной HTML разметки, в которой мы обозначим тексты и заголовки наших заметок, которые по сути являются списками.

<ul>
     <li>
	  <a href = "#">
          <h2>Title #1</h2>
	  <p>Content #1</p>
          </a>
	 </li>
     <li>
	  <a href = "#">
	  <h2>Title #1</h2>
	  <p>Content #2</p>
	  </a>
     </li>
</ul>

Обратите внимание, что каждая заметка является ссылкой, что является достаточно хорошим подходом, т.к. это означает то, что если мы нажмём на нашу заметку, то в случае релевантной ссылке можем попасть на страницу, связанную непосредственно с заметкой.
Например, я записал «купить BMW X6» в воскресенье (тут хочется передать привет Boomburum, а по ссылке задал адрес, где найти эту машинку. Хе-хе!

CSS же, чтобы превратить этот списочек в жёлтые стикеры достаточно прост:

* {
     margin: 0;
     padding : 0;
}

body {
           font-family: arial, sans-serif;
           font-size: 100%;
           margin: 3em;
           background: #666;
           color: #FFF;
}

h2, p {
           font-size: 100%;
           font-weight: normal;
}

ul, li {
         list-style: none;
}

ul {
      overflow: hidden;
      padding: 3em;
}

ul li a {
           text-decoration: none;
           color: #000;
           background: #FFC;
           display: block;
           height: 10em;
           width: 10em;
           padding: 1em;
}

ul li {
        margin: 1em;
        float: left;
}

Данный код настолько тривиален, что нет смысла его комментировать, т.к. мы тут производим стандартные манипуляции. Такие как избавление от пуль в списке, назначение отступов и т.д.

Кстати, вот результат:



Данный вариант будет работать в любом браузере. Даже (!!!) в IE6. На этом мы и закончим его поддержку, т.к. нам нужны краски, а не одноцветный прямоугольник. Так ведь?

Шаг 2

Пора преукрасить наши стикеры. Давайте добавим к ним тени и зададим текстам заметок шрифт, похожий на рукописный. Для этого мы будем использовать Google Fonts API. А использовать мы будем шрифт под именем Reenie Beanie. Самый простой способ использовать данный API — работать с Google Font previewer:



Используя его, мы получаем кусочек HTML кода, который нам нужно вставить в свою страницу, чтобы использовать шрифт. Такой вариант будет поддерживаться во всех современных браузерах:

<source lang=«html>
<link href = „fonts.googleapis.com/css?family=Reenie+Beanie:regular“
rel = „stylesheet“
type = „text/css“>


Затем нам необходимо сделать отступ от заголовков к заметкам, чтобы наши заметки были читабельными. Познакомить абзацы с новымГодом шрифтом. Стоит обратить внимание, что размер шрифта должен быть достаточно крупным, чтобы можно было хорошо разглядеть наш Reenie Beanie.

ul li h2 {
             font-size: 140%;
             font-weight: bold;
             padding-bottom: 10px;
}

ul li p {
           font-family: "Reenie Beanie", arial, sans-serif;
           font-size: 180%;
}

А теперь давайте зададим тень нашим стикерам. Да так, чтобы во всех (кроме IE) браузрах отображалось:

ul li a {
           text-decoration: none;
           color: #000;
           background: #FFC;
           display: block;
           height: 10em;
           width: 10em;
           padding: 1em;
           -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1); /* для Firefox Грозного */
           -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 7); /* да для люда обычного, праведного */
           -box-shadow: 5px 5px 7px rgba(33, 33, 33, 7); /* и про Оперушку не забудем */
}

Смещение, цвет, ширина, высота — всё, как доктор прописал обычно. Вместе с новым шрифтом и нашими финтифлюшками тенями на стикеры теперь стало смотреть ещё приятнее. Выглядит они теперь вот так:

Шаг 3

Теперь я предлагаю вам заняться вещью ещё более увлекательной и интересной. Изменим углу поворота наших стикеров. Как? Используя свойство CSS3: transform: rotate. Вот так:

ul li a {
           -webkit-transform: rotate(-6deg);
           -o-transform: rotate(-6deg);
           -moz-transform: rotate(-6deg);
}

Отлично. На самом деле, нет. Таким образом мы наклонили все стикеры под одним и тем же углом. Даже открывать пример не хочется. Давайте с вами внесём разнообразия и повернём стикеры в разные углы? Давайте:

    ul li:nth-child(even) a{  
      -o-transform:rotate(4deg);  
      -webkit-transform:rotate(4deg);  
      -moz-transform:rotate(4deg);  
      position:relative;  
      top:5px;  
    }  
    ul li:nth-child(3n) a{  
      -o-transform:rotate(-3deg);  
      -webkit-transform:rotate(-3deg);  
      -moz-transform:rotate(-3deg);  
      position:relative;  
      top:-5px;  
    }  
    ul li:nth-child(5n) a{  
      -o-transform:rotate(5deg);  
      -webkit-transform:rotate(5deg);  
      -moz-transform:rotate(5deg);  
      position:relative;  
      top:-10px;  
    }

Теперь же каждая вторая ссылка будет наклонена на 4 градуса вправо, отступы по пятью Каждая третья будет отклонена на 3 градуса влево. И так далее… Пока не закончится фантазия.

Шаг 4

Согласитесь, надо внести возможность увеличивать нашу заметку при наведении на неё курсором. Тут мы опять воспользуемся CSS3, что не удивительно. Сказано — сделано:

    ul li a:hover,ul li a:focus{  
      -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);  
      -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);  
      box-shadow:10px 10px 7px rgba(0,0,0,.7);  
      -webkit-transform: scale(1.25);  
      -moz-transform: scale(1.25);  
      -o-transform: scale(1.25);  
      position:relative;  
      z-index:5;  
    } 

Мы добавили такой высокий z-index для того, чтобы при наведении наш стикер не ограничивал себя в захвате земель и перекрывал ближние стикеры. Собственно, при наведении мы увидим следующую картину:

Шаг 5

Всё-таки надо доделать, чтобы было красиво. Понимаете, чего нам не хваиает? Правильно, анимации. Нужно сделать переходы плавными, а не каменными. Такое ощущение, что ты в каменном веке или же тебе не хватает ЦП. Что же, поехали:

    ul li a{  
      text-decoration:none;  
      color:#000;  
      background:#ffc;  
      display:block;  
      height:10em;  
      width:10em;  
      padding:1em;  
      -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);  
      -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);  
      box-shadow: 5px 5px 7px rgba(33,33,33,.7);  
      -moz-transition: -moz-transform .15s linear;  
      -o-transition: -o-transform .15s linear;  
      -webkit-transition:-webkit-transform .15s linear;  
    }

Вот она наша анимация. К сожалению, скриншот не может её передать также, как телефон не может передать запах свежеиспечённой птицы пиццы. Какая жаль!
Но ещё бы хотелось разукрасить наши стикеры, а то как-то уж всё монотонно. Каждый второй стикер будет зелёным, каждый третий — синим. А что, неплохо.

ul li:nth-child(even) a{  
  -o-transform: rotate(4deg);  
  -webkit-transform: rotate(4deg);  
  -moz-transform: rotate(4deg);  
  position: relative;  
  top: 5px;  
  background: #cfc;  
}  
ul li:nth-child(3n) a{  
  -o-transform: rotate(-3deg);  
  -webkit-transform: rotate(-3deg);  
  -moz-transform: rotate(-3deg);  
  position: relative;  
  top: -5px;  
  background: #ccf;  
}

Опять же, анимацию мы на скриншоте увидеть не сможем, но нашу трёхцветную зёбру смесь — без проблем. А вообще, пример вы можете посмотреть здесь.

Заключение

Ну вот и всё на сегодня. Сегодня мы научились создавать красивые анимированные стикеры с помощью CSS3. Ведь красивые, правда?

Пример данного урока можно стянуть здесь.

До скорых встреч!