Веб-разработка

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

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

Создать такие блоки можно используя знания об SVG-изображениях и градиентах в CSS. Благодаря различным манипуляциям с SVG мы можем создать необычные формы для блоков. Некоторые из примеров приведены ниже:

Не прямоугольный блок (диагональ)

Пример:

See the Pen header diagonal gradient by Anna Blok (@anna_blok) on CodePen.0

 

Не прямоугольный блок (треугольник)

Пример:

See the Pen header triangle gradient by Anna Blok (@anna_blok) on CodePen.0

 

Не прямоугольный блок (зигзаг)

See the Pen header zigzag gradient by Anna Blok (@anna_blok) on CodePen.0

Оставляйте в комментариях свои вариации форм, которые частенько встречаются на сайтах. Давайте вместе дополним статью!

Предыдущий пост

Методы создания подчеркивающий линии для заголовков на уровне текста

Следующий пост

Macbook Air 13 2017 для программирования, дизайна и видеомонтажа

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *