Как сделать загнутые уголки на 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.