Создаем стикеры при помощи CSS3

Начнем с простейшего варианта, который работает во всех браузерах.

Шаг 1: HTML-разметка

Основной HTML-код нашей разметки представляет собой обычный неупорядоченный список, содержащий в каждом элементе списка все остальные элементы:

<ul class="list-unstyled">
  <li>
    <a href="#">
      <h2>Title #1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.</p>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>Title #2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.</p>
    </a>
  </li>
  ...
</ul>

Обратите внимание на то, что каждый стикер окружен ссылкой, которая является хорошим элементом при использовании клавиатуры. Если бы мы использовали элемент списка для эффекта, то мы должны были бы установить свойство tabindex, чтобы перемещаться по стикерам при помощи клавиатуры.

CSS, который превращает наш список в желтые квадраты, очень прост:

ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

ul li {
  width: 18rem;
}

ul li a {
  color: #000;
  text-decoration: none;
  padding: 1rem;
  background: #ffc;
  display: block;
}

ul li a h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

Ресет мы использовали от Bootstrap, а к родительскому элементу применили flex-модель и отцентрировали "потомков". Это значительно упростило стили и сделало код более наглядным и читабельным. Ширину элементов li указали явно тоже ради простоты. Вы же поступите с ней так, как посчитаете необходимым.

Для всех ссылок мы задали желтый фон и высоту, создав таким образом желтый квадрат. Flex-модель обеспечит следование наших "листков" друг за другом и перенос при соответствующих ширинах. Результат вы можете увидеть на картинке ниже:

Здесь нет ничего сложного и это будет работать в любом браузере. Про IE6 забудьте уже.

Шаг 2: Тени и шрифт

Теперь пришло время добавить тени к стикерам и использовать шрифт, напоминающий текст написанный от руки. Для подключения шрифта мы используем Google Fonts API, и найдем там шрифт под названием "Marck Script".

Подключать шрифт будем директивой @import через файл со стилями:

@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');

ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
...

Теперь стилизуем текстовые параграфы. Размер шрифта установим в 1.125rem (18px) для того, чтобы сделать "листочки" достаточно читабельными:

ul li a p {
  font-family: "Marck Script", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.3;
}

Для того чтобы создать тени для стикера, что позволит его "приподнять" над страницей, нам нужно применить box-shadow. Правила для браузеров уже давно стали историей, поэтому универсального свойства box-shadow будет вполне достаточно:

ul li a {
  color: #000;
  text-decoration: none;
  padding: 1rem;
  background: #ffc;
  display: block;
  box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
}

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

Шаг 3: Наклон стикеров

На следующем шаге мы немного повернем наши стикеры, чтобы они выглядели естественно.

Для этого, чтобы наклонить элемент, мы используем свойство CSS3 transform:rotate. Добавим ссылкам свойство position: relative для того, чтобы на следующем шаге подвигать их вверх-вниз.

ul li a {
  color: #000;
  text-decoration: none;
  padding: 1rem;
  background: #ffc;
  display: block;
  box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
  transform: rotate(-6deg);
  position: relative;
}

Это позволит повернуть все ссылки на шесть градусов влево. Теперь, чтобы повернуть стикеры случайным образом, мы используемсвойство CSS3 nth-child:

ul li:nth-child(even) a {
  transform: rotate(4deg);
  top: 5px;
}

ul li:nth-child(3n) a {
  transform: rotate(-3deg);
  top: -5px;
}

ul li:nth-child(5n) a {
  transform: rotate(5deg);
  top: -10px;
}

Теперь четные ссылки будут повернуты на четыре градуса вправо. Каждая третья ссылка будет повернута на три градуса влево, а каждая пятая – на пять градусов вправо. В целом это производит впечатление случайно расположенных заметок:

Шаг 4: Увеличение стикеров при наведении мыши

Для того, чтобы заметка увеличивалась при наведении мыши или попадании фокуса мы используем увеличенную тень и scale-трансформацию CSS3:

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

Мы также добавляем z-index для того, чтобы увеличившийся стикер перекрывал остальные. Мы применяем это при наведении мыши :hover или при попадании фокуса :focus на ссылку:

Шаг 5: Добавление плавных переходов и цвета

На последнем шаге, сделаем переход, от наклоненного стикера к увеличенному, гладким и привлекательным, а не резким. Для этого мы используем CSS3 transition:

ul li a {
  color: #000;
  text-decoration: none;
  padding: 1rem;
  background: #ffc;
  display: block;
  box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
  transform: rotate(-6deg);
  position: relative;
  transition: transform .15s linear;
}

По сути это правило говорит: что если что-то изменяется в этом элементе, то изменения необходимо делать постепенно, в течение четверти секунды. Также давайте добавим немного цвета: сделаем каждый второй стикер зеленым и каждый третий синим:

ul li:nth-child(even) a {
  background: #cfc;
  transform: rotate(4deg);
  top: 5px;
}

ul li:nth-child(3n) a {
  background: #ccf;
  transform: rotate(-3deg);
  top: -5px;
}

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

Заключение

Итак, что мы имеем? Плавная анимация и наклоненные заметки без использования изображений или JavaScript с поддержкой Firefox, Opera, Safari и Chrome. Используя селектор nth-child, CSS-преобразования и переходы, мы избежали использования скриптов. Кроме того, Google Web Font API сделал простым использование рукописного пользовательского шрифта. Псевдоклассы :hover и :focus, позволят применить анимацию при использовании как мыши, так и клавиатуры.