4 октября, 2021

Эллиптические углы в Elementor

Эллиптические углы в Elementor

Элементор по умолчанию поддерживает настройку скругления углов (css-свойство border-radius), которая расположена:

  • для секций и колонок на вкладке «Стиль => Граница»;
  • для виджетов на вкладке «Расширенные => Граница»

Основные настройки и типы границ описаны в статье «ГРАНИЦА В ELEMENTOR».

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

Рассмотрим наглядно горизонтальные и вертикальные скругления радиусов углов.

princip zakrugleniya uglov css
Изображение с сайта https://idg.net.ua/

Если с установкой горизонтального радиуса скругления в Elementor все понятно, то с вертикальным не совсем, так как настройки его не поддерживают. Как же быть?

Для установки эллиптического скругления для элемента нам нужно будет прописать вручную css-свойство border-radius в разделе «Расширенные => Пользовательские CSS» — сначала указываем радиус горизонтального скругления и через символ «/» радиус вертикального скругления.

Пример:

selector {
    border-radius: 400px 400px 400px 400px / 200px 200px 200px 200px;
}

Вот как будет выглядеть эллиптическое скругление углов для секции с настройками выше:

ellipticheskie ugly v elementor 001

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

/*Результат будет таким же, как и на картинке выше*/

selector {
    border-radius: 400px / 250px;   
}

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

ellipticheskie ugly v elementor 002
selector {
    border-radius: 400px 250px 400px 200px / 250px 50px 350px 50px;
}

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

0

Интересные статьи

Секция. Вкладка Макет.

Секция Elementor. Вкладка Макет. Общее описание секций, колонок и внутренних секций, позволяющих создавать нужную структуру шаблона страниц, мы рассмотрели в другой статье.

Читать полностью »
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Эллиптические углы в Elementor

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Регистрация

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.