Using Shadows Instead of Borders
jakub.kr · 224 words · saved by 2 readers
Using shadows instead of borders in light mode
Instead of using a border in light mode, I often prefer a subtle box-shadow that adds more depth to the element. The specific shadow in this example is actually composed of three different shadows. border-shadow .border-shadow { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04); } For the hover state, it is the same box-shadow just slightly darker. To transition between the shadows, we can add box-shadow to the transition property, like this: transition-shadow. border-shadow-hover .border-shadow { box-shadow: 0px…
saved by
related reading
- Details That Make Interfaces Feel Betterjakub.kr
- 37 Easy Ways to Spice Up Your UI Designs – Learn UI Designlearnui.design
- Smooth Shadow Pluginshadow.floriankiem.com
- Visual design techniquesanthonyhobday.com
- Visual design rules you can safely follow every timeanthonyhobday.com
- Drop shadow tips | uxtoastuxtoast.com
- Every blend mode explained · Sketch Blogsketch.com
- Transitions.dev — Essential transitions for web appstransitions.dev
- Creating Daylight | The Shadows | Blogbasement.studio
- Lights and Shadows – Bartosz Ciechanowskiciechanow.ski
- Details That Make Interfaces Feel Betterinterfaces.dev
- Transitionsanimations.dev