Рисование пузырькового отражения с градиентами - PullRequest
Новая
       13

Рисование пузырькового отражения с градиентами

0 голосов
/ 06 января 2019

с новым годом! Я пытаюсь заменить эту фоновую картинку css для масштабирования. background for a botton

У меня проблема с логикой градиентов.

свойства div: 

.bg {
   border: 1px solid white;
   border-radius:10px;
   padding:10px;
   width:100%;
}

тогда я пытаюсь его покрасить

цвет фона # 065BDB цвет «пузырькового отражения» - это градиент от rgba (87,144,231,1) к rgba (87,144,231,0) - того же цвета с непрозрачностью затухания.

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

background:
radial-gradient(2em 2em at 3% 25%, rgba(87,144,231,1) 50%, transparent 50%),
linear-gradient(to bottom, transparent 3%, rgba(87,144,231,1) , transparent 97%),
radial-gradient(2em 2em at 97% 25%, rgba(87,144,231,1) 50%, transparent 50%);

У меня много проблем с этим, я не могу понять, как нарисовать квадрат сверху вниз с полями слева и справа, и как добавить прозрачность сверху вниз, + добавить фон секунд, возможно, его лучше сделать 2 деления вместо 1.

Ответы [ 2 ]

0 голосов
/ 06 января 2019

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

.bg {
  border: 1px solid white;
  border-radius: 50px;
  height:60px;
  background: #065BDB;
  position:relative;
  z-index:0;
}
.bg::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:5px;
  left:15px;
  right:15px;
  height:30px;
  border-radius:inherit;
  background:linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0));

}
<div class="bg">
</div>

С несколькими фонами вы можете попробовать это: 

.bg {
  border: 1px solid white;
  border-radius: 50px;
  height:60px;
  background: 
    radial-gradient(30px 30px at right,transparent 50%, #065BDB 52%)  0% 10px/35px 30px,
    radial-gradient(30px 30px at left,transparent 50%, #065BDB 52%) 100% 10px/35px 30px,
    linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0)) 0 10px/100% 30px,
    #065BDB;
  background-repeat:no-repeat;
  box-sizing:border-box;
}
<div class="bg"></div>

Мы можем добавить переменную CSS для управления формой: 

.bg {
  --h:30px; /*the height of the bubble*/
  --d:35px; /*the distance from the sides*/
  --t:10px; /*the distance from the top*/
  margin:5px;
  border-radius: 50px;
  height:60px;
  background: 
    radial-gradient(var(--h) var(--h) at right,transparent 50%, #065BDB 52%)  0% var(--t)/var(--d) var(--h),
    radial-gradient(var(--h) var(--h) at left,transparent 50%, #065BDB 52%) 100% var(--t)/var(--d) var(--h),
    linear-gradient(to bottom, rgba(87,144,231,1), rgba(87,144,231,0)) 0 var(--t)/100% var(--h),
    #065BDB;
  background-repeat:no-repeat;
  box-sizing:border-box;
}
<div class="bg"></div>
<div class="bg" style="--h:20px;--d:50px;--t:20px"></div>
<div class="bg" style="--h:40px;--d:100px;--t:5px"></div>
0 голосов
/ 06 января 2019

попробуй с ::before

.bg {
  width:100%;
  height:50px;
  position:relative;
  background:royalblue;
  border-radius:20px;
}

.bg::before {
  content:'';
  width:97%;
  height:25px;
  background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.07));
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  border-radius:20px;
}
<div class="bg"></div>
...