CSS Tips

To style Social icons like 3d

• NORMAL:

filter: drop-shadow( 1px 1px 1px rgba(0,0,0,.3));
transition: all .3s ease-out;

• HOVER:

filter: drop-shadow( 2px 2px 2px rgba(0,0,0,.3));
transform: scale(1.2);

Beautiful Blue Box Shadow

box-shadow: 0 4px 24px 0 rgba(103,151,255,.1), 0 12px 64px 0 rgba(103,151,255,.1);

Sharp Text

-webkit-font-smoothing: antialiased;

Truncate Text

• MULTILINE:

height: 80px;                                   //height = line-height x no. of lines
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;                          //no. of lines you want to clip
-webkit-box-orient: vertical;

• SINGLE LINE:

width: 100px;                                   //any width you want.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Lazy Dark Mode

.dark-mode{  
    filter: invert(1) hue-rotate(180deg);
}
​
<script>
    let button = document.querySelector('.btn')
    // press the button to toggle the .dark-mode class
    button.addEventListener('click', () =>  
    document.documentElement.classList.toggle('dark-mode')
</script>

This might not work for a few elements and images. Thus to make it work, we use Javascript or Typescript to check if Dark Mode is toggled. If it is, then we apply the same above code, to all elements with .invert class. Then they will revert to their original colours.