CSS Tricks

 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.

<input type = "checkbox">

<input type = "radio">

<input type = "range">

CSS

input[type="checkbox"]{
   accent-color:lime;
}

input[type="radio"]{
   accent-color:red;
}

input[type="range"]{
   accent-color:blue;
}

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.

<div class = "container">

   <h1 class="text-cutout">CSS Tricks</h1>

</div>

CSS

.container{

   background-image: url("https://cutt.ly/nNnH6GG");

}

.text-cutout{

  background-color:#f1f1f1;

  border-radius:8px;

  padding:2rem 5rem;

  mix-blend-mode:screen;

}

3) 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.

<img class="image1" src="fish.png">

<img class="image2" src="fish.png">

CSS

.image1{

   box-shadow:5px 5px 5px #808080;

}

.image2{

   filter: drop-shadow(5px 5px 5px #808080);

}

Reference post