01.
An attempt at creating gradient shadows as seen in many popular mobile and web based user interfaces
The trick here lies in duplicating a div and adding a blur filter with translate property and applying a
linear gradient fill to imitate a shadow look
02.
An attempt at creating a decode animating using css clip path property
The key trick here is to create 2 duplicate divs with same text; and adding a line height to space out
text to bring it in the circle
Then finally adding a stoke to the text and adding keyframe animation stages using transform X and setting
a linear animation with Xs duration we get this cool effect!
03.
This was a fun experiment where I wanted to try out real life reflection shine by using CSS gradients
I achieved this effect by using :before::hover to set a white gradient with transparent head and tail along
with a ease-in-out transition to achieve the effect
Hiding the overflow on the tag helps us restricting the animation to the button
04.
An attempt at creating a typerwiter esque effect using keyframes in CSS
The idea here is to make use of the steps feature in animation to get that pause and type effect
Finally using the blink cursor we overlay from 100% opacity to transparent to reveal the p tag
05.
An attempt at creating the trending Glassmorphism effect which is prevelant on 2021 modern websites
The trick here lies in using z index to place the card above the text and use the backkdrop filter
property in CSS to blur relative to the underlapping content
06.
Creating a super smooth card shadow animation by pre-rendering using opacity and after properties in CSS
The idea here is to pre render the card component by applying the transition but setting opacity to 0 and on hover set ::after opacity to 1 to achieve the effect