1

Есть блок, хочу сделать плавный переход на белый цвет. 1 вариант - svg - не шарю, и не хочу кешировать, с png такая же история. Попытки создать на css - обламались.

картинка

4
  • @L.F.C. не через svg и не через png.
    – Topper-H
    3 апр 2019 в 13:00
  • canvas тоже в топку?
    – user262779
    3 апр 2019 в 13:06
  • @L.F.C, если у вас есть решение на canvas- буду рад увидеть. Вот что у меня получалось на css - i.imgur.com/TJApgd0.png . И то, через костыли...
    – Topper-H
    3 апр 2019 в 13:16
  • Связанный: ru.stackoverflow.com/q/957314/262779
    – user262779
    3 апр 2019 в 13:32

1 ответ 1

4

Only CSS будет как-то так:

.up,
.bottom {
  position: fixed;
  left: 0px;
  height: 50px;
  width: 100%;
}

.up {
  top: 0px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.9));
}

.bottom {
  bottom: 0px;
  border-radius: 20% 180% 0 0/200% 200% 0 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
}

body { background-color: #00bcd4; background-image: url('https://i.stack.imgur.com/m9NKc.png'); }
<div class="up"></div>
<div class="bottom"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.