Wouldn't you agree it's very hard to find a more flexible and powerful CSS framework than Bootstrap? It seems like with each update the framework just keeps getting better.
In this post, I'm going to show you how to use the Bootstrap v5 utility class to add shadows.
We will finish by customizing the Bootstrap shadow effects with 5 custom shadow-based effects that are not included in Bootstrap itself.
Bootstrap uses a custom shadow CSS class, which is used to apply a shadow to an element. The main reason for using these classes is that they are more lightweight. You can modify its size by adding -lg or -sm suffix to the class name.
Shadows have been a part of web design for a long time, but they're not always used correctly. In fact, it's often times better to avoid them altogether.
The first rule of thumb: if you can get away without using shadows, do so. If you don't need them because your design is straightforward and simple, they are unnecessary and can detract from your overall experience.
However, there are certain situations where shadows can really make a design pop. When used effectively, they can turn an ordinary interface into something memorable and exciting for visitors to your site.
Shadows are a great way to add depth and realism to your designs. They can be used to create the illusion of 3D objects or they can simply be used as visual enhancements.
You can also use shadows in Web design to highlight certain elements on the page, such as buttons or text.
If you're looking for ways to get started with shadows in your own designs, here are some ideas:
Use them as a tool for depth.
Make them subtle.
Keep them consistent.
Consider the shape of your element before adding shadows.
There are three main situations when shadows should be avoided:
If they don't fit the design - If your site has a very modern design then it's probably best not to use a shadow as this will clash with the overall feel of the website. If your site has a more traditional look then you'll probably want to avoid using shadows as well.
If they're too big - Shapes with large shadows can cause problems for people with poor vision or those who may be colorblind. This is because most people associate larger shapes with things that are closer to them than smaller ones. So if your shape is large enough to cast a shadow on something else then it will appear to be closer than it actually is which can confuse some users.
If they're too small - If your shape doesn't have enough contrast between its edges and background then it can become difficult for users to see where one ends and another begins.
If you liked this snippet, you might also enjoy exploring Bootstrap Carousel with Quotes or jQuery add rows to table .