Создайте эффект заметки за 5 простых шагов с помощью CSS3 и HTML5

В этом руководстве вы узнаете, как преобразовать список HTML в стену «заметок», которые выглядят и работают следующим образом:

Эффект создается постепенно и работает в последних браузерах Webkit (Safari, Chrome), Firefox и Opera. Другие браузеры просто получают несколько желтых квадратов.

Шаг 1: HTML и основные квадраты

Начнем с самой простой версии, которая работает во всех браузерах. Поскольку мы используем HTML5 для эффекта, основным HTML наших заметок является неупорядоченный список со ссылкой, содержащей все другие элементы в каждом элементе списка:

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

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

Мы сбрасываем вещи, которые браузер обычно дает нам, такие как поля и отступы, а также стиль списка, чтобы избавиться от маркеров списка.

Затем мы даем элементу UL некоторый отступ и устанавливаем его свойство overflow скрытым — это гарантирует, что при последующем перемещении элементов списка они будут содержаться в списке, а следующие элементы в документе автоматически очищают float.

Мы оформляем ссылку как желтый прямоугольник и перемещаем все элементы списка влево. Результатом является серия желтых полей для нашего списка:

Это работает для любого браузера, включая IE6. Это также то, где мы прекращаем поддерживать этот браузер, так как мы не должны использовать визуальные эффекты, поддерживаемые современными технологиями, как устаревшие.

Шаг 2: отбрасываем тени и шрифт Scribbly

Теперь пришло время добавить тень к заметкам, чтобы они выделялись, и использовать в качестве шрифта заметки каракули, написанный от руки. Для этого мы используем Google Fonts API и шрифт, который они нам предоставляют, который называется «Reenie Beanie». Самый простой способ использовать этот API — поиграть с Google Previewer :

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

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

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

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

Шаг 3: Наклон Ноты

Отказ от ответственности: как наклон заметок, так и масштабирование, которое мы добавим на следующем шаге, уже были объяснены в прошлом, в этой статье Zurb , но не имели поддержки других браузеров, так как их не было во время письмо. Огромное спасибо им за публикацию этого трюка.

Чтобы наклонить элемент, вы используете свойство transform:rotate CSS3 , снова добавляя префикс для каждого из браузеров:

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

Это наклоняет каждую вторую ссылку на четыре градуса вправо и смещает ее на пять пикселей сверху. Каждая третья ссылка наклоняется на три градуса влево и сдвигается на пять пикселей вверх. И каждая пятая ссылка поворачивается на пять градусов вправо и смещается на десять пикселей снизу. В целом это создает впечатление случайных заметок :

Шаг 4: Масштабирование заметок при наведении и фокусировке

Чтобы выделить заметку, мы используем большую тень и scale преобразование CSS3. Опять же, нам нужно определить их для каждого из браузеров:

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

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

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

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

Чтобы увидеть разницу с последним шагом, вам нужно попробовать последнюю демонстрацию в браузере .

Резюме и загрузка

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

Загрузите пример заметок в виде почтового индекса.

об авторе

Кристиан Хейлманн (Christian Heilmann) — международный евангелист-разработчик, работающий в Сети разработчиков Yahoo в прекрасном городе Лондон, Англия. Он написал две книги: « Начиная JavaScript с DOM Scripting и AJAX » и « Решения для веб-разработки ».