Как сделать загнутые уголки на CSS3 без картинок

Оригинал: sitepoint.com/pure-css3-paper-curl

Перевод: Влад Мержевич

В моих предыдущих статьях мы изучили как делать словесные пузыри и ленты без дополнительных HTML-элементов или картинок. Это было достигнуто с использованием эффектов CSS3 применяемых к псевдоэлементам :before и :after. В этой статье мы задействуем похожий приём для создания эффекта загнутых уголков бумаги.

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

Ещё недавно вам надо было делать тень в виде изображения в графической программе Photoshop, Gimp или другой. В идеале это будет 24-битный PNG с прозрачностью, который накладывается на любой фон, но это может вызвать проблемы в старых браузерах.

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

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

Для начала давайте создадим наш единственный HTML-элемент:

<div class="box">My box</div>

и добавим небольшую тень внутри и снаружи.

.box {
 position: relative;
 width: 500px;
 padding: 50px;
 margin: 0 auto;
 background-color: #fff;
 -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

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

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

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

CSS-код для псевдоэлементов.

.box:before, .box:after {
 position: absolute;
 width: 40%;
 height: 10px;
 content: ' ';
 left: 12px;
 bottom: 12px;
 background: transparent;
 -webkit-transform: skew(-5deg) rotate(-5deg);
 -moz-transform: skew(-5deg) rotate(-5deg);
 -ms-transform: skew(-5deg) rotate(-5deg);
 -o-transform: skew(-5deg) rotate(-5deg);
 transform: skew(-5deg) rotate(-5deg);
 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 z-index: -1;
}
.box:after {
 left: auto;
 right: 12px;
 -webkit-transform: skew(5deg) rotate(5deg);
 -moz-transform: skew(5deg) rotate(5deg);
 -ms-transform: skew(5deg) rotate(5deg);
 -o-transform: skew(5deg) rotate(5deg);
 transform: skew(5deg) rotate(5deg);
}

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

Пожалуйста, ознакомьтесь с демонстрационной страницей для примера. Как и ожидалась, пример работает в IE9, Firefox, Chrome, Safari и Opera. IE6, IE7 и IE8 показывают изящную деградацию, в этих браузерах никаких эффектов тени нет. Весь код CSS содержится внутри HTML.

http://htmlbook.ru/blog/kak-sdelat-zagnutye-ugolki-na-css3-bez-kartinok

Posted in: CSS3