Понимание и применение рекурсии в CSS

Автор: WBD TEAM    Источник: webuilddesign.com
03.03.2017
1453
0
img

Согласно Wikipedia «Рекурсия возникает, когда вещь определяется по отношению к самой себе или к своему типу». Такой эффект можно получить, если снимать экран на камеру, которая транслирует видео на тот же экран, или если два зеркала поставить друг напротив друга.

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

Понимание рекурсии в CSS

К сожалению, рекурсию нельзя применить к CSS, но можно попытаться воспроизвести подобный эффект.

Как? Вставив идентичные объекты друг в друга.

Давайте рассмотрим следующий пример. Присмотритесь к CSS. Мы говорим о 15 строчках очень простого кода. Как видите, у нас есть 4 объекта .item, вставленных друг в друга, меньше и меньше. Этот эффект был получен с помощью простого процесса рекурсии.

See the Pen CSS Recursion 1/2 by WBD (@webuilddesign) on CodePen.

Как видите, абсолютные размеры (строки 14-15) применяются только к первому объекту (так как селектор > выбирает только первый дочерний элемент). Все остальные объекты имеют относительно заданные размеры: 50% от их родителя. Таким образом, первый объект имеет размер 200px, следующий 100px, потом 50px и 25px. И для этого не пришлось задавать размеры вручную. Рекурсия!

Размеры – это «очевидные» свойства для рекурсии, давайте теперь рассмотрим что-то более интересное, к примеру, свойство трансформации “rotate”. Нажмите на нашу маленькую коллекцию квадратов и увидите, как они вращаются.

See the Pen CSS Recursion 2/2 by WBD (@webuilddesign) on CodePen.

Первый объект поворачивается на 22.5 градусов. Второй тоже поворачивается на 22.5 градусов, но с учетом поворота родителя в суме выходит 45 градусов. То же самое происходит и с двумя другими объектами, поворот последнего составляет 90 градусов.

Добавим немного анимации

Для третьего примера я решил добавить в уравнение немного цвета с помощью свойства filter.

See the Pen Recursion : Animation by WBD (@webuilddesign) on CodePen.

Заметка: Не знаете о свойстве filter? Это свойство позволяет с помощью CSS воспроизводить некоторые эффекты, применяемые к изображениям в Photoshop. Чтобы узнать больше предлагаю прочитать страницу на MND, посвященную свойству filter, и посмотреть небольшую демонстрацию.

Как видите, этот код не намного сложнее, чем предыдущие. В размерах и поворотах с помощью рекурсии уже нет ничего необычного, а фильтр работает точно так же. Единственный отличительный фактор – это анимация.

Но добавление анимации не добавило сложности. Единственная сложность – это удержать в голове, что каждое, сделанное вами, изменение будет применять все с большей и большей силой к каждому объекту ниже по иерархии HTML.

Магия свойства inherit

Напоследок я бы хотел обратить ваше внимание на особенно интересное значение CSS: inherit.

Inherit велит свойству взять такое же значение, как у родителя, что отлично подходит для работы с рекурсией! Для примера предлагаю рассмотреть следующий код.

See the Pen Recursive CSS by WBD (@webuilddesign) on CodePen.

Мы видим те же «фишки», что использовались в предыдущих примерах, но в строчках 37 и 38 используется “inherit”, а это значит, что значения для трансформации и прозрачности берутся у родительских элементов.

Что хорошо в этой небольшой модификации, так это то, что изменив значение родительского элемента, мы влияем так же и на все его дочерние элементы! Я сделал небольшие ползунки, чтобы вы могли убедиться в этом. Также обратите внимание, что нажав на элемент, можно выделить его среди других.

Вывод

Не смотря на то, что рекурсия все еще остается чем-то экспериментальным, эта техника может сохранить вам не мало времени. Поэтому я рекомендую вам поэксперименты с ней, получить преимущества от её использования и попытаться создать настолько натуральную и интересную анимацию, насколько это возможно!

ПОХОЖИЕ СТАТЬИ: