Создаем эффект сложенной бумаги с помощью CSS3

Создаем эффект сложенной бумаги с помощью CSS3

От автора: из этого учебника мы узнаем, как создать гибкий (адаптивный) эффект сложенной бумаги с помощью свойств CSS3, таких как фоновые градиенты и тени блока, создав при этом отлично смотрящийся фон области содержимого вашего вебсайта.

скачать исходникидемо

Шаг 1: Устанавливаем head

Давайте начнем с создания базовой HTML-страницы. Мы применим HTML5, потому что… а почему нет?!

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Шаг 2: Устанавливаем body

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

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

Шаг 3: Создание общих стилей страницы

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

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

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

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

Примечание: В этом разделе очень важно задать position: relative;, нам это нужно, чтобы разместить элементы тени, которые представляют весь эффект в выгодном виде.

Шаг 4: Добавляем градиент

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

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

Для создания собственного градиента вы можете использовать множество инструментов, например:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Colorzilla

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

Gradientapp для OS X

Шаг 5: Добавляем тени

Сделав это, давайте добавим тени под «бумагу».

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

Здесь мы просто добавляем тени к каждому нечетному фрагменту. Начнем с помещения под бумагой дополнительного элемента с z-index. Именно здесь мы заявляем абсолютное расположение position absolute, вот почему нам было нужно ранее заявить в родительском элементе position relative.

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

Шаг 6: Добавляем последние тени

Теперь нам требуется повторить тот же процесс с четными фрагментами.

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

Шаг 7: Добавляем медиазапросы

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

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

Совместимость с браузерами

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

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

Заключение

Итак, вот он! Гибкий эффект сложенной бумаги, созданный при помощи градиентов CSS3, теней блока и псевдоэлементов. Надеюсь, вам понравился этот учебник, и вы узнали из него что-нибудь полезное. Дайте мне понять это в комментариях: я хотел бы услышать ваше мнение.

Автор: Harry Atkins

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Максим

    Спасибо, интересно с технической точки зрения.
    А вот сам эффект какой-то ненатуральный.

    • Андрей Кудлай

      Да, согласен, тут интересна именно реализация. Сам эффект также был раскритикован в комментариях на сайте-источнике :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree