How can I deal with a long shadow image with css?

[brunoorocha]

I’m working on a web project and one of requirements it’s that it must to be responsive. Until now everything it’s ok, but in high-fidelity prototype it have a section with a image with a long shadow that goes to the right margin of my screen and I really don’t know how I can make this resposive (without making CSS black magic). I would be very thankful if someone could give me a light about how I can make this trick haha.

Bellow it’s the link to an image of how the layout must to be.
https://drive.google.com/file/d/1tEVcqlIy9g-DVW7p-MKMe9uLyUanu0F1/view?usp=sharing

[ludykraks]

Would you mind sharing the link to the web page?

Other than that if you want to make the image responsive, try:

img {
max-width: 100%;
height: auto
}

[brunoorocha]

I’m still in local development so I don’t have the link to share :(

I worked on it earlier and I managed to make it work putting the img inside a div, this div occupies half of screen. So I set img with position: absolute and that’s it, the absolute positioning make image size not be affected by parent div size but the positioning yes because I didn’t set left/right properties.

My problem is the long shadow, it’s like the image belongs to the normal alignment of my content, but the shadow exceeds my this alignment, this is why I’m using position: absolute. This make a lot easier to handle in smaller screens, but in larger don’t, unless my shadow were very very long.

But I appreciate your tip, it would work very well if it were not for the long shadow! 👍🏻

[snippet248]

What about using a negative “spread radius” on the shadow?
Example: box-shadow: 0px 0px 10px -30px rgba(0,0,0,0.5);

[Author]

Posts