Подскажите пожалуйста, как реализовать такой градиент? Не могу разобраться так как это 2 картинки в одном блоке..
Я решил этот вопрос используя псевдоэлементы.
Подскажите пожалуйста, как реализовать такой градиент? Не могу разобраться так как это 2 картинки в одном блоке..
Я решил этот вопрос используя псевдоэлементы.
body {
background-image:
linear-gradient(to right, transparent, white, transparent),
url(https://i.imgur.com/Lzvw7g8.jpg),
url(https://i.imgur.com/V09WrPA.jpg);
background-position:
0 0,
/* 600 - половина ширины картинки */
calc(50vw - 600px) calc(50vh + 50%),
50vw calc(50vh + 50%);
background-repeat:
repeat,
no-repeat,
no-repeat;
}
В твоём примере может быть не градиент, например text-shadow. Если использовать градиент, то вот пример для тебя:
background: linear-gradient(to right, #1e5799 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, #1e5799 100%);
Пояснения:
linear-gradient
- линейный градиент.
to right
- от начала (левой части) в правую сторону.
#1e5799 0%
- цвет от 0% начинается и ограничивается следующим.