Декоративный фолд при помощи CSS

В этом уроке мы расскажем и покажем вам как при помощи чистого CSS можно сделать модный фолд для ленточки. Для этого нам нужен HTML5, CSS3 и примерно 5 минут!

Что мы будем создавать, финальная версия: Смотреть Демо

Шаг 1: Разметка

Мы начнем с пустого HTML документа, а также, мы привяжем Google Web Fonts API, чтобы мы могли воспользоваться приятным декоративным шрифтом Пуарэ (Poiret One).

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Декоративный фолд при помощи CSS<title>
< <link href='http://fonts.googleapis.com/css?family=Poiret+One&subset=latin,cyrillic' rel='stylesheet' type='text/css'></head>
<body>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Декоративный фолд при помощи CSS<title>

< <link href='http://fonts.googleapis.com/css?family=Poiret+One&subset=latin,cyrillic' rel='stylesheet' type='text/css'></head>

<body>

</body>

</html>

Теперь мы добавим наш элемент «ленту». Да, один элемент, это все, что нам нужно. В этом случае мы используем H1 хэдэр:

<body>
<h1 class="ribbon">Декоративный фолд при помощи CSS</h1>
</body>

<body>

<h1 class="ribbon">Декоративный фолд при помощи CSS</h1>

</body>

Шаг 2: CSS

Откройте новый CSS файл, и сделайте ссылку на него в хэдэре вашего документа, а затем переходите к добавлению стиля.

html {
background: #cccccc;
}

body {
margin: 0;
padding: 100px 0 0 0;
}

.ribbon {
padding: 0 25px;
height: 80px;
color: #FFF;
background-color: #069;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
float: left;
clear: left;
font-family: 'Poiret One', cursive;
font-size: 32px;
line-height: 80px;
}

html {

background: #cccccc;

}

body {

margin: 0;

padding: 100px 0 0 0;

}

.ribbon {

padding: 0 25px;

height: 80px;

color: #FFF;

background-color: #069;

border-bottom: 1px solid rgba(255, 255, 255, 0.3);

position: relative;

float: left;

clear: left;

font-family: 'Poiret One', cursive;

font-size: 32px;

line-height: 80px;

}

Мы начали со стилизации HTML и body только для демонстрации. Теперь мы обратим наше внимание на ленту. Мы дадим ей немного пэддинга(padding) слева и справа, но мы должны задать конкретную информацию о высоте (в данном случае 80px), так как нам надо будет это повторить для сложенного кончика позже. Мы также указываем высоту строки 80px так как текст должен быть расположен по центру вертикально на ленте.

Примечание: Если по каким-либо причинам вы не хотите, чтобы ваша лента была плавающей, задайте inline-block;. Это приведет к тому, что она будет восприниматься как встроенный элемент, и в то же время будет вести себя как блочный элемент, позволяющий определить ширину, высоту, отступы, поля и т.д.

Шаг 3: Фолд

Давайте добавим загиб, используя популярный псевдо-селектор :after. Код будет выглядеть следующим образом:

.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 4px;
z-index: 20;

border-bottom: 80px solid #3399cc;
border-right: 80px solid transparent;

.ribbon:after {

content: "";

display: block;

width: 40px;

height: 0px;

position: absolute;

right: 0;

bottom: 4px;

z-index: 20;

border-bottom: 80px solid #3399cc;

border-right: 80px solid transparent;

ribbon-fold1

Так что же это за странная штука, в виде «лезвия», которую мы только что сделали, и как она нам поможет? Это нижняя граница нашего :after псевдо-элемента, который мы сделали 80px толщиной в соответствии с высотой нашей ленты. Мы отрезали её край на 45 °, определив смежнею правую границу и прдали ей преднамеренный прозрачный фон. Мы задали ширину в 40px, которая определяет прямоугольный конец.

ribbon-fold2

Шаг 4: Поворот

Построив наш фолд, теперь нам нужно повернуть его на конце. Для этого мы будем использовать CSS3 для преобразования свойств и поворота:

.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;

position: absolute;
right: 0;
bottom: 4px;
z-index: 20;

border-bottom: 80px solid #3399cc;
border-right: 80px solid transparent;

-webkit-transform: rotate(90deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(90deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(90deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(90deg);
-ms-transform-origin: right bottom;
transform: rotate(90deg);
transform-origin: right bottom;
}

.ribbon:after {

content: "";

display: block;

width: 40px;

height: 0px;

position: absolute;

right: 0;

bottom: 4px;

z-index: 20;

border-bottom: 80px solid #3399cc;

border-right: 80px solid transparent;

-webkit-transform: rotate(90deg);

-webkit-transform-origin: right bottom;

-moz-transform: rotate(90deg);

-moz-transform-origin: right bottom;

-o-transform: rotate(90deg);

-o-transform-origin: right bottom;

-ms-transform: rotate(90deg);

-ms-transform-origin: right bottom;

transform: rotate(90deg);

transform-origin: right bottom;

}

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

ribbon-fold3

Вот обновленный синтаксис, с целой кучей определенных правил, чтобы убедиться, что все возможные браузеры удовлетворены:

Каждое transform:rotate свойство крутит наш объект на 90 °. Каждое transform-origin свойство утверждает, что оно будет вращаться вокруг правой нижней точки.

Результат:

ribbon-fold