Преобразование этого изображения градиента в градиенты CSS - PullRequest
Новая
       20

Преобразование этого изображения градиента в градиенты CSS

4 голосов
/ 14 июня 2019

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

gradient

.gradients {
  position: relative;
  width: 100%;
}

.gradients div {
  height: 40px;
}

.bottom-gradient {
  -ms-transform: rotate(0.6deg);
  -webkit-transform: rotate(0.6deg);
  transform: rotate(0.6deg);
  background: -moz-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 52, 47, 0.9)), color-stop(100%, rgba(3, 95, 26, 0.9)));
  background: -webkit-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: linear-gradient(to right, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80414c46', endColorstr='#80035f1a', GradientType=1);
}

.top-gradient {
  -ms-transform: rotate(0.6deg);
  -webkit-transform: rotate(0.6deg);
  transform: rotate(0.10deg);
  background: -moz-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3, 95, 26, 0.9)), color-stop(100%, rgba(37, 52, 47, 0.9)));
  background: -webkit-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: linear-gradient(to right, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80035f1a', endColorstr='#80414c46', GradientType=1);
}
<div class="gradients">
  <div class="top-gradient"></div>
  <div class="bottom-gradient"></div>
</div>

Ответы [ 2 ]

1 голос
/ 14 июня 2019

position: absolute или отрицательный margin будут работать, но требуют жестко закодированных значений.Более гибкая альтернатива - добавить transform: translateY(-100%) к вашему .bottom-gradient.

Поскольку у вас уже есть transform: rotate(0.6deg) для этого элемента, вы можете просто добавить к нему translateY: 

.bottom-gradient { transform: rotate(0.6deg) translateY(-100%) }

В попытке воспроизвести изображение чуть ближе, яТакже были сделаны следующие изменения:

  • Изменены rotation градиентов на 1deg и -1deg.
  • Изменены height на 16px;

.gradients {
  position: relative;
  width: 100%;
}

.gradients div {
  height: 16px;
}

.bottom-gradient {
  -ms-transform: rotate(-1deg) translateY(-100%);
  -webkit-transform: rotate(-1deg) translateY(-100%);
  transform: rotate(-1deg) translateY(-100%);
  background: -moz-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(37, 52, 47, 0.9)), color-stop(100%, rgba(3, 95, 26, 0.9)));
  background: -webkit-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  background: linear-gradient(to right, rgba(37, 52, 47, 0.9) 0%, rgba(3, 95, 26, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80414c46', endColorstr='#80035f1a', GradientType=1);
}

.top-gradient {
  -ms-transform: rotate(1deg);
  -webkit-transform: rotate(1deg);
  transform: rotate(1deg);
  background: -moz-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(3, 95, 26, 0.9)), color-stop(100%, rgba(37, 52, 47, 0.9)));
  background: -webkit-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -o-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: -ms-linear-gradient(left, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  background: linear-gradient(to right, rgba(3, 95, 26, 0.9) 0%, rgba(37, 52, 47, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80035f1a', endColorstr='#80414c46', GradientType=1);
}
<div class="gradients">
  <div class="top-gradient"></div>
  <div class="bottom-gradient"></div>
</div>
0 голосов
/ 14 июня 2019

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

.gradients {
  position: relative;
  height: 40px;
  margin:40px 0;
}
.gradients:before,
.gradients:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform: rotate(2deg);
  background: linear-gradient(to right, rgba(37, 52, 47, 0.9), rgba(3, 95, 26, 0.9));
}
.gradients:after {
  /* since it's the same gradient in the other direction, you can simply make a mirror image of it*/
  transform:scaleX(-1) rotate(2deg);
}
<div class="gradients">
</div>

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

.gradients {
  position: relative;
  height: 40px;
  margin:40px 0;
}
.gradients:before,
.gradients:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform: skewY(2deg);
  background: linear-gradient(to right, rgba(37, 52, 47, 0.9), rgba(3, 95, 26, 0.9));
}
.gradients:after {
  /* since it's the same gradient in the other direction, you can simply make a mirror image of it*/
  transform:scaleX(-1) skewY(2deg);
}
<div class="gradients">
</div>

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

.gradients {
  position: relative;
  height: 80px;
  margin:40px 0;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 25 30" ><defs><linearGradient id="one" ><stop offset="0%" stop-color="rgba(37, 52, 47, 0.9)"/><stop offset="100%" stop-color="rgba(3, 95, 26, 0.9)" /></linearGradient><linearGradient id="two" ><stop offset="0%" stop-color="rgba(3, 95, 26, 0.9)" /><stop offset="100%" stop-color="rgba(37, 52, 47, 0.9)"/></linearGradient></defs><polygon points="25,7 25,25 0,18 0,0" fill="url(%23one)"/><polygon points="25,0 25,18 0,25 0,7" fill="url(%23two)"/></svg>');
  background-size:100%;
}
<div class="gradients">
</div>

Вот код SVG, расширенный различными цветами для лучшего понимания: 

svg {
  width:100%;
  height:100px;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 25 30">
  <defs>
    <linearGradient id="one" >
        <stop offset="0%" stop-color="blue"/>
        <stop offset="100%" stop-color="red" />
   </linearGradient>
   <linearGradient id="two" >
        <stop offset="0%" stop-color="yellow" />
        <stop offset="100%" stop-color="purple"/>
  </linearGradient>
 </defs>
 <!-- update the value 7 and 18 by keeping it the same between both polygon -->
 <polygon points="25,7 25,25 0, 18 0, 0" fill="url(#one)"/>
 <polygon points="0, 7 0, 25 25,18 25,0" fill="url(#two)"/>
 
</svg>
...