От автора: из этого учебника мы узнаем, как создать гибкий (адаптивный) эффект сложенной бумаги с помощью свойств CSS3, таких как фоновые градиенты и тени блока, создав при этом отлично смотрящийся фон области содержимого вашего вебсайта.
Шаг 1: Устанавливаем head
Давайте начнем с создания базовой HTML-страницы. Мы применим HTML5, потому что… а почему нет?!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Flexible Folded Paper Effect</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if IE]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->< <!--[if gte IE 9]> <style type="text/css"> .gradient { filter: none; } </style> <![endif]--> </head> |
В head мы применяем HTML5 doctype, устанавливаем title, вызываем таблицы стилей, а также используем мета-тэг viewport для того, чтобы наш эффект был адаптивен к мобильным устройствам и «таблеткам». В конце, мы используем заглушку, чтобы старые браузеры понимали новые теги html5, а также настройка градиентов CSS3 для IE, которая попозже понадобится нам в этом учебнике.
Шаг 2: Устанавливаем body
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <div id="page-wrap"> <div class="paper"> <section> <h1>Flexible Folded Paper Effect</h1> <hr /><h2>Achieved with a mixture of CSS3 gradients and box-shadows.</h2> </section> <section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin sapien quis augue 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.<br/><br/>Aliquam auctor posuere lacinia. Praesent eu risus dolor, a mollis leo. Aliquam pharetra, risus vel rutrum volutpat.</p> </section> <section> </section> <section> </section> </div> </div> <!-- END page-wrap --> </body> </html> |
Теперь в основной области страницы у нас имеется всего один контейнер div, обертывающий страницу и второй, обертывающий «бумагу». Внутри этого div’а мы каждый раз будем добавлять тэг section, когда нам понадобится сложенный участок бумаги. Существует два вида этих участков, и попозже в CSS мы сможем их различать с помощью селекторов nth-child: ‘odd’ (нечетный) и ‘even’ (четный). Таким образом, наш HTML будет настолько семантическим, насколько это возможно, без излишних имен классов.
В эти разделы мы добавили немного контента. Это – обычная структура нормальной страницы, но у нас есть все нужное для создания эффекта сложенной бумаги путем перехода к CSS.
Шаг 3: Создание общих стилей страницы
Мы собираемся ради интереса создать эффект полностью «с нуля» в CSS, без изображений.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
* { -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; } |
Вот основные стили страницы. Мы задали фиксированную максимальную ширину max-width и процентное соотношение к текущей ширине, чтобы весь «бумажный» элемент был гибким. Стили заголовка, естественно, приведены только для примера, меняйте их на свое усмотрение и в зависимости от вашего дизайна.
Шаг 4: Стили обоих фрагментов со складками
|
1 2 3 4 5 6 |
section { width: 100%; min-height: 100px; position: relative; padding: 30px; } |
Убедимся, что каждый фрагмент простирается на 100% через свой родительский элемент. Мы определяем минимальную высоту min-height, таким образом, если понадобится добавить пустые фрагменты-«складки», как в нашем примере, они не окажутся высотой 0px. Затем объявляем относительное позиционирование position relative и добавляем небольшой отступ, опять же актуальный только для данного дизайна.
Примечание: В этом разделе очень важно задать position: relative;, нам это нужно, чтобы разместить элементы тени, которые представляют весь эффект в выгодном виде.
Шаг 4: Добавляем градиент
|
1 2 3 4 5 6 7 8 9 |
.paper section:nth-child(even) { background: -moz-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%); background: -webkit-gradient(linear, left top, right bottom, 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: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9eae5', endColorstr='#00f4f5f0',GradientType=1 ); } |
На этот раз мы назначаем стили каждому четному элементу раздела: это значит второму, четвертому, шестому и т.д. Для создания впечатления тени, отбрасываемой на бумагу в трехмерном пространстве, мы применяем градиент. Этот градиент – одна из самых существенных деталей дизайна, и при этом очень важно выбрать цвет, подчеркивающий «бумагу».
В данном случае цвет бумаги #f5f4f0, и потому оттенок градиента (который постепенно исчезает по диагонали из левого верхнего угла к правому нижнему) – от цвета #e9eae5 до полностью прозрачного.
Для создания собственного градиента вы можете использовать множество инструментов, например:
Генаратор градиентов в CSS3 Дамиана Галарца (Damian Galarza’s CSS3 Gradient Generator)
Gradientapp для OS X
Шаг 5: Добавляем тени
Сделав это, давайте добавим тени под «бумагу».
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.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 или псевдоэлементы, может казаться трудным, но на самом деле это довольно легко.
Здесь мы просто добавляем тени к каждому нечетному фрагменту. Начнем с помещения под бумагой дополнительного элемента с z-index. Именно здесь мы заявляем абсолютное расположение position absolute, вот почему нам было нужно ранее заявить в родительском элементе position relative.
В общих чертах, мы делаем два черных поля, занимающих половину ширины нашего фрагмента со складкой (width: 50%;), задаем им тени блока, после чего поворачиваем на 5°. Дополнительные элементы в основном скрыты, но расположены таким образом, что создают иллюзию глубины – как будто бумага отходит от страницы. Эти тени подчеркивают эффект, созданный ранее градиентом.
Шаг 6: Добавляем последние тени
Теперь нам требуется повторить тот же процесс с четными фрагментами.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.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); } |
В точности, как в предыдущем случае, за исключением нескольких деталей. Понятно, что своей целью мы ставим четные элементы, а не нечетные, и позиционирование у них другое, поэтому тень находится вверху блока и повернута в другую сторону, создавая, таким образом, некую треугольную тень у угла каждого «сгиба». Вот:
Шаг 7: Добавляем медиазапросы
Вы заметили, что мы применяли процентные соотношения к ширине и настраивали среду для адаптивного дизайна. Если взять наш пример в том виде, в котором он сейчас находится, и уменьшить его размер, он будет работать довольно хорошо. Но в нем есть недостатки. Их можно устранить несколькими исправлениями, которые включаются в некоторые моменты.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@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!) К счастью, это постепенная деградация, и содержимое страницы прекрасно доступно:
Не забудьте, что медиазапросам также потребуется содержать ключевое слово only для предотвращения парсинга всего содержимого по умолчанию со стороны IE8.
Заключение
Итак, вот он! Гибкий эффект сложенной бумаги, созданный при помощи градиентов CSS3, теней блока и псевдоэлементов. Надеюсь, вам понравился этот учебник, и вы узнали из него что-нибудь полезное. Дайте мне понять это в комментариях: я хотел бы услышать ваше мнение.
Автор: Harry Atkins
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (2)