• 100 Days of Code
• Installation
• Live Site
• Improvement
• Resources
• Copyright
• Let's Connect!

Day 38: October 3, 2022

• The The Box of Shadows is a CSS box shadow generator, adapted from two tutorials:

  • Box Shadow Generator

  • JavaScript 30: CSS Variables

• Together, the lessons taught me about the efficacy of CSS variables and HTMLElement datasets in dynamically rendering elements with JavaScript.

• Functionality was extended with the following:

  • Clipboard.js implementation

  • Accessibility and installability as a progressive web app

  • Ability to change theme, multiple color inputs, and reset code

1. Git clone and cd into the repo folder:

git clone git@github.com:emjose/box-of-shadows.git && cd box-of-shadows

2. Run the command:

open index.html

• The Box of Shadows is best viewed on a destop or laptop computer browser.

• The Box of Shadows can be viewed on mobile devices, but large shadow values will be cropped.

• The Box of Shadows is a responsive and progressive web app.

GIF demo: Changing Shadow Values

Users can change values for horizontal and vertical offset, as well as blur and spread radius.

GIF demo: Changing Color Values

Body, shadow, or box color can be changed. The color picker is not visible in the GIF, see image below.

GIF demo: Copying and Resetting

• The box-shadow CSS code can be copied to the clipboard, with vendor prefixes for common browsers.

• Shadow and color settings can be reset to default values for either light or dark mode.

GIF demo: Light or Dark Mode

Users can switch between light or dark mode, with preference saved to local storage.

GIF demo: Accessibility

• The Box of Shadows is keyboard-navigable.

• For keyboard navigation, the inset checkbox can be checked or unchecked by pressing the space key.

There are a number of areas of improvement for The Box of Shadows:

• Option for box shadow opacity.

• Option for multiple box shadow layers.

• Option to copy CSS lines for body or box color properties.

• Custom shadow values persisting on refresh, and persisting between light and dark modes.

• Maintain automatic contrast and legibility for text, buttons, and slider ranges when box color is changed.

• Cloudinary

• Clipboard.js

• Adobe Fonts

• JavaScript30

• Adobe Photoshop

• Box Shadow Generator

• Update CSS Variables with JS

• Design A CSS Box Shadow Generator

• The simplest CSS variable dark mode theme

• Stack Overflow: Styling input[type="color"]

• Styling Cross-Browser Compatible Range Inputs with CSS

• What is the difference between CSS variables and preprocessor variables?

• My blog on how I created my Github READMEs

• © Box of Shadows. All Rights Reserved.

• Project and README assets are copyright of © Emmanuel Jose. All Rights Reserved.