Создание эффекта загибающейся бумаги без изображений с использованием CSS3

ten-dlya-bumagni-640x153[1]Вы уже могли читать, как создать текстовые выноски или ленты без дополнительных элементов HTML или изображений. Этого можно добиться с помощью эффектов CSS3, применяемым к псевдоэлементам :before и :after. В этом уроке мы воспользуемся таким способом для создания эффекта загибающейся бумаги.

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

513-css3-paper-curl-1[1]

Раньше для такой тени нужно было изображение, созданное в графическом редакторе, таком как Photoshop, Gimp и т. п. Лучше всего, если это было бы 24-битное изображение в формате png с альфа-каналом, которое могло быть наложено сверху на любой фон, но такое изображение могло вызвать проблемы в старых версиях браузеров.

К счастью, CSS3 предоставляет хорошую альтернативу с дополнительными плюсами:

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

Для начала давайте создадим HTML элемент, к которому мы будем применять этот эффект:

И применим тени к его внутренним и внешним границам:

513-css3-paper-curl-1[1]

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

  1. повернуты и искривлены с помощью трансформаций CSS3, которые при использовании приставок производителей будут работать во всех современных версиях браузеров
  2. расположены на нижнем краю
  3. имеют свойство тени блока.

513-css3-paper-curl-2[1]

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

513-css3-paper-curl-3[1]

Код CSS для псевдоэлементов:

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

Пожалуйста, посмотрите демонстрацию работы, чтобы увидеть пример в действии. Эффект работает в браузерах Internet Explorer от версии 9, Firefox, Chrome, Safari и Opera. В браузерах Internet Explorer версий 6, 7 и 8 эффектов теней не будет, но функциональность не пострадает.

Автор урока Craig Buckler
Перевод — Дежурка

Добавить комментарий