
Добавление кнопки призыва к действию в WordPress (без кода)
Приветствуем вас! В течение многих лет веб-дизайнеры нарезали изображения, добавляли закругленные углы, градиенты, размытие и другие эффекты ... Это была трудоемкая работа. Но сегодня с помощью CSS вы можете создавать всевозможные фигуры. Сегодня мы покажем вам, как создавать различные формы с помощью CSS. Ну что приступим?
Квадрат и прямоугольник с текстом внутри
Чтобы создать такой квадрат, нужно добавить приведенный код ниже
<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; /*выравнивание блока по центру и отступы сверху и снизу*/ }
Круг или овал
Данные фигуры делаются аналогично предыдущим блокам, только добавляется свойство 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%; /*радиус скругления углов*/ }
Параллелограмм
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; /*рамка справа*/ }
Трапеция
Этот пример создается за счет использования значения 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;/*высота строки текста*/ }
Треугольник
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% );/*срезаем углы*/ }
За счёт вертикальных внутренних отступов, мы выполняем выравнивание по вертикали.
Функция эллипса
Эллипсы выглядят как сплющенные круги. Они определяются как 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 ()функции формы.
Конечно, формами не нужно злоупотреблять. Но при применении со вкусом и здравым смыслом формы могут улучшить представление контента и сфокусировать внимание пользователя. Ну что у нас на этом все. Всем пока!
С уважением Вячеслав и Валерия!