Coolest CSS Tricks That You Should Know

CSS stands for Cascading Style Sheets, a front-end computer language used for styling HTML elements.

At this time there are plenty of pre-made components and styling libraries for front-end development, but we believe that every web developer should know at least the basics of CSS.

Today we are going to share with you the 5 coolest CSS tricks that will amaze you and help you in your development.

?1.???Custom input colour using the accent-colour property.

You can use the CSS property accent-colour to change the colour of your input element, and yes you can use input[type=”inputType”] for selecting a specific input element based on its type.

?Code:

2.??Text cut-out using the mix-blend-mode property.

?You can use the mix-blend-mode CSS property to cut out your text which gives your text a transparent look.

?Code:

Result:

3.???Custom list marker using:: Marker pseudo-element.

?You can use ::marker pseudo-element to use a custom list marker for your list.

? Code:?

Result:

4.???Custom cursor colour on input using caret-color.

?Do you know that you can change the cursor colour on the input element using the caret-color CSS property?

? Code:?

Result:

5.???Shadow effect for PNG images.

?You might know that we can use the box-shadow property to give a shadow effect to any element, but when we use it on some image element which contains a transparent PNG image then sometimes you might want a different result than what box-shadow gives you. You can use the drop shadow CSS property to get a shadow effect on a PNG image.

? Code:

Result:

By: Vishal Gupta (React Developer)