DEV Community

Suma
Suma

Posted on

CSS VISUAL & EFFECT STYLES

VISUAL & EFFECT STYLES

opacity : transparency level
ex : img { opacity; 0.5;}
filter: blur or brightness effects
ex : img { filter: blur(3px);}
cursor : change mouse cursor
ex : button {cursor:pointer;}

ANIMATION & TRANSITION STYLES

transition : smooth property changes
ex : div {transition:0.3s;}
transform : move,rotate,or scale
ex : div {transform : rotate(45deg);}
animation : play animation
ex : div {animation : move 2s infinite;}
@keyframes : defines animation steps
ex : @keyframes move {from {left : 0px;}
to {left:100px;}}

DISPLAY & VISIBILITY

display : none,block,inline,flex,grid
ex : p {display:none;}
visibility : hide but keep space
ex : { visibility : hidden;}
overflow : scroll,hidden,auto
ex : div { overflow : scroll;}

Top comments (0)