указатели CSS

Создаем указатели на CSS

Указатели на CSS

Создаем указатели на CSS

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

Если ваша цель — создать форму указателя с цветовым и текстовым наполнением, но без тени, бордюр и прочих дополнительных «украшательств», то стоит обратить внимание на CSS функцию polygon(), применяемую в качестве значения для свойства clip-path. Это, одназначно, гибкое лаконичное решение, для реализации которого требуется лишь правильно рассчитать расстановку точек многоугольника. Однако, данный вариант не подходит для создания фигур с тенью или бордюрами, так как при использовании clip-path все дополнения, выходящие за пределы обозначенной фигуры, отсекаются. Поэтому мы рассмотрим еще один способ создания указателей — с поддержкой «украшательств». Во втором варианте мы создадим указатель посредством совмещения двух скошенных прямоугольников, т. е. параллелограммов.

Способ первый: создание полигонов в форме указателей с помощью clip-path:polygon()

Указатели на CSS, созданные с помощью clip-path.

В этом разделе мы создадим указатели, представленные на изображении выше. По сути, указатели представляют собой плоские многоугольники, которые довольно просто создать с помощью CSS свойства clip-path со значением polygon(). Однако, прежде чем мы «нарисуем» первый указатель, предлагаю вспомнить, как работает clip-path:

Коротко о clip-path: свойство clip-path позволяет скрыть те части блока, которые выходят за пределы траектории, обозначенной в значении свойства. Например, если к селектору .block применить свойство clip-path со значением polygon(), то пользователь увидит не весь элемент .block, а лишь ограниченный функцией polygon() многоугольник. Поэтому тени и бордеры, примененные к селектору .block также будут отсечены.

А теперь немного теории о работе CSS функции polygon():

Кротко о polygon(): с помощью функции polygon(x1 y1, x2 y2…) можно создать многоугольник, вершинами которого являются точки с координатами x1 y1, x2 y2… . При этом, первая пара координат: x1 y1 — это вершина многоугольника, расположенная выше других точек в левой части. Очередность последующих вершин определяется движением по часовой стрелки. Рассмотрим на примере указателя на изображении ниже:

Координатные оси

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

clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);

Предлагаю реализовать нашу задумку на практике! Создадим в html-файле блок с классом «signpopst1-left»:

<div class="signpost1-left">
    <p>Налево не ходи!</p>
</div>

В CSS-файле для созданного блока добавим свойства: цвета, размеров, зададим внешние отступы и обязательно — свойство clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%)! Обратите внимание на 6-ю строку:

.signpost1-left{
    margin: 40px; /* задаем внешние отступы */
    background-color: #1565c1; /* определяем цвет */
    width: 20em; /* устанавливаем размеры */
    height: 5em;
    clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 12% 100%, 0% 50%); /* создаем полигон */
    shape-outside: polygon(12% 0%, 100% 0%, 100% 100%, 12% 100%, 0% 50%);
}
.signpost1-left p{
    font-family: 'Oswald';
    color: #fff;
    font-size: 24px;
    margin: 0 auto;
    padding-top: 22px;
    text-align: center;
    text-transform: uppercase;
}

Так как я хотела создать эффект обтекания текстом созданного указателя, то добавила свойство shape-outside: polygon(12% 0%, 100% 0%, 100% 100%, 12% 100%, 0% 50%). Параметры для расположенного на указателе текста я перечислила в списке свойств селектора .signpost1-left p. В итоге получился запланированный указатель, направленный в левую сторону:

Указатель влево №1

Аналогичным образом можно создать другие фигуры. Ниже я приведу тексты html и css-кода, а также скриншоты 3х других вариантов указателей:

Указатель №1 вправо:

Указатель вправо №1
<div class="signpost1-right">
    <p>Поверни направо</p>
</div>

.signpost1-right{
    margin: 40px;
    background-color: #1565c1;
    width: 20em;
    height: 5em;
    clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
   shape-outside: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
}
.signpost1-right p{
    font-family: 'Oswald';
    color: #fff;
    font-size: 24px;
    padding-top: 22px;
    text-align: center;
    text-transform: uppercase;
}

Указатель №2 влево

Указатель влево №2
<div class="signpost2-left">
    <p>4 раза, и ты вернешься</p>
</div>
.signpost2-left{
    margin: 40px;
    background-color: #1565c1;
    width: 26em;
    height: 5em;
    clip-path: polygon(8% 0%, 100% 0%, 94% 50%, 100% 100%, 8% 100%, 0% 50%);
    shape-outside: polygon(8% 0%, 100% 0%, 94% 50%, 100% 100%, 8% 100%, 0% 50%);
}
.signpost2-left p {
    font-family: 'Oswald';
    color: #fff;
    font-size: 24px;
    padding-top: 22px;
    text-align: center;
    text-transform: uppercase;
}

Указатель №2 вправо

Указатель вправо №2
<div class="signpost2-right">
    <p>В исходную точку</p>
</div>
.signpost2-right{
    margin: 40px;
    background-color: #1565c1;
    width: 26em;
    height: 5em;
    clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 6% 50%);
    shape-outside: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 6% 50%);
}
.signpost2-right p{
    font-family: 'Oswald';
    color: #fff;
    font-size: 24px;
    padding-top: 22px;
    text-align: center;
    text-transform: uppercase;
}

Второй способ: создание указателей совмещением косых блоков

Указатель влево с тенью

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

Параллелограммы, составляющие указатель

На представленном изображении оранжевым и зеленым цветами обозначены границы двух параллелограммов, образующих указатель. Можно, конечно, для верхней и нижней половины указателя создать отдельные блоки в html-файле. Однако, я предлагаю не плодить дополнительные блоки, а использовать псевдоэлементы: :before — для верхней половины указателя, :after — для нижней половины указателя. Для начала, в html-файле создадим блок с классом «signpost3»:

    <div class="signpost3">
    	<p>Указатель с тенью</p>
    </div>

Затем откроем CSS-файл и с помощью псевдоэлементов :after и :before создадим верхнюю и нижнюю половины указателя. Наклон половинок реализуем посредством применения свойства transform:skew(). Подробнее о создании наклонных блоков можно прочитать в статье “Создаем косые блоки средствами CSS“. Затем зададим псевдоэлементам абсолютное позиционирование и выровняем их с помощью свойств left и top. В завершении создадим тень с помощью свойства box-shadow и добавим свойства селектору “.signpost3 p” для преображения текста:

.signpost3{
	margin: 40px;
	width: 20em;
	height: 5em;
	position:relative;
}
.signpost3:before, .signpost3:after{
	position:absolute;
	float:left;
	content:"";
	width: 20em;
	height: 2.5em;
	background-color: #1565c1;
}
.signpost3:before{
    top:0%;
	left:0;
	transform:skew(-40deg);
	box-shadow: 9px 8px #dbd7d7;
}
.signpost3:after{
	top:50%;
	left:0;
	transform:skew(40deg);
	box-shadow: -6px 7px 1px 0px #dbd7d7;
}
.signpost3 p{
    font-family: 'Oswald';
    color: #fff;
    position:relative;
    z-index:2;
    font-size: 24px;
    padding-top: 22px;
    text-align: center;
    text-transform: uppercase;
}

Для того, чтобы создать аналогичный указатель вправо, нужно поменять местами значения функции skew() у псевдоэлементов. То есть, для селектора “.signpost3:before” установить свойство transform:skew(40deg), а для селектора “.signpost3:after” – transform:skew(-40deg), а также изменить смещение тени по x на противоположное значение. То есть для селектора .signpost3:after значение свойства box-shadow станет box-shadow: 6px 7px 1px 0px #dbd7d7, а для .signpost3:before – box-shadow: 9px 8px #dbd7d7. В-остальном, стили останутся прежними. Ниже я приведу HTML и CSS код для создания указателя с тенью вправо из блока с классом signpost3-right:

Указатель с тенью вправо
    <div class="signpost3-right">
    	<p>Указатель с тенью</p>
    </div>
.signpost3{
	margin: 40px;
	width: 20em;
	height: 5em;
	position:relative;
}
.signpost3:before, .signpost3:after{
	position:absolute;
	float:left;
	content:"";
	width: 20em;
	height: 2.5em;
	background-color: #1565c1;
}
.signpost3:before{
    top:0%;
	left:0;
	transform:skew(40deg);
	box-shadow: -9px 8px #dbd7d7;
}
.signpost3:after{
	top:50%;
	left:0;
	transform:skew(-40deg);
	box-shadow: 6px 7px 1px 0px #dbd7d7;
}
.signpost3 p{
    font-family: 'Oswald';
    color: #fff;
    position:relative;
    z-index:2;
    font-size: 24px;
    padding-top: 22px;
    text-align: center;
    text-transform: uppercase;
}

Подведем итог: в статье мы рассмотрели 2 способа создания указателей: с помощью clip-path:polygon() и посредством соединения двух параллелограммов. Первый способ отличается компактностью, зато второй позволяет добавить к фигуре тень. Выбор способа остается за вами. И пусть на вашем пути встречаются только правильные указатели!

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

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