Friday, June 23, 2023

Helpful Tools for Web-Developer on internet

Small Dev Tools

Free tools for devs like HTML/CSS/Javascript formatters, minifies, fake or test data generators, and many more.

https://smalldev.tools/


Code Snippets

Create and share beautiful images of your source code. Start typing or drop a file into the text area to get started.

https://carbon.now.sh


Code Converter

It's a useful tool where you can write and convert code from one programming language to another language.

https://ide.onelang.io


Tuesday, June 13, 2023

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






Friday, June 9, 2023

Dropdown Menu with Checkbox