So you think you know box shadows?
This article explores creative uses of box shadows in web design, covering basics, layering for effects, simulating 3D, and performance considerations. It showcases innovative applications with code snippets and demos.
Read original article
This article delves into the creative and unconventional use of box shadows in web design. It explains the basics of box shadows as a form of drop filter and their application in adding depth to UI elements. The piece explores pushing the boundaries of box shadows by layering multiple shadows to create unique visual effects. It also discusses experimenting with box shadows to simulate 3D effects, such as creating bouncing balls and projecting points onto surfaces. The author shares code snippets and visual demos to showcase these innovative uses of box shadows, including rendering thousands of shadows in real-time and mapping pixels from images to create dynamic visual effects. The article concludes by highlighting the performance implications of using complex box shadow configurations and the potential for further exploration in creating interactive and visually engaging web experiences.
Related
CSS Surprise Manga Lines
The article explains creating a manga-style surprise effect with CSS, focusing on replicating character facial lines. It suggests using GIF overlays for better performance than CSS animations. Published on July 2, 2024.
Asking an LLM to build a simple web tool
The author used ChatGPT 4o to create a CSS box shadow tool, allowing users to adjust settings and copy CSS code. Despite minor issues, the tool's efficiency and accuracy show promise for quick prototyping.
Beautiful shadows need beautiful colors
Considering shadow colors in UI design is crucial to avoid mismatched appearances. Factors like light sources, object shapes, and surface colors define shadows. Challenges in consistent application exist, with proposed solutions and limitations in CSS capabilities discussed. Alternative methods like Figma's Effect styles are suggested for ideal shadow effects.
- Discussions on technical aspects, such as transparency affecting GPU performance and the use of depth buffers.
- Appreciation for the article's exploration and innovative applications, with some users sharing related projects and experiences.
- Suggestions for improvements and additional features, like adding RSS support to the blog and fixing grammatical errors.
- Comparisons to other web design techniques and tools, including references to canvas and other shadow-related projects.
- General praise for the article's content and its impact on readers' understanding of web design.
32 commentsThat's because transparency limits how you can batch draws on the GPU. With opaque draws, you can use the depth buffer and draw in any order you like e.g. maximizing batching. With transparency, you need to draw things in the right order for blending to work (painters order).
> Layering. That is an important word.
Layering is also the key to the (silly but also sometimes good-looking) effects from my text shadow project from 14yrs ago: https://paulirish.github.io/mothereffingtextshadow/
Any references to learn more about these hacks?
So hard.
Why would I know it? It's CSS!
Related
CSS Surprise Manga Lines
The article explains creating a manga-style surprise effect with CSS, focusing on replicating character facial lines. It suggests using GIF overlays for better performance than CSS animations. Published on July 2, 2024.
Asking an LLM to build a simple web tool
The author used ChatGPT 4o to create a CSS box shadow tool, allowing users to adjust settings and copy CSS code. Despite minor issues, the tool's efficiency and accuracy show promise for quick prototyping.
Beautiful shadows need beautiful colors
Considering shadow colors in UI design is crucial to avoid mismatched appearances. Factors like light sources, object shapes, and surface colors define shadows. Challenges in consistent application exist, with proposed solutions and limitations in CSS capabilities discussed. Alternative methods like Figma's Effect styles are suggested for ideal shadow effects.