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)