« Older Newer »

May 31, 2020


Curved 3D Shadows

Curved 3D shadows are bending outwards, downwards at the sides, away from the item - what real 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:

shoredoctors.co.nz



Leave a comment

Comments will be approved before showing up.