Rakesh Patel

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>

Friday, May 12, 2023

Push into an Array in JavaScript

let myarray = [1,2,3,4,5]

// Add to the start of an array

Array.unshift(element);

myarray.unshift(100); // output 100,1,2,3,4,5

// Add to the end of an array

Array.push(element);

myarray.push(100); // output 1,2,3,4,5,100

// Add to a specified location

Array.splice(start_position, 0, new_element...);

myarray.splice(2, 0, 100,200); // output 1,2,100,200,3,4,5

// Add with concat method without mutating original array

let newArray = [].concat(element);

let newmyarray = myarray.concat(10,20);

Monday, April 17, 2023

Image CSS property aspect-ratio, object-fit and mix-blend-mode

Three CSS properties will help you to display images

1) The aspect-ratio property maintains the aspect ratio of an element, even if its size changes.

2) Object-fit controls how an image or video is displayed within its container, allowing for versatile scaling and cropping options.

3) Mix-blend-mode creates stunning visual effects by blending the colors of overlapping elements.

These powerful techniques can elevate your website's design to the next level, impressing your visitors with visually stunning layouts.

Before

After

Monday, April 10, 2023

_sppagecontextinfo Get current user details

While using CSOM, we have mostly required some details of the current users, like, Name, Email, Title (Designation), Manager, etc., Following code, will help to know all this with simple API calls.