ZorNet.Ru — сайт для вебмастера » HTML и CSS » Градиенты блоков и секций на чистом CSS

Градиенты блоков и секций на чистом CSS

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

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

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

Так выглядят все 20 вариантов градиентов под блоки и контейнеры:

Красивые градиенты для оформления на CSS

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

HTML

Код

CSS

Эти стили прописываем под все вариации.

Код

.sektsa_kudela {
  overflow: hidden;
  position: relative;
  height: 300px;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to left top, #1460a3, #BFE2FF);
}
.sektsa_kudela:before, .sektsa_kudela:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  content: "";
}
.sektsa_kudela:before {
  filter: contrast(19);
  mix-blend-mode: multiply;
}
.sektsa_kudela:after {
  background: linear-gradient(90deg, #285f8f, #1460a3);
  mix-blend-mode: screen;
}

Далее идут стили под варианты.

1. CSS

Код

.sektsa_kudela:before {
background: repeating-linear-gradient(45deg, #121111, #918a8a, #121111 5%), linear-gradient(45deg, #6a6767, #121111);
background-blend-mode: screen;
}

Стили первого варианта.

2. CSS

Код

.sektsa_kudela:before {
background: repeating-radial-gradient(circle at 0 50%, #121111, #918a8a, #121111 5%), radial-gradient(circle at 0 50%, #6a6767, #121111);
background-blend-mode: screen;
}

Стиль второго варианта.

3. CSS

Код

.sektsa_kudela:before {
background: repeating-conic-gradient(at -9% 25%, #121111, #918a8a, #121111 2.5%), conic-gradient(at -9% 25%, #121111, #6a6767 50%);
background-blend-mode: screen;
}

Стилистика 3 варианта

4. CSS

Код

.sektsa_kudela:before {
background: repeating-linear-gradient(30deg, #121111, #918a8a, #121111 5%), repeating-linear-gradient(-60deg, #121111, #918a8a, #121111 5%), linear-gradient(30deg, #6a6767, #121111);
background-blend-mode: screen;
}

Далее...

5. CSS

Код

.sektsa_kudela:before {
background: linear-gradient(#6a6767, #121111), repeating-radial-gradient(circle at -35% 0, #121111, #918a8a, #121111 5%), repeating-radial-gradient(circle at -35% 100%, #121111, #918a8a, #121111 5%);
background-blend-mode: screen, difference;
}

Далее...

Код

6. CSS

Код

.sektsa_kudela:before {
background: linear-gradient(30deg, #6a6767, #121111), repeating-linear-gradient(30deg, #121111, #918a8a, #121111 5%), repeating-linear-gradient(-60deg, #121111, #918a8a, #121111 5%);
background-blend-mode: screen, difference;
}

Далее...

7. CSS

Код

.sektsa_kudela:before {
background: linear-gradient(30deg, #6a6767, #121111), repeating-linear-gradient(30deg, #121111, #918a8a, #121111 5%), repeating-conic-gradient(#121111, #918a8a, #121111 5%);
background-blend-mode: screen, difference;
}

Далее...

8. CSS

Код

.sektsa_kudela:before {
background: linear-gradient(30deg, #6a6767, #121111), repeating-linear-gradient(30deg, #121111, #918a8a, #121111 5%), repeating-radial-gradient(circle at 100% 50%, #121111, #918a8a, #121111 5%);
background-blend-mode: screen, difference;
}

Далее...

9. CSS

Код

.sektsa_kudela:before {
background: radial-gradient(circle, #6a6767, #121111), repeating-linear-gradient(-45deg, #121111, #918a8a, #121111 5%), repeating-linear-gradient(45deg, #121111, #918a8a, #121111 5%);
background-blend-mode: screen, difference;
}

Далее...

10. CSS

Код

.sektsa_kudela:before {
background: conic-gradient(#6a6767, #121111), repeating-linear-gradient(-45deg, #121111, #918a8a, #121111 5%), repeating-linear-gradient(45deg, #121111, #918a8a, #121111 5%);
background-blend-mode: screen, difference;
}

Далее...

11. CSS

Код

.sektsa_kudela:before {
background: radial-gradient(circle, #121111, #767373 70%), radial-gradient(circle, #121111, #f3f1f1, #121111 71%) 0 0/2em 2em round, radial-gradient(circle, #121111, #f3f1f1, #121111 71%) 1em 1em/2em 2em round;
background-blend-mode: difference;
}

Далее...

12. CSS

Код

.sektsa_kudela:before {
background: linear-gradient(-15deg, #121111, #767373), radial-gradient(circle, #f3f1f1, #121111 65%) 0 0/2em 2em round, radial-gradient(circle, #121111, #f3f1f1, #121111 65%) 1em 1em/2em 2em round;
background-blend-mode: difference;
}

Далее...

13. CSS

Код

.sektsa_kudela:before {
background: linear-gradient(#6a6767, #121111), radial-gradient(circle, #121111, #918a8a, #121111 65%) 0 0/2em 2em round, radial-gradient(circle, #121111, #918a8a, #121111 65%) 1em 1em/2em 2em round;
background-blend-mode: screen, difference;
}

Далее...

14. CSS

Код

.sektsa_kudela:before {
background: conic-gradient(at 0 50%, #6a6767, #121111), repeating-radial-gradient(circle at 0 0, #121111, #918a8a, #121111 5%), repeating-conic-gradient(at -5% 50%, #121111, #918a8a, #121111 5%);
background-blend-mode: screen, difference;
}

Далее...

15. CSS

Код

.sektsa_kudela:before {
background: repeating-linear-gradient(45deg, #121111, #918a8a, #121111 5%) 0/50% no-repeat, repeating-linear-gradient(-45deg, #121111, #918a8a, #121111 5%) 100%/50% no-repeat, linear-gradient(#6a6767, #121111);
background-blend-mode: screen;
}

Далее...

16. CSS

Код

.sektsa_kudela:before {
background: radial-gradient(circle, #888, #121111), repeating-radial-gradient(circle at 0 100%, #121111, #888, #121111 5%) 0 0/100% 50% no-repeat, repeating-radial-gradient(circle at 100% 0, #121111, #888, #121111 5%) 0 100%/100% 50% no-repeat;
background-blend-mode: screen;
}

Далее...

17. CSS

Код

.sektsa_kudela:before {
  background: radial-gradient(#121111, #f3f1f1 70%) 0.75em 0.75em, conic-gradient(from -90deg at 15% 50%, #f3f1f1, #121111 5% 30%, #f3f1f1 35%), conic-gradient(at 50% 15%, #f3f1f1, #121111 5% 30%, #f3f1f1 35%), conic-gradient(from 90deg at 85% 50%, #f3f1f1, #121111 5% 30%, #f3f1f1 35%), conic-gradient(from 180deg at 50% 85%, #f3f1f1, #121111 5% 30%, #f3f1f1 35%);
  background-size: 1.5em 1.5em;
  background-blend-mode: difference, multiply, multiply, multiply;
}

Далее...

18. CSS

Код

.sektsa_kudela:before {
background: linear-gradient(#6a6767, #121111), repeating-conic-gradient(#ddd, #121111 12.5% 37.5%, #ddd 50%) 0/1em 1em;
background-blend-mode: screen;
}

Далее...

19. CSS

Код

.sektsa_kudela:before {
background: radial-gradient(circle, #121111, #6a6767), repeating-radial-gradient(circle, #ddd, #121111, #ddd 5%), repeating-conic-gradient(#ddd, #121111, #ddd 5%);
background-blend-mode: screen, difference;
}

Далее...

20. CSS

Код

.sektsa_kudela:before {
background: repeating-linear-gradient(45deg, #121111, #767373, #121111 20%), repeating-radial-gradient(circle, #ddd, #121111, #ddd 5%), repeating-conic-gradient(#ddd, #121111, #ddd 5%);
background-blend-mode: screen, difference;
}

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

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

Демонстрация
Источник: atuin.ru

25 Июля 2022 Просмотров: 770 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0