Добавляем объемности сайту при помощи CSS

Наслаивание блоков и применение псевдо-3D объектов способно придать вашему сайту пространственной объемности, воздушности и глубины. Сегодня мы рассмотрим простой и эффективный способ построения 3D ленточек средствами CSS.

Приступаем к конструированию

Знаете, перед началом любого дела, обещающего быть интересным и принести полезные практические результаты, по коже аж мурашки пробегают от предвкушения…

Ладно, лирический отступ закончен, переходим к делу.

Допустим, у Вас есть страничка, на которой информация логически разделена на блоки при помощи подзаголовков. Для придания страничке объемности, и повышения визуальной сепарации информационных блоков, «примотаем» подзаголовки ленточками.

В качестве примера создадим HTML страничку и каскадную таблицу стилей.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title> VADEN-PRO tricks </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" media="all" type="text/css" href="./style.css">
    </head>
    <body>
 
    </body>
</html>

Внутри тега <body></body> разместим контейнер, который будет содержать основной контент документа, и подзаголовок <h2>.

HTML:

<div class="container">
<h2> VADEN-PRO tricks</h2>
</div>

Теперь зададим базовую стилизацию.

CSS:

div {
font-size: 2em;}
 
body {
     background: black;
}
 
.container {
    width: 60%;
    height: 1280px;
    margin: 5% 20%;
    background: white;
}

Посмотрим на результат:

Во избежание «развала» нашей будущей конструкции при ресайзинге страницы, установим relative позиционирование.

Основная фишка нашей ленточки в том, что она как-бы обворачивает контент. Добиться такого эффекта нам помогут отрицательные значения margin.

CSS:

       h2 {position: relative;
       color: gold;
       margin: 30px -30px 30px -30px;
       padding: 10px 40px;
       background: #f72020; }

Ну вот, с базовой стилизацией закончили, и в результате имеем что-то такое:

Переходим к интересному

Нарисуем нашему подзаголовку h2 градиент и зададим тень при помощи box-shadow.

Исходя из цветовой схемы нашего примера, тень сделаем темно-красной.

CSS:

background-image: -moz-linear-gradient(#892b2b, #f72020);
background-image: -webkit-linear-gradient(#892b2b, #f72020);
background-image: -o-linear-gradient(rgba(#892b2b, #f72020));
background-image: -ms-linear-gradient(#892b2b, #f72020);
-moz-box-shadow: 0 3px 0 rgba(137,43,43,0.2);
-webkit-box-shadow: 0 3px 0 rgba(137,43,43,0.2);
box-shadow: 0 3px 0 rgba(137,43,43,0.2);

Осталось дело за малым — дорисовать завороты в виде треугольников. Для этого воспользуемся псевдоэлементами :before и :after

CSS:

h2:before, h2:after {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -20px;
}
 
h2:before {
border-width: 0 30px 20px 0;
border-right-color: #892b2b;
left: 0;
}
 
h2:after {
border-width: 0 0 20px 30px;
border-left-color: #892b2b;
right: 0;
}

Для добавления плавного перегиба ленточки, снимем фаску в 4 пикселя с подзаголовка h2 ( как говорил учитель труда, "в декоративных и эргономических целях" ).

CSS:

-moz-border-radius: 4px;
border-radius: 4px;

Ну и теперь, то что не обязательно, но можно — зададим границу и тень контейнеру

CSS:

-moz-box-shadow: 3px 3px 3px rgba(137,43,43,0.2);
-webkit-box-shadow: 3px 3px 3px rgba(137,43,43,0.2);
box-shadow: 3px 3px 3px rgba(137,43,43,0.2);
border: 3px #892b2b solid;

Встречайте, наше "чудо" набросанное за 5 минут:

Важно!!!

Кросс-браузерность. Прием отлично работает в современных браузерах, начиная с IE7, Sf4, Cr, Op10.5, Fx3.6.

Одна маленькая неприятность поджидает нас в IE7, который не поддерживает псевдоэлементы before, after, поэтому их придется эмулировать.
В отличии от метода применения ленточек-картинок:

у вас не возникнет проблем при изменении размеров блоков (страницы)
для изменения размера/цветовой схемы нужно будет всего лишь немного подправить код
нету картинок — нет дополнительного трафика — не теряется скорость загрузки страничек.

Современность. При построении 3D-ленточек мы используем "новинки", которые пришли в web-дизайн вместе с CSS3, тем самым придерживаемся основных тенденций современного web-программирования.

P.S.

На самом деле, данный пример не является единственной возможной конфигурацией ленточки. Да и набросан он был за 5 минут.

Несколько дополнительных div-ов и немножко фантазии - и Вы сможете повторить больше половины ленточек, предложенных в популярных шаблонах Photoshop.

Творческих Вам успехов!!!

Блог Vaden Pro

3D ленточка CSS

Приступаем к конструированию

Переходим к интересному

P.S.

Курсы по CSS (в открытом доступе)