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);
}
