Floating Elements Can Enhance Aesthetic Designs

A common method of giving the aesthetic design of a web page a sense of depth is to make certain elements appear to be "floating" in front of the background by darkening identically shaped segments behind those elements. Elements such as photographs and text boxes can be made to give the impression that they are casting shadows behind them by having them dynamically generate what amount to dark, gray, and transparent blurs.

Many websites that employ drop shadows to enhance the presentation of text boxes often use a baseline piece of CSS syntax that reads "box-shadow" to generate a rudimentary shadow that mainly runs along one horizontal face and one vertical face of the box. The syntax supports few parameters for additional arguments by default and mainly allows the designer to control how many pixels the shadow is displaced away from its host, its color scheme, and its levels of blur and transparency.

However, artistically minded web designers often find that the drop shadows made possible by this syntax look overly artificial and are not reflective of the true workings of shadows cast in the real world. Shadows are only likely to appear as nearly perfect silhouettes of their base shapes if they result from a distant and powerful light source that is not "competing" with other sources; the most classic example of this is sunlight. It is far more likely for shadows to appear as vague blurs surrounding perhaps three of a square's four faces because of the presence of multiple light sources.

Fortunately, it does not take specialized syntax from an extension of CSS to create a drop shadow that mimics real shadows more authentically. In fact, one only needs to use multiple instances of the aforementioned "box-shadow" syntax on the same text box to create a "layered" shadow effect comprising several slightly different drop shadows overlapping each other. Since each drop shadow can exhibit individually adjusted transparency and blur values, it becomes an easy process to experiment with multiple layers and craft differently thick shadows that can appear to stretch longer from specific faces. For more information click here https://tobiasahlin.com/blog/layered-smooth-box-shadows/.