Как реализовать тени прокрутки над изображениями, используя только CSS? ⇐ CSS

[Anonymous]

Я адаптировал этот замечательный макет фото. Я хотел внедрить максимальную высоту и сделать ее прокручивать. Затем я хотел установить полосы прокрутки, чтобы всегда увидеть, чтобы указать, что есть контент для прокрутки. Это стало более сложным, чем я представлял, так как оказывается, что стержни прокрутки перезаписываются браузерами и ОС. Нашел этот хороший сайт и скопировал класс. Вот HTML и CSS.* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

figcaption {
text-align: center;
}

figure.gallery ul {
border: 1px red solid;
max-width: 80%;
height: 50vh;
margin: 0 auto;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
gap: 0.2em;
list-style-type: none;
}

figure.gallery ul li {
height: 40vh;
flex-grow: 1;
}

figure.gallery ul li:last-child {
flex-grow: 10;
}

figure.gallery ul li img {
max-height: 100%;
min-width: 100%;
object-fit: cover;
vertical-align: bottom;
}

@media (max-aspect-ratio: 1/1) {
figure.gallery ul li {
height: 30vh;
}
}

// Short screens

@media (max-height: 480px) {
figure.gallery ul li {
height: 80vh;
}
}

// Smaller screens in portrait

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
figure.gallery ul {
flex-direction: row;
}

figure.gallery ul li {
height: auto;
width: 100%;
}

figure.gallery ul li img {
width: 100%;
max-height: 75vh;
min-width: 0;
}
}

.scrollGradient {
background:
linear-gradient(#ffffff 33%, rgba(255, 255, 255, 0)),
linear-gradient(rgba(255, 255, 255, 0), #ffffff 66%) 0 100%,
radial-gradient(farthest-side at 50% 0, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 50% 100%, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0)) 0 100%;
background-color: #ffffff;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
background-size: 100% 45px, 100% 45px, 100% 15px, 1 0 0 % 1 5 p x ; < b r / > } < / c o d e > < b r / > < p r e C l a s s = " S n i p p e t - C o d e - h t m l l a n g - h t m l p r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; h e a d e r & g t ; < b r / > & l t ; h 1 & g t ; G a l l e r y & l t ; / h 1 & g t ; < b r / > & l t ; / h e a d e r & g t ; < b r / > & l t ; f i g u r e c l a s s = " g a l l e r y " & g t ; < b r / > & l t ; u l c l a s s = " s c r o l l G r a d i e n t " & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 6 6 _ k w l v 0 n . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 6 6 _ k w l v 0 n . j p g " < b r / > a l t = " A T o y o t a P r e v i a c o v e r e d i n g r a f f i t i " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 6 2 1 _ z g t c c o . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 6 2 1 _ z g t c c o . j p g " < b r / > a l t = " I n t e r e s t i n g l i v i n g r o o m l i g h t t h r o u g h a w i n d o w " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 1 3 _ g f b i w i . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 1 3 _ g f b i w i . j p g " < b r / > a l t = " S a r a o n a r e d b i k e " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 8 8 _ n b 0 d m a . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 8 8 _ n b 0 d m a . j p g " < b r / > a l t = " X O X O v e n u e i n b e t w e e n t a l k s " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 5 9 _ z i u o m y . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 5 9 _ z i u o m y . j p g " < b r / > a l t = " T r e e s l i t b y g r e e n l i g h t d u r i n g d u s k " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 8 6 _ o j 8 j f o . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 5 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 8 6 _ o j 8 j f o . j p g " < b r / > a l t = " P o rtrait of Justin Pervorse"
loading="lazy"
/>


[*]


alt="Empty bike racks outside a hotel"
loading="lazy"
/>


[*]


alt="Heavy rain on an intersection"
loading="lazy"
/>


[*]


alt="Payam Rajabi eating peanut chicken"
loading="lazy"
/>


[*]


alt="Portland skyline sunset"
loading="lazy"
/>


[*]


alt="Interior at Nong's"
loading="lazy"
/>


[*]


alt="A kimchi hotdog on a plate"
loading="lazy"
/>


[*]


alt="Restaurant window with graffiti saying 'water'"
loading="lazy"
/>


[*]


alt="Portrait of Jeremy Tanner"
loading="lazy"
/>


[*]


alt="Jordan, Sarah and Sara on red bikes, w a i t i n g " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 4 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 8 1 _ c e o c w v . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 4 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 8 1 _ c e o c w v . j p g " < b r / > a l t = " B a r i s t a w e a r i n g a h o o d i e s a y i n g ' C o f f e e S h o u l d B e D o p e . ' " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 4 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 1 7 _ n i 2 k 0 p . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 4 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 1 7 _ n i 2 k 0 p . j p g " < b r / > a l t = " P a y a m c r o s s i n g t h e s t r e e t o n a b i k e " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 3 / p h o t o s t r e a m - p h o t o s / D S C 0 5 6 2 0 _ q f w y c q . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 3 / p h o t o s t r e a m - p h o t o s / D S C 0 5 6 2 0 _ q f w y c q . j p g " < b r / > a l t = " L i t t r e e s r e f l e c t e d i n a p u d d l e " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 3 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 6 2 _ b 3 3 u v p . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 3 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 6 2 _ b 3 3 u v p . j p g " < b r / > a l t = " M o o d y c h a i r i n m y h o t e l r o o m " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 3 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 8 9 _ m q z k t l . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 3 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 8 9 _ m q z k t l . j p g " < b r / > a l t = " T o m a n d J e n n w e a r i n g s u n g l a s s e s " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 3 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 7 6 _ d l k j z a . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 3 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 7 6 _ d l k j z a . j p g " < b r / > a l t = " J o r d a n a n d S a r a h i n f r o n t o f a r e s t a u r a n t w i n d o w " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 3 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 9 7 _ a b b d 3 c . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 3 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 9 7 _ a b b d 3 c . j p g " < b r / > a l t = " S a r a h r e a d i n g t h e D o u b l e D r a g o n d r i n k m e n u " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 8 7 _ f c d v 7 t . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 8 7 _ f c d v 7 t . j p g " < b r / > a l t = " B e e r b r e w i n g e q u i p m e n t " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 9 3 _ q 6 n j b k . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 9 3 _ q 6 n j b k . j p g " < b r / > a l t = " 2 c o c k t a i l s i n t h e m a k i n g " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 4 6 _ x j 6 0 f f . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 4 6 _ x j 6 0 f f . j p g " < b r / > a l t = " B e v e r a g e f r i d g e a t N o n g ' s " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 5 9 _ h u 4 9 z x . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 5 9 _ h u 4 9 z x . j p g " < b r / > a l t = " W o o d s t r u c t u r e r e f l e c t i o n s " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 8 2 _ d t r j 0 2 . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 8 2 _ d t r j 0 2 . j p g " < b r / > a l t = " C o l o r f u l g a r d e n e q u i p m e n t i n a s h o p w i n d o w " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 6 5 _ d x 5 r p 6 . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 5 6 5 _ d x 5 r p 6 . j p g " < b r / > a l t = " S a r a h i n f r o n t o f a w o o d e n w a l l " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 6 1 3 _ o 9 a f 2 z . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 6 1 3 _ o 9 a f 2 z . j p g " < b r / > a l t = " A n e o n b a n a n a " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 6 9 _ f d x d z x . j p g " < b r / > & g t ; < b r / > & l t ; i m g < b r / > s r c = " h t t p s : / / r e s . c l o u d i n a r y . c o m / c s s - t r i c k s / i m a g e / u p l o a d / f _ a u t o , q _ a u t o / v 1 5 6 8 8 1 4 7 8 2 / p h o t o s t r e a m - p h o t o s / D S C 0 5 4 6 9 _ f d x d z x . j p g " < b r / > a l t = " M a t t S a c k s s m i l i n g w h i l e w e ' r e w a i t i n g f o r f o o d " < b r / > l o a d i n g = " l a z y " < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / l i & g t ; < b r / > & l t ; l i & g t ; < b r / > & l t ; a < b r / > t a r g e t = " _ b l a n k " < b r / > h r e f = " h t t p s : / / r e s . c l o u dinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05558_yq2tnz.jpg"
>

alt="A fixed-gear bike under some bright lights"
loading="lazy"
/>


[*]


alt="Panic's PlayDate being held by a tester"
loading="lazy"
/>


[*]


alt="Window reflection of me and Payam"
loading="lazy"
/>


[*]


alt="Upside down shopping carts"
loading="lazy"
/>


[*]


alt="Payam riding a bike with no hands"
loading="lazy"
/>


[*]


alt="A kid's pillow left on the bench of a bus stop"
loading="lazy"
/>


[*]


alt="My reflection in the mirror"
loading="lazy"
/>


[*]


alt="Jordan holding an iced coffee against his head to cool down"
loading="lazy"
/>


[*]


alt="Jordan and Sarah looking at the menu in a coffee shop"
loading="lazy"
/>





Gallery
< /code>
< /div>
< /div>
< /p>
Проблема заключается в том, что тени приведены под изображениями. Это самое близкое, что я получил. Есть ли способ нарисовать градиенты поверх изображений?

Подробнее здесь: https://stackoverflow.com/questions/796 ... g-only-css