Створюємо ефект складеної папери з допомогою CSS3

1

Від автора: з цього підручника ми дізнаємося, як створити гнучкий (адаптивний) ефект складеної папери з допомогою властивостей CSS3, таких як фонові градієнти і тіні блоку, створивши при цьому відмінно виглядає фон області вмісту вашого вебсайту.

Створюємо ефект складеної папери з допомогою CSS3Створюємо ефект складеної папери з допомогою CSS3

Крок 1: Встановлюємо head

Давайте почнемо з створення базової HTML-сторінки. Ми застосуємо HTML5, тому що… а чому ні?!

Flexible Folded Paper Effect
<
.gradient {
filter: none;
}

В head ми застосовуємо HTML5 doctype, встановлюємо title, викликаємо таблиці стилів, а також використовуємо мета-тег viewport для того, щоб наш ефект був адаптивний до мобільних пристроїв і «таблеток». Наприкінці, ми використовуємо заглушку, щоб старі браузери розуміли нові теги html5, а також налаштування градієнтів CSS3 для IE, яка пізніше знадобиться нам в цьому підручнику.

Крок 2: Встановлюємо body

Flexible Folded Paper Effect

Achieved with a mixture of CSS3 gradients and box-shadows.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin sapien augue quis pellentesque pulvinar. Morbi non ligula eu justo posuere tincidunt sit amet id nulla. Praesent lectus lacus, tristique at dictum ac, porta at magna. Phasellus est nunc, pulvinar non tempor a, condimentum vitae eros. Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.

Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.

Тепер в основний області сторінки у нас є всього один контейнер div, огортаючий сторінку і другий, огортаючий «папір». Всередині цього div а ми кожен раз будемо додавати тег section, коли нам знадобиться складений ділянку паперу. Існує два види цих ділянок, і пізніше в CSS ми зможемо їх розрізняти за допомогою селекторів nth-child: ‘odd’ (непарний) і ‘even’ (парний). Таким чином, наш HTML буде настільки семантичним, наскільки це можливо, без зайвих імен класів.

У ці розділи ми додали трохи контенту. Це – звичайна структура нормальної сторінки, але у нас є все потрібне для створення ефекту складеної папери шляхом переходу до CSS.

Крок 3: Створення загальних стилів сторінки

Ми збираємося заради інтересу створити ефект повністю «з нуля» в CSS, без зображень.

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #777;
}
#page-wrap {
margin: 0 auto;
max-width: 980px;
width: 100%;
}
.paper {
margin: 30px auto;
background: #f5f4f0;
max-width: 960px;
width: 90%;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}
h1 {
font: bold 50px «Georgia», serif;
text-align: center;
text-shadow: 0 1px 0 #fff;
margin-bottom: 20px;
}
h2 {
font: bold 25px «Georgia», serif;
text-align: center;
}

Створюємо ефект складеної папери з допомогою CSS3

Ось основні стилі сторінки. Ми поставили фіксовану максимальну ширину max-width і процентне співвідношення до поточної ширині, щоб весь «паперовий» елемент був гнучким. Стилі заголовків, природно, наведені тільки для прикладу, міняйте їх на свій розсуд і в залежності від вашого дизайну.

Крок 4: Стилі обох фрагментів зі складками

section {
width: 100%;
min-height: 100px;
position: relative;
padding: 30px;
}

Створюємо ефект складеної папери з допомогою CSS3

Переконаємося, що кожен фрагмент простягається на 100% через свій батьківський елемент. Ми визначаємо мінімальну висоту min-height, таким чином, якщо знадобиться додати порожні фрагменти-«складки», як в нашому прикладі, вони не опиняться висотою 0px. Потім оголошуємо відносне позиціонування position relative і додаємо невеликий відступ, знову ж таки актуальний тільки для даного дизайну.

Примітка: У цьому розділі дуже важливо задати position: relative;, нам це потрібно, щоб розмістити елементи тіні, які представляють весь ефект у вигідному вигляді.

Крок 4: Додаємо градієнт

.paper section:nth-child(even) {
background: -moz-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
background: -webkit-gradient(linear, left, top, bottom right, color-stop(0%, #e9eae5), color-stop(100%, rgba(244, 245, 240, 0)));
background: -webkit-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
background: -o-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
background: -ms-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
background: linear-gradient(135deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%);
filter: програми:DXImageTransform.Microsoft.gradient(startColorstr=’#e9eae5′, endColorstr=’#00f4f5f0′,GradientType=1 );
}

Створюємо ефект складеної папери з допомогою CSS3

На цей раз ми призначаємо стилі кожному парним елементу розділу: це означає другому, четвертому, шостому і т. д. Для створення враження тіні, що відкидається на папір у тривимірному просторі, ми застосовуємо градієнт. Цей градієнт – одна з найбільш суттєвих деталей дизайну, і при цьому дуже важливо вибрати колір, що підкреслює «папір».

В даному випадку колір паперу #f5f4f0, і тому відтінок градієнта (який поступово зникає по діагоналі з верхнього лівого кута до правого нижнього) – від кольору #e9eae5 до повністю прозорого.

Для створення власного градієнта ви можете використовувати безліч інструментів, наприклад:

Colorzilla

Генаратор градієнтів в CSS3 Даміана Ґаларца (Damian Galarza’s CSS3 Gradient Generator)

Gradientapp для OS X

Крок 5: Додаємо тіні

Зробивши це, давайте додамо тіні під «папір».

.paper section:nth-child(odd):before {
z-index: -1;
position: absolute;
content: «»;
bottom: 0px;
left: 10px;
width: 50%;
top: 20px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5);
box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.paper section:nth-child(odd):after {
z-index: -1;
position: absolute;
content: «»;
bottom: 0px;
right: 10px;
left: auto;
width: 50%;
top: 20px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5);
box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}

Створюємо ефект складеної папери з допомогою CSS3

Я знаю, що для тих, хто не звик застосовувати трансформації CSS3 або псевдоелементи, може здаватися важким, але насправді це досить легко.

Тут ми просто додаємо тіні до кожному непарному фрагменту. Почнемо з приміщення під папером додаткового елемента з z-index. Саме тут ми заявляємо абсолютне розташування position absolute, ось чому нам було потрібно раніше заявити в батьківському елементі position relative.

В загальних рисах, ми робимо два чорних поля, що займають половину ширини нашого фрагмента з складкою (width: 50%;), задаємо їм тіні блоку, після чого повертаємо на 5°. Додаткові елементи в основному приховані, але розташовані таким чином, що створюють ілюзію глибини – наче папір відходить від сторінки. Ці тіні підкреслюють ефект, створений раніше градієнтом.

Крок 6: Додаємо останні тіні

Тепер нам потрібно повторити той же процес з парними фрагментами.

.paper section:nth-child(even):before {
z-index: -1;
position: absolute;
content: «»;
bottom: 20px;
left: 10px;
width: 50%;
top: 0;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5);
box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.paper section:nth-child(even):after {
z-index: -1;
position: absolute;
content: «»;
bottom: 20px;
right: 10px;
left: auto;
width: 50%;
top: 0;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 10px -25px 15px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 10px -25px 15px rgba(0, 0, 0, 0.5);
box-shadow: 10px -25px 15px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}

Створюємо ефект складеної папери з допомогою CSS3

В точності, як у попередньому випадку, за винятком декількох деталей. Зрозуміло, що своєю метою ми ставимо парні елементи, а не непарні, і позиціонування в них інше, тому тінь знаходиться вгорі блоку і повернена в іншу сторону, створюючи, таким чином, певну трикутну тінь у кожного кута «згину». Ось:

Створюємо ефект складеної папери з допомогою CSS3

Крок 7: Додаємо медиазапросы

Ви помітили, що ми застосовували процентні співвідношення ширини і налаштовували середовище для адаптивного дизайну. Якщо взяти наш приклад в тому вигляді, в якому він зараз перебуває, і зменшити його розмір, він буде працювати досить добре. Але в ньому є недоліки. Їх можна усунути кількома виправленнями, які включаються в деякі моменти.

@media only screen and (max-width: 600px) {
h1 {
font-size: 25px; }
h2 {
font-size: smaller; }
.paper section:nth-child(even):after {
right: 20px; }
.paper section:nth-child(odd):after {
right: 20px; }
.paper section:nth-child(even):before {
left: 20px; }
.paper section:nth-child(odd):before {
left: 20px; }
}

Отже, тут ми просто зменшили заголовки (тільки для демоверсії), також нам довелося злегка замінити псевдоелементи. Я вибрав в якості точки переривання 600px, так як саме тут тіні здалися, на мій погляд, занадто великими, що ви, звичайно, вільні міняти як завгодно згідно дизайну свого проекту.

Сумісність з браузерами

Так як ми користуємося градієнтами CSS3, сумісність обмежена сучасними браузерами Internet Explorer 10. У наших градієнтів є властивість backup filter, що дає нам доступ до IE9, але ігнорує IE8 і більш ранні версії. IE8 справді робить безліч помилок (наші селектори CSS3, правила трансформації і тіні блоку, так що давайте взагалі забудемо про IE8!) На щастя, це поступова деградація, і вміст сторінки чудово доступно:

Створюємо ефект складеної папери з допомогою CSS3

Не забудьте, що медиазапросам також потрібно містити ключове слово only для запобігання парсинга всього вмісту за промовчанням з боку IE8.

Висновок

Отже, ось він! Гнучкий ефект складеної папери, створений за допомогою градієнтів CSS3, тіней блоку і псевдоелемент. Сподіваюся, вам сподобався цей підручник, і ви дізналися з нього що-небудь корисне. Дайте мені зрозуміти це в коментарях: я хотів би почути вашу думку.