16 lines
2.6 KiB
Markdown
16 lines
2.6 KiB
Markdown
<https://www.reddit.com/r/webdev/s/sNN2DpeOzC>
|
||
|
||
' Yes, it can be done. Here are my tips with turning CSS shadows into something that looks more tangible.
|
||
|
||
1. It takes about 3 drop-shadow attributes to make one good-looking, realistic shadow. One very close and very opaque, with very little blur, to represent the ambient occlusion within the shadow, a second one to represent the base shadow (more transparent, more blur, farther from the item), and a third shadow with very high blur, very far distance, and very low opacity to represent the ambient occlusion outside of the shadow.
|
||
2. Shadows should be colored according to what light would do in the scenario. So, for example, a shadow should take on the color of the surface it is on, and the color of the surface it would be reflecting light from.
|
||
3. Inset shadows are necessary to convey depth on the surface. You must use light colors, again factoring point #2 in mind, and some minimal darker colors as well, and offset them to give depth. Typically you need at least two inset shadows to achieve a good depth: one short-range opaque shadow to replicate the tangible edge of the surface, and one longer-range transparent shadow to represent the general fall-off and light reflection on the broader surface.
|
||
4. Very soft gradients can help convey depth, but should not be overtly noticeable. For example, a foreground can be slightly lighter at the top, and slightly darker on the bottom, and if done subtly enough, the user won't even notice it is happening, but it will convey better, more tangible depth to the item. Notice how the backgrounds on both image do this to convey a light source.
|
||
|
||
Of course all shadows (inset and out) should be angled appropriately to a common light source, and the general distance should be determined by how "thick" you want the foreground to look. Generally, thicker items are harder to convincingly convey than thinner ones.
|
||
|
||
This takes a lot of work, and I recommend doing all designing in a vector graphics tool like Affinity Designer or Adobe Illustrator before moving into CSS. Excessive shadows can have a negative impact on performance on some older devices, although I rarely see this occur.
|
||
|
||
Here is a rough and quick codepin demonstrating these tactics: <https://codepen.io/atalkingfish/pen/YzBLgQB>
|
||
|
||
PLEASE NOTE: Just because you can do this doesn't mean it will look good, fit the application, be trendy, etc. Currently, websites with a lot of depth don't usually look very trendy and current. |