Все для начинающих интернет-предпринимателей

Блоки в виде геометрических фигур на CSS

geometricheskie-figuri

Приветствуем вас! В течение многих лет веб-дизайнеры нарезали изображения, добавляли закругленные углы, градиенты, размытие и другие эффекты ... Это была трудоемкая работа. Но сегодня с помощью CSS вы можете создавать всевозможные фигуры. Сегодня мы покажем вам, как создавать различные формы с помощью CSS. Ну что приступим?

Квадрат и прямоугольник с текстом внутри

kvadrat

Чтобы создать такой квадрат, нужно добавить приведенный код ниже

<div class="square-block">Текст</div>

Текст внутри фигуры может быть разным, CSS класс вы также можете добавить совершенно любой. Далее нам нужно добавить CSS файл в тему или страницы следующий код:

.square-block {
width:70px; /*ширина */
height:70px; /*высота */
background:#2F73B6; /*фоновый цвет*/
color:#fff; /*цвет шрифта*/
text-align:center; /*выравнивание текста по центру*/
text-transform:uppercase; /*написание текста заглавными буквами*/
line-height:70px; /*высота строки текста*/
float:left;/*обтекане блока по левому краю (при необходимости)*/
}

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

Обратите внимание на то чтобы ваш блок адаптировался под мобильные устройства для задания его ширины нужно использовать или проценты или изначально задавать ширину в процентах и добавлять ещё свойство max-width, в котором задавать максимальную ширину блока в пикселях. Таким образом на больших экранах он будет иметь ширину в пикселях, а на маленьких – будет сжиматься под размер экрана.

HTML:

<div class="rectangle-block">Пример оформления текста в прямоугольнике</div>

CSS:

.rectangle-block {
width:100%; /*ширина */
max-width:500px;/*максимальная ширина */
padding:30px 20px; /*внутренние отступы*/
background:#ccc; /*фоновый цвет*/
border-top:5px solid #2F73B6; /*верхняя рамка блока*/
border-bottom:5px solid #2F73B6;/*нижняя рамка блока*/
box-shadow:0 0 6px #555; /*тень*/
color:#000; /*цвет шрифта*/
text-align:center; /*выравнивание текста по центру*/
line-height:1.2; /*высота строки текста*/
margin:20px auto; /*выравнивание блока по центру и отступы сверху и снизу*/
}

Круг или овал

krugoval

Данные фигуры делаются аналогично предыдущим блокам, только добавляется свойство CSS border-radius.

HTML:

<div class="circle-block">Текст</div>

CSS:

.circle-block {
width:70px; /*ширина*/
height:70px; /*высота*/
background:#2F73B6; /*фоновый цвет*/
color:#fff; /*цвет шрифта*/
text-align:center; /*выравнивание текста по центру*/
text-transform:uppercase; /*написание текста заглавными буквами*/
line-height:70px; /*высота строки текста*/
border-radius:100%; /*радиус скругления углов*/
}

Параллелограмм

paralelogramm

HTML:

<div class="parallelogram-block">Блок в виде параллелограмма</div>

CSS:

.parallelogram-block {
width: 250px;/*ширина */
height: 90px;/*высота */
background: #2F73B6;/*фоновый цвет*/
color:#fff;/*цвет шрифта*/
— webkit-transform: skew (-20deg);/*наклон */
— moz-transform: skew (-20deg);
— o-transform: skew (-20deg);
text-align:center;/*выравнивание текста по центру*/
padding:20px; /*внутренние отступы*/
margin:20px auto; /*выравнивание блока по центру и отступы сверху и снизу*/
border-right:10px solid #83B0DE; /*рамка справа*/
}

Вы можете в градусах регулировать угол наклона при помощи свойства transform: skew (-20deg). Для наклона влево нужно задать положительное значение в скобках.

Трапеция

trapezia

Этот пример создается за счет использования значения transparent для свойства border и задания границы блока.

HTML:

<div class="trap-block">Блок в виде трапеции</div>

CSS:

 [php].trap-block {
border-bottom: 80px solid #2F73B6;/*высота трапеции и её фоновый цвет*/
border-left: 30px solid transparent; /*наклон левой границы*/
border-right: 30px solid transparent;/*наклон правой границы*/
height: 0; /*это значение высоты должно быть равным 0*/
width: 300px;/*ширина трапеции*/
margin:20px auto;/*выравнивание блока по центру и отступы сверху и снизу*/
color:#fff;/*цвет шрифта*/
text-align:center;/*выравнивание текста по центру*/
line-height:80px;/*высота строки текста*/
}

Треугольник

treugolnik

HTML:

<div class="triangle-block">Треугольник</div>

CSS:

.triangle-block {
background:#2F73B6;/*цвет фона*/
width:300px;/*ширина блока*/
height:90px;/*высота*/
padding:45px 20px;/*внутренние отступы*/
margin:20px auto;
color:#fff;/*цвет шрифта*/
text-align:center;
clip-path:
polygon (
50% 0,
100% 100%,
0 100%
);/*срезаем углы*/
}

За счёт вертикальных внутренних отступов, мы выполняем выравнивание по вертикали.

viravnivanie-1

Функция эллипса

ellipse

Эллипсы выглядят как сплющенные круги. Они определяются как ellipse (rx ry at cx cy), где rx и ry— радиусы эллипса на осях X и Y, cx а также cy— координаты центра эллипса.

.element{
shape-outside: ellipse (150px 300px at 50% 50%);
width: 300px;
height: 600px;
}

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

Радиусы по осям X и Y также могут быть определены с помощью ключевых слов: farthest-side дает радиус, равный расстоянию между центром эллипса и наиболее удаленной от него стороной контрольной рамки, а closest-side означает прямо противоположное — используйте кратчайшее расстояние между центром и стороной.

.element{
shape-outside: ellipse (closest-side farthest-side at 50% 50%);
/* identical to: */
shape-outside: ellipse (150px 300px at 50% 50%);
width: 300px;
height: 600px;
}

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

То же самое farthest-side и closest-side ключевые слова могут также использоваться для радиуса в circle ()функции формы.

Конечно, формами не нужно злоупотреблять. Но при применении со вкусом и здравым смыслом формы могут улучшить представление контента и сфокусировать внимание пользователя. Ну что у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!

Понравился материал? Поделитесь с друзьями!

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

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