Укладка двух линейно-градиентных фонов на один элемент, но с разными цветами и высотой - PullRequest
Новая
       72

Укладка двух линейно-градиентных фонов на один элемент, но с разными цветами и высотой

1 голос
/ 19 сентября 2019

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

Это эффект, который я ищу:

enter image description here

Это фоновый эффект для элемента <div>.Это просто (или не просто для меня) два сложенных linear-gradient фона, которые создают равномерно расположенные вертикальные полоски с разными цветами заливки.Верхний фон имеет фиксированную высоту 700 пикселей, а нижний должен быть жидким, то есть повторяться, чтобы заполнить оставшееся пространство.Законченное правило должно быть кросс-браузерным, то есть правильными префиксами и т. Д.

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

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

background: linear-gradient(90deg, #E0E0E0 0.5%, transparent 0.5%) 0.5px 0, #EBF1F6;
background-size: calc((100% / 8) + 0.2px) 0.5px;
background-position: -1px;

То, что я сделал, полуобъяснил:

  • Часть linear-gradient состоит из градиента 90 градусов с #EBF1F6 заливка и #E0E0E0 полоска.
  • Я использовал 0,5%, чтобы сделать полоску идеальной толщины.
  • Я использовал calc((100% / 8) + 0.2px), чтобы создать 8 блоков с равным интервалом и 0.2px, так чточто полоска, которая создаетсяt правый край браузера не виден (0,2px * 8 = смещение рисунков вправо на 1px).
  • Я также использовал background-size: -1px, чтобы избавиться от крайнего левого полоски на левом краюбраузер.

Вот как это выглядит до сих пор:

https://codepen.io/PaparazzoKid/pen/NWKOQZr

Чего не хватает:

  • Мне не удалось успешно установить высоту на linear-gradient, т.е. 700px.
  • , поскольку я не установил высоту первого linear-gradient,Я, очевидно, не пробовал накладывать еще один linear-gradient на этот элемент с плавной высотой и другим цветом заливки.
  • Это не кросс-браузер, и я уверен, что linear-gradient не работает для всех браузеров, поскольку некоторые нуждаются в префиксах, а некоторые используют gradient вместо linear-gradient.

Я был бы бесконечно благодарен, если бы кто-то мог поделиться своими знаниями и помочь мне закончить этот эффект CSS.

1 Ответ

2 голосов
/ 19 сентября 2019

Вы можете попробовать, как показано ниже:

Я использовал 80px вместо 700px, чтобы мы могли увидеть результат в уменьшенном фрагменте.Я также рассмотрел различное количество вертикальных полосок, чтобы показать, что вы можете легко изменить их для каждого раздела: 

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(to right,
      blue calc(100% - 2px), red calc(100% - 2px) 100%)      left top
      /calc((100% + 2px)/4)  80px,
    linear-gradient(to right,
      orange calc(100% - 2px), purple calc(100% - 2px) 100%) left bottom
      /calc((100% + 2px)/6) calc(100% - 80px);
   background-repeat:repeat-x;
}

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

body {
  margin:0;
  height:100vh;
  background:
   /* Top layer*/
    linear-gradient(to right,
      transparent calc(100% - 2px), red calc(100% - 2px) 100%)      left top
      /calc((100% + 2px)/4)  80px,
    linear-gradient(60deg,blue,lightblue) left top/100% 80px,   
      
   /* Bottom layer*/   
    linear-gradient(to right,
      transparent calc(100% - 2px), purple calc(100% - 2px) 100%)  left bottom
      /calc((100% + 2px)/6) calc(100% - 80px), 
    linear-gradient(160deg,orange,green) left bottom/100% calc(100% - 80px);
   background-repeat:repeat-x;
}

С некоторой переменной CSS для облегчения управления значениями: 

body {
  --nt:4;   /* Number of vertical lines on the top*/
  --lt:2px; /* Thickness*/
  
  --nb:6;   /* Number of vertical lines on the bottom*/
  --lb:4px; /* Thickness*/
  
  --h:100px; /*height of the top part*/

  margin:0;
  height:100vh;
  background:
   /* Top layer*/
    linear-gradient(to right,
      transparent calc(100% - var(--lt)), red calc(100% - var(--lt)) 100%)      left top
      /calc((100% + var(--lt))/var(--nt))  var(--h),
    linear-gradient(60deg,blue,lightblue) top/100% var(--h),   
      
   /* Bottom layer*/   
    linear-gradient(to right,
      transparent calc(100% - var(--lb)), purple calc(100% - var(--lb)) 100%)  left bottom
      /calc((100% + var(--lb))/var(--nb)) calc(100% - var(--h)), 
    linear-gradient(160deg,orange,green) bottom/100% calc(100% - var(--h));
   background-repeat:repeat-x;
}

Также обратите внимание, что в случае сплошной окраски вам не нужно определять высоту нижней части, поскольку она будет перекрываться верхней частью 

body {
  --nt:4;   /* Number of vertical lines on the top*/
  --lt:2px; /* Thickness*/
  
  --nb:6;   /* Number of vertical lines on the bottom*/
  --lb:4px; /* Thickness*/
  
  --h:100px; /*height of the top part*/

  margin:0;
  height:100vh;
  background:
   /* Top layer*/
    linear-gradient(to right,
      transparent calc(100% - var(--lt)), red calc(100% - var(--lt)) 100%)      left top
      /calc((100% + var(--lt))/var(--nt))  var(--h),
    linear-gradient(60deg,blue,lightblue) top/100% var(--h),   
      
   /* Bottom layer*/   
    linear-gradient(to right,
      transparent calc(100% - var(--lb)), purple calc(100% - var(--lb)) 100%)  left bottom
      /calc((100% + var(--lb))/var(--nb)) 100%, 
    linear-gradient(160deg,orange,green) ;
   background-repeat:repeat-x;
}
...