Shadow realm in HTML? Send CSS there.

I spent a bit more time on CSS this week and revisited some tricks on shadow effects. That prompted me to think maybe there can be a theme for each of these weekly posts. Shadow DOM is added to complete this week's theme, alongside with optimising what Webpack watches in shadow (too much of a stretch but I'll go with it).

• CSS: use multiple layers of box-shadow to finetune shadows.
• CSS: use the drop-shadow() filter to create shadow that conforms the shape of an image.
• Shadow DOM: it is a hidden, isolated tree attaches to regular DOM, the CSS within this tree is scoped to the realm itself.
• Webpack: If watch mode takes up too much resources on your computer, try optimise it with watchOption.ignored, e.g. ignore node_modules.
• Tabs: NN/g has guidelines for tabs, the most important one is that they should be used for views within the same context instead used for navigating to another different context.

Thank you for reading and do let me know your thoughts about this post. If you want more content like this to be delivered to you, consider subscribing via Substack: smallpotatodev.substack.com

Related Links

• MDN - box-shadow: developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
• MDN - drop-shadow(): developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
• Google Developers - Shadow DOM: developers.google.com/web/fundamentals/web-components/shadowdom
• Webpack - WatchOptions: webpack.js.org/configuration/watch
• Nielsen Norman Group - Tabs, Used Right: nngroup.com/articles/tabs-used-right/