3 CSS Features You Should Know

1. MULTIPLE BORDERS
There are times when we want to style our containers with different borders and multiple borders. But when it comes to applying multiple borders in CSS, developers usually end up having way too much useless extra elements.

There are two great solutions in my knowledge to apply multiple borders without polluting your markup code.

box-shadow solution: You must have used the box-shadow property to create shadows. However, there is a parameter knows as spread radius (a fourth parameter), which makes the shadow large or small by the amount we specify. And a positive spread radius combined with zero offset and zero blur creates a shadow that looks exactly like a solid border.

“Note: The reason why box-shadow is a good option to apply multiple borders is that we can simply add more borders by adding them in the same box-shadow property.”

For example

outline solution: In case we need only two borders, using a regular border with the outline property for the outer one will do the job. This method provides us more flexibility as we can customize our border style ( we can use a dashed border for the second border). Also, we can control their distance from the boundaries of the element via the outline-offset property.

2. FLEXIBLE ELLIPSES
You must have face the issue while applying the border-radius to a square element with a large border radius that can turn into a circle. I have personally faced this problem a lot of times and here is a quick solution.

Slashes: A very lesser know fact is that border-radius accepts different horizontal and vertical radius & if you use a slash to separate the two, then it allows us to create elliptical rounding at the corners.

Percentage: Even though we can use px and other CSS units to define our border-radius property, it also accepts percentage which solves our problem of calculating how many pixels to enter in the property.

For example, if we have an element with the dimensions of 300px X 200px, we can easily turn that into an ellipse with a radius equal to half of its width and height.

3. COLOR TINTING
A very known effect to give a visual unity to a group of photos, where the effects are applied statically and removed on hover or some other interaction. Most of the time developers create two different versions of the image and use some simple CSS which takes care of swapping them. This approach is not recommended as it adds up more bloat and extra HTTP requests.

With CSS we can easily achieve this effect with a few lines of code.

Using Filters: You have to simply apply the filter property to your image and choose the saturation that you want.

For example, we can use the sepia() filter which gives the image a desaturated orange-yellow tint, and change the saturation with saturate() filter to increase the saturation of every pixel. And at last, we can apply CSS transition to get our final results wherever a hover interaction is initiated by the user.

Thank you for reading this! I hope this article (3 CSS Features You Should Know) was useful to you! Good luck and have a nice day, I will be happy to receive your feedback in the comments)