Як зробити загнуті кути на CSS3 без зображень

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

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

У попередніх статтях ми вивчили, як створювати словесні бульбашки та стрічки без зображень та додаткових HTML-елементів, використовуючи CSS3 для псевдоелементів :before та :after. У цій статті ми застосуємо схожий підхід для створення ефекту загнутих кутиків паперу.

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

Нещодавно для цього доводилося створювати тінь у вигляді зображення у графічних програмах Photoshop, Gimp або інших. Оптимально використовувати 24-бітний PNG із прозорістю, який можна накладати на будь-який фон, але це може викликати проблеми в старих браузерах.

На щастя, CSS3 надає гарну альтернативу з деякими перевагами.

• Ефект працює у сучасних браузерах, але не застосовується у браузерах, що його не підтримують.
• Тінь може бути накладена на будь-який фон без додаткових зображень.
• Ефект застосовується до елементів будь-якого розміру.
• Використаний код займає набагато менше байтів, ніж зображення тіні.
• Тінь легко налаштовується. Ви можете змінити колір або глибину за допомогою невеликої модифікації коду.

Для початку створимо наш єдиний HTML-елемент:

<div class="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.