Curved 3D Shadows
Curved 3D shadows are bending outwards, downwards at the sides, away from the item - what natural shadows do.
HTML effects typically curve inwards around the item. Blur can be used to show distancing.
You can simulate the outwards-bending curve by creating an angle. Attach blurred box-shadow or gradient pseudo-elements behind the items.
Problems with angles:
- There are no real curves.
- The distancing depends on the width of the item. There is no general solution that looks good.
- The pseudo-elements continue behind the item. You can't use this technique for objects with transparency.
Solution:
Use a background image of a shadow. A pseudo-element provides the positioning.
Problem with pseudo-elements:
They don't work with inline frames and images.
Solution: Wrap the items tightly and attach the pseudo-elements there.
Problem:
The shadow shows earlier than the item while this is still loading. The problem gets worse if you use loading effects.
Solution:
Load the shadow together with the item.
Better solution:
1der1 does all of this automatically. There is no programming required.
Watch the short video to see how it works.
See 3D shadows at a 1der1 website:
