Как создать фигуры ленты CSS с одним элементом?

Введение в PostCSS Программирование и разработка

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

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

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

Я собрал коллекцию ленточных фигур CSS с множеств

Я буду называть левую «свернутой лентой», а правую — «повернутой лентой».

Создание формы сложенной ленты CSS

Первым шагом в создании свернутой ленты CSS является определение переменных нашей фигуры.

Первым шагом в создании свернутой ленты CSS явля

.ribbon {
  --r: 20px; /* control the cutout of the ribbon */
  --s: 20px; /* size of the folded part */
  --c: #d81a14;
}

Две переменные будут управлять формой, а одна переменная будет управлять цветом.

Теперь перейдем к коду. В основном мы будем полагаться на clip-path. Изображение ниже иллюстрирует форму многоугольника, который мы собираемся использовать.

зображение ниже иллюстрирует форму многоугольника, котор

Мы добавляем отступы, чтобы не обрезать текст, а затем применяем clip-path:

.ribbon {
  --r: 20px; /* control the cutout of the ribbon */
  --s: 20px; /* size of the folded part */
  --c: #d81a14;

  line-height: 1.6; /* control the height */
  padding-inline: 1.2lh calc(var(--r) + .2lh);
  background: var(--c);
  clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,100% 100%, 0 100%,0 100%); 
}

Использование модуля CSS lh

Вам может быть интересно, что происходит с lhустройством. Это новая единица, соответствующая значению line-height. Поскольку мы используем одну строку текста, эта line-heightнастройка управляет высотой, поэтому 1lhона эквивалентна высоте элемента, что очень полезно.

В clip-pathмне нужно вырезать форму равнобедренного треугольника, и для этого мне нужно знать высоту элемента. 1lhравна этой высоте.

В clip-pathмне нужно вырезать форму равнобедре

Теперь, чтобы создать сложенную часть, мы по-прежнему будем использовать clip-pathи обновлять предыдущий многоугольник. Самое интересное в clip-pathтом, что он может вырезать «за пределами» границ элемента. Это может показаться удивительным или, возможно, бесполезным, учитывая, что снаружи у нас ничего нет, но это означает, что мы можем включать такие вещи, как тень блока, контур, псевдоэлементы и так далее.

В нашем случае мы будем полагаться на box-shadow. Изображение ниже иллюстрирует этот трюк.

В нашем случае мы будем полагаться на box-shado

Обратите внимание, как я обновляю элемент, clip-pathдобавляя в него четыре новых точки, три из которых находятся за пределами элемента. Поскольку часть, которую мы вырезаем, находится снаружи, она не видна, но если мы добавим большую часть, box-shadowмы сделаем ее видимой. Я использовал синий цвет, чтобы проиллюстрировать идею выше, но в коде мы будем использовать тот же цвет, что и фон:

.ribbon {
  --r: 20px; /* control the cutout of the ribbon */
  --s: 20px; /* size of the folded part */
  --c: #d81a14;

  line-height: 1.6; /* control the height */
  padding-inline: 1.2lh calc(var(--r) + .2lh);
  background: var(--c);
  clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,1lh 100%,1lh calc(100% + var(--s)),.5lh calc(100% + var(--s) + var(--r)),0 calc(100% + var(--s)),0 100%);
  box-shadow: 0 0 0 999px var(--c); /* a big spread radius */
}

Наконец, мы добавим эффект тени, применив градиент и еще одну тень блока, и все готово. Наша форма ленты CSS идеальна!

Вам, наверное, интересно, как создать вторую ленту (зеленую). Делаем то же самое, но с другим полигоном. Берем первый многоугольник и инвертируем его.

Многоугольник можно записать так:

clip-path: polygon(X1 Y1, X2 Y2, ..., Xn Yn)

Чтобы получить противоположную форму, вы меняете все Xiна 100% — Xi. Так просто! Прежде чем проверять мой код, попробуйте сделать это самостоятельно, используя многоугольник первой ленты.

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

Если вы сосредоточитесь на анимации, вы заметите, что у нас есть три точки, движущиеся влево, а также три точки, движущиеся вниз и влево.

Если вы сосредоточитесь на анимации, вы заме

Мы обновляем Xi точки, движущиеся влево, с помощью Xi + dи обновляем Yiточки, перемещающиеся с помощью Yi + d. Затем мы просто обновляем переменную dдля управления движением:

.ribbon {
  --d: 0px; /* This will control the offset */
  clip-path: polygon(calc(1lh + var(--d)) 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,calc(1lh + var(--d)) 100%,calc(1lh + var(--d)) calc(100% + var(--s) + var(--d)),calc(.5lh + var(--d)) calc(100% + var(--s) + var(--r) + var(--d)),var(--d) calc(100% + var(--s) + var(--d)),var(--d) 100%);
}
.ribbon:hover {
  --d: .2lh;
}

Если вы видите такой многоугольник впервые, вы можете растеряться, так как выглядит он немного пугающе. Но на самом деле все не так сложно. Мы начали с простого многоугольника и постепенно добавляли больше точек и вычислений, пока не дошли до этого сложного.

Создание повернутой формы ленты CSS

Давайте займемся второй формой. Для этого мы будем использовать новые тригонометрические функции вместе с переменными CSS, calc()как и в предыдущем случае. Чтобы понять логику этой фигуры, давайте повернем ее и сохраним текст в виде прямой линии.

ля этого мы будем использовать новые тригонометрические функц

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

.ribbon {
  --r: 30px;  /* control the cutout of the ribbon */
  --a: 15deg; /* control the rotation */
}

Выполняет rту же работу, что и предыдущая фигура. Он aбудет управлять вращением основного элемента и многим другим.

Начнем с основного элемента. Из рисунка видно, что нам нужно разрезать его с каждой стороны, так что вы можете логически подумать об использовании clip-path, но не в этот раз. Мы будем использовать градиентную окраску, при которой часть, которую нам нужно вырезать, будет иметь прозрачный цвет:

.ribbon {
  --r: 30px;  /* control the cutout of the ribbon */
  --a: 15deg; /* control the rotation */

  background:
    linear-gradient(calc(90deg + var(--a)),
      #0000 calc(1lh*sin(var(--a))),
      var(--c) 0 calc(100% - 1lh*sin(var(--a))),
      #0000 0
    );
}

Вот и геометрия.

Это aугловая переменная, которую мы опреде

Это aугловая переменная, которую мы определили. Учитывая это, градиент должен иметь угол, равный 90deg + a, а прозрачный цвет должен начинаться 0и заканчиваться на d. Посчитав немного, dбудет равно 1lh*sin(a). Если мы применим ту же логику с другой стороны, мы получим следующий код:

background:
  linear-gradient(calc(90deg + var(--a)),
    #0000 0% calc(1lh*sin(var(--a))),
    var(--c) calc(1lh*sin(var(--a))) calc(100% - 1lh*sin(var(--a))),
    #0000 calc(100% - 1lh*sin(var(--a))) 100%
  );

Мы проводим некоторую оптимизацию, удаляя символы 0%и 100%(они неявны), и когда у нас есть две последовательные точки цвета, которые равны, мы можем заменить вторую на 0:

background:
  linear-gradient(calc(90deg + var(--a)),
    #0000 calc(1lh*sin(var(--a))),
    var(--c) 0 calc(100% - 1lh*sin(var(--a))),
    #0000 0
  );

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

Мы можем легко найти высоту H из предыдущего рисунка, который мы использовали для определения конфигурации градиента. Это равно 1lh/cos(a). Для ширины W она равна (100% — x)*cos(a), где 100%— ширина основного элемента и x— та маленькая часть, где у нас есть прозрачность. Это равно 1lh*tan(a).

Оба псевдоэлемента имеют одинаковый размер, поэтому наш код выглядит следующим образом:

.ribbon:before,
.ribbon:after {
  content: "";
  position: absolute;
  height: calc(1lh/cos(var(--a)));
  width: calc(100%*cos(var(--a)) - 1lh*sin(var(--a)));
}

Если вам не нравится математика и вы немного запутались в формуле, ничего страшного. Вам не нужно точно понимать их. Цель состоит в том, чтобы иметь возможность корректировать форму с помощью переменных CSS. Формулы созданы для того, чтобы упростить задачу и избежать необходимости иметь дело с жестко запрограммированными значениями и магическими числами.

После простановки размеров нам следует правильно разместить каждый псевдоэлемент, повернуть его и использовать clip-pathдля вырезаемой части:

.ribbon:before,
.ribbon:after {
  content: "";
  position: absolute;
  transform: translate3d(0,0,-1px);
  rotate: var(--a);
  height: calc(1lh/cos(var(--a)));
  width: calc(100%*cos(var(--a)) - 1lh*sin(var(--a)));
  background: color-mix(in srgb,var(--c),#000 40%);
}
h1:before {
  right: 0;
  top: 0;
  transform-origin: top right;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--r) 50%);
}
h1:after {
  left: 0;
  bottom: 0;
  transform-origin: bottom left;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%);
}

Код должен быть понятен, а clip-pathзначение должно быть легко понять. Мы использовали более сложные полигоны первой формы.

Обратите внимание на использование color-mix(), которое позволяет мне создать темную версию основного цвета. Я также использую 3D-преобразование с отрицательным значением по оси Z, чтобы расположить псевдоэлементы позади основного элемента.

Теперь, если мы повернём элемент в противоположном направлении, мы получим форму ленты CSS.

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

Заключение

Это было забавное упражнение, вам не кажется? Мы изучили некоторые современные функции CSS, такие как переменные CSS calc()и тригонометрические функции, и объединили их для создания причудливых форм ленты.

Читайте также:  Как анализировать объекты в Pydantic?
Оцените статью
bestprogrammer.ru
Добавить комментарий