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

Галерея примеров ⬇

Волны — аккуратный узор! И создавать их чертовски просто благодаря бесчисленному множеству онлайн-генераторов, которые вы можете использовать для создания SVG и добавления непосредственно в свой HTML. Вот лишь некоторые из них:

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

И есть более чем один способ сделать волны! 🌊


С использованием border-radius в CSS

Идея здесь состоит в том, чтобы сделать очень большую круглую форму и расположить ее за пределами страницы, чтобы была видна только ее часть:

кодовая ручка

Повторите элемент для большего количества волн:

Это, безусловно, работает, но вы, возможно, уже видите его ограничения. Например, нам нужно знать, сколько существует способов, а затем использовать магические числа для позиционирования всего.
Может быть, мы могли бы сделать что-то с CSS Grid auto-fit полномочий, поэтому количество элементов менее важно:

Эх, еще не лучший. Что делает этот подход настолько сложным, так это то, что соединение двух кругов на самом деле не создает волновой узор. Итак, я бы сказал border-radius отлично, когда мы работаем с одной формой.


Использование CSS-градиентов

Ага! Мы можем полностью объединить несколько градиентов с различной непрозрачностью, чтобы создать волнообразные узоры. На самом деле, классика Леа Веру «Галерея шаблонов CSS3» предлагает прекрасный пример использования комбинации линейного и радиального градиентов:


Использование CSS clip-path а также mask

С использованием clip-path а также mask вы можете создавать творческие волны и как смотреть на них.

Этот пример показывает вам, что именно вы можете создать с помощью clip-path.

См. перо
css путь клипа — волна
от nicholasnadel (@nicholasnadel)
на КодПен.

Это способ создания волн с использованием пути обрезки, а ниже приведен пример добавления креативности с помощью анимации CSS.

См. перо
Эффект волны воды с помощью CSS Clip-path
Мухаммад Мабрук (англ.@The_Mabrouk)
на КодПен.

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


Встроенный SVG

У нас также есть SVG! Что мне нравится в этом подходе, так это то, что SVG может формировать форму:

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

Или мы можем добавить кучу SVG и использовать для них абсолютное позиционирование, чтобы получить настоящий эффект:


Использование SVG в CSS

Мы также можем использовать SVG в качестве фонового изображения:

Все, что нам нужно сделать, чтобы получить несколько волн с помощью подхода с фоновым изображением, — это несколько раз повторить элемент в HTML, а затем перейти к background-position-x развести их и opacity чтобы показать слои:

И, конечно же, мы можем их анимировать. Мы настраиваем animation-delay а также animation-duration каждой волны, чтобы немного компенсировать ситуацию:


Вывод

Ну вот, куча способов поднять волну! Мы рассмотрели множество различных волновых паттернов и несколько подходов к их кодированию в CSS и SVG. Какой подход лучше? Это действительно зависит от дизайна и варианта использования, поэтому выберите то, что лучше всего соответствует вашим требованиям.


Последние статьи ✍🏻

  1. Полное руководство по волнам
  2. Практическое руководство по Brain.js
  3. Упрощенный DevOps
  4. Волнистые фоны с помощью CSS и SVG
  5. Все, что вам нужно знать о Markdown


Свяжись со мной

Твиттер
Гитхаб

YouTube
Линкедин