How not to use box shadows  🔗 **Source:** [How not to use box shadows](https://dgerrells.com/blog/how-not-to-use-box-shadows) > [!note]+ Document Notes > # Title: Exploring Box Shadows Creativity > > --- > tags: Creativity, Box Shadows, Graphic Design > Author: Anonymous > Source: Personal Experience > Reference: N/A > > --- > <!-- deep-read:sections start --> ## Table of Contents ## 📝 Summary: The article delves into the versatile world of box shadows in graphic design, exploring their relationship to drop shadows and the creative potential they offer. It highlights the performance aspects and unique features of box shadows, discussing their implications for UI design. ## 📖 Main Content: The author discusses the origins and functionality of box shadows, emphasizing their role in adding depth and visual appeal to compositions. By layering multiple box shadows and leveraging math hacks for rounded boxes, designers can enhance their creative freedom when crafting user interfaces. The article delves into unconventional uses of box shadows, showcasing how they can be employed creatively on a single div to achieve visually captivating effects. Through examples and code snippets, the author demonstrates the limitless possibilities of manipulating box shadows to create intricate designs. ### 🗒️ Notes - Box shadows are a form of drop shadow that enhance the depth of graphic compositions. - CSS allows for the layering of multiple box shadows to create complex designs. - Designers can experiment with different configurations of box shadows to achieve desired visual effects. - Performance considerations such as blur, transparency, and container size impact the rendering of box shadows. ## 📖 References: N/A ## 🧪 Hypotheses: - Increasing the complexity of box shadows may impact rendering performance and device compatibility. - Experimenting with blending modes and color variations in box shadows could yield novel design outcomes. - The use of interactive elements and animations with box shadows may enhance user engagement and interactivity in UI design. ### 📊 Methodology: - Conduct user testing to evaluate the visual appeal and usability of interfaces enhanced by creative box shadow techniques. - Employ A/B testing to compare the effectiveness of different box shadow variations on user engagement metrics. - Use eye-tracking technology to study how users interact with interfaces featuring intricate box shadow designs. ### ❓ Questions: - How can box shadow techniques be optimized for mobile responsiveness and cross-device compatibility? - What role does user feedback play in refining and iterating on designs incorporating complex box shadows? - How can designers leverage box shadows to create cohesive design systems and visual branding? ### 🔮 Future Research: - Investigate the psychological impact of box shadow elements on user perception and emotional engagement. - Explore the accessibility implications of using complex box shadow effects in web interfaces. - Examine the integration of augmented reality (AR) technologies with box shadow design strategies for immersive user experiences. ### 💡 Implications: - Innovative use of box shadows can differentiate products and interfaces, leading to enhanced brand recognition and user satisfaction. - Understanding the technical constraints and design possibilities of box shadows can empower designers to create visually stunning UIs. - Incorporating dynamic box shadow effects can enrich the user experience and foster user interaction with digital interfaces. ### ✅ Logical validity: The article presents a logical exploration of box shadows in graphic design, offering practical insights and creative inspirations for designers. The use of examples and code snippets enhances understanding and encourages experimentation with box shadow techniques. ## 🎯 Conclusion: By venturing beyond traditional design norms and embracing the creative potential of box shadows, designers can unlock new horizons of visual storytelling and user engagement. The article inspires designers to push the boundaries of box shadow creativity and elevate their digital design practices. In this week's featured document, "How not to use box shadows," dgerrells.com highlights the common mistakes designers make when applying box shadows, emphasizing that moderation is key. Overusing these effects can lead to performance pitfalls, especially during animations, and the article humorously warns against attempting overly complex designs, like ray tracing, with box shadows. A must-read for anyone looking to enhance their design skills without compromising on performance! (This blurb will not be that good until you heavily personalize the prompt.) **Background:** I instruct students on the principles and best practices of CSS design and implementation. **Top 3 Takeaways:** 🌟 **Understand the Purpose of Box Shadows:** Emphasize to students that box shadows should enhance visual hierarchy and not overwhelm the design. Teach them to use shadows sparingly and purposefully. 🔍 **Avoid Excessive Blur and Spread:** Highlight the importance of balance when applying blur and spread values. Encourage students to experiment with different values to find the right combination that adds depth without being distracting. 🎨 **Consistent Shadow Application:** Instruct students to maintain consistency in their use of box shadows across similar elements. This helps in creating a cohesive look and feel throughout their design, reinforcing brand identity and user experience. 1. What are the potential performance implications of using box shadows excessively in web design, especially in terms of rendering speed and resource consumption? 2. How can box shadows be creatively manipulated to simulate 3D effects, and what are the limitations of such techniques in achieving realistic visual representations? 3. In what ways could the concept of ray tracing be applied to box shadows, and what challenges might arise from attempting to implement this technique in practical scenarios? <!-- deep-read:sections end --> 📄 **Full text:** ![[Full Document Contents/Articles/How not to use box shadows|How not to use box shadows, dgerrells.com]] ## Highlights - It turns out that the majority of user interfaces are made up of boxes. It also turns out that some smart people figured out maths hacks to draw rounded boxes for super cheap which UI peeps love because with this hack boxes can be so round as to appear as circles. And the css box shadow implementation supports this math hack. ([View Highlight](https://read.readwise.io/read/01j6aa2fze06tj0fyerjqmnk9g)) - Well we cannot rotate the box shadows but they can be circles and a circle kinda looks like a ball. So what if I made a bunch of balls that could bounce around? And maybe I can "fake" a 3d effect by scaling the size based on a z value. This wouldn't be accurate perspective but would add some 3d depth. ([View Highlight](https://read.readwise.io/read/01j6aa2g012tgz519qvnt8b5qq)) - I refactored the code and scene a bit with a progressive rendering setup. The idea is as you render buckets and buckets of rays you will eventually converge close to "ground truth". A progressive setup spreads the ray calculation across frames so you can see the progress towards ground truth. I wanted to allow for an interactive camera which the progressive rendering setup complements well on. I used the camera and orbit controls from the threejs library. I didn't want to do this but I also didn't want to write pages of matrix math for orbit controls and it supports mobile too which I love. ([View Highlight](https://read.readwise.io/read/01j6aa2g1x49ahzp8hkt9fspbg)) - Web workers are how you multi thread in js. Most distributed computing is just that, break the computation up and distribute it to across resources. Once, all the resources are done computing, gather up the results. Ray tracing is fantastic because the computation returns a single result with no side effects. I setup some worker manager code which creates a pool of workers. It has two methods `render` and an `updateScene` so we can swap scenes at runtime. ([View Highlight](https://read.readwise.io/read/01j6aa2g425y8n3g0ct2b2xv62)) - There is a case where the main thread can get a frame from a worker right after updating scene data. The frame the worker sent is for the previous scene data. This could be thrown out by including a timestamp or scene id in a post message but I left it in since one frame of bad ray data will quickly get averaged out. The goal is to ray trace with box shadows which is dumb. I am ok if the tracing code is a bit dumb too. ([View Highlight](https://read.readwise.io/read/01j6aa2g6qc16tnab3yc6rtqbj)) - Note: In this week’s digest, we dive into the quirky world of box shadows and explore how they can both enhance and complicate our web designs. Discover the unexpected performance implications when layering multiple shadows and the challenges of using them in complex rendering tasks like ray tracing—spoiler alert: it might be a bit “dumb.” Join us as we highlight creative misapplications and innovative techniques that breathe new life into your UI, ensuring your designs maintain both flair and functionality. (This blurb will not be that good until you heavily personalize the prompt.) 1. What are the potential performance implications of using multiple box shadows in web design, particularly in relation to animation and rendering speed? 2. How can the principles of box shadows be creatively applied or misapplied in achieving visual effects, and what are the limits of such applications? 3. What challenges and considerations arise when attempting to use box shadows for complex rendering techniques like ray tracing, and why is it deemed "dumb" to do so?