4 октября, 2021

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

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

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

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

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

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

Эллиптические углы в Elementor
Изображение с сайта https://idg.net.ua/

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

Скругление углов в Elementor

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

Пример:

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

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

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

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

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

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

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

Элиптические углы в Elementor
selector {
    border-radius: 400px 250px 400px 200px / 250px 50px 350px 50px;
}

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

0

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

Пункт меню без ссылки в Elementor

Пункт меню без ссылки в Elementor. Создать такой пункт очень просто. Для этого необходимо зайти в консоль Wordpress в раздел «Внешний вид => Меню» и в списке элементов меню слева выбрать пункт «Произвольные ссылки».

Читать полностью »

Пользовательские CSS в Elementor. Вкладка Расширенные. Общие настройки виджетов Elementor.

Пользовательские CSS в Elementor. Вкладка Расширенные. Общие настройки виджетов Elementor. Пользовательские CSS. Разработчики подарили нам замечательную возможность дополнительной настройки css-стилей для всех

Читать полностью »

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.