Rakesh Patel: June 2023

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.

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.

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

CSS

.image1{

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

}

.image2{

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

}

Reference post

Friday, June 9, 2023

Dropdown Menu with Checkbox

$(".chkbox-menu").on("change", "input[type='checkbox']", function() {
   $(this).closest("li").toggleClass("active", this.checked);
});

$(document).on('click', '.allow-focus', function (e) {
  e.stopPropagation();
});

</script>

<style>

.chkbox-menu li label {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;
}
.chkbox-menu li input {
    margin: 0px 5px;
    top: 2px;
    position: relative;
}

.chkbox-menu li.active label {
    background-color: #cbcbff;
    font-weight:bold;
}

.chkbox-menu li label:hover,
.chkbox-menu li label:focus {
    background-color: #f5f5f5;
}

.chkbox-menu li.active label:hover,
.chkbox-menu li.active label:focus {
    background-color: #b8b8ff;
}

</style>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="DDMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown Menu <span class="caret"></span>
  </button>
  <ul class="dropdown-menu chkbox-menu allow-focus" aria-labelledby="DDMenu">
  
    <li >
      <label>
        <input type="checkbox"> Item 1
      </label>
    </li>
    
    <li >
      <label>
        <input type="checkbox"> Item 2
      </label>
    </li>
    
    <li >
      <label>
        <input type="checkbox"> Item 3
      </label>
    </li>
    
  </ul>
</div>