Do borders on your web elements cause trouble when you hover over them?
Do they shift and move, leaving you frustrated and wondering how to avoid this problem?
Well, the solution is here!
In this post, we’ll show you how to use shadows instead of borders to make your web design look stunning without messing up your layout.
How Shadows Can Help?
Shadows are not only useful for creating realistic depth and contrast, but they can also act as borders without taking up any space. This means you can add or remove them without affecting the position or size of your elements.
Customizing Shadows:
When you add a shadow to an element, you have options to customize it.
You can adjust the Boxshadow Color, Shadow Style, Blur Radius, Spread Radius, Horizontal Offset, and Vertical Offset to create distinct kinds of borders with shadows.
Examples:
Here are some examples of how you can use shadows to create different types of borders:
One common use case for interactive borders is to change their appearance when the user hovers over an element. For example, you may want to make the border thicker or change its color when you hover over a button.
Using shadows instead of borders can make your web design look awesome without causing any trouble. With some customization, you can create different kinds of borders with shadows, and even make them interactive! So, say goodbye to border woes and try out shadows for your web design today!
Cool unique approach! Couldn’t you also start with the desired width border that’s transparent or button color matched then change color on hover for same result?
This is a problem if you use fixed width or max width. If you use fit width to content on a group like this, and use padding for the spacing around the elements, and then use margin or space between elements, then you can use border without your content collapsing.
To be precise, what you’re noticing is that borders take up a width on the canvas. They are not positioned absolutely or relative to an element on the page. Using a fixed width, you’re not allowing the element to grow as it needs and so you see content collapsing!
But yes if you really want to use a defined width, this is a solution.
This concept was actually inspired by the IBM Carbon Design System, which utilized this technique to ensure that the distances between elements in their design were consistently up to par with their pixel-perfect standards.
I know this is a bit old, but thought i would add something… if anyone is struggling to do the same principle but on hover (e.g 2px Solid border) you first have to set this up the same way but make the colour of the inset the same as the background, then when ‘on hover’ change the spread radius colour to whatever you want on hover or it wont do what you want.
or it wont do what you want.