Hover Effect box shadow 25
BUTTON or BOX Shadow code we write this code in our hover effect and in other things box-shadow : rgba ( 50 , 50 , 93 , 0.25 ) 0px 30px 60px -12px inset , rgba ( 0 , 0 , 0 , 0.3 ) 0px 18px 36px -18px inset ;
Posts
Hamburger Menu Code
Index.html Code <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Humburger Menu </ title > < link rel = "stylesheet" href = "./style.css" > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" integrity = "sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin = "anonymous" /> </ head > < body > < nav > < div class = "logo" >< h1 > Deltaty </ h1 ></ div > < div class = "openMenu" >< i class = "fa fa-bars" ></ i ></ div > < ul class = "mainMenu" > ...
Grid Latest Tutorial Code
<! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document </ title > < style > * { box-sizing : border-box ; margin : 0px ; padding : 0px ; } .container { display : grid ; /* grid-template-columns: 250px 250px 250px; grid-template-rows: 250px 250px 250px; */ grid-template-columns : 1fr 1fr 1fr ; grid-template-rows : 100px 1fr 100px ; ...
Text Underline Hover After Affect
Copy Paste than change class name .pak2 { width : max-content ; font-size : 16px ; position : relative ; cursor : pointer ; font-family : Arial , Helvetica , sans-serif ; color : #3D626C ; font-weight : 600 ; /* margin: 100px auto; */ } .pak2::after { content : "" ; position : absolute ; bottom : -5px ; height : 2px ; width : 100% ; left : 0 ; background : #3D626C ; transition : 0.3s ; transition-timing-function : ease-in-out ; transform : scaleX ( 0 ); } .pak2:hover::after { transform : scale ( 1 ); }
After Before in Html Css
<! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document </ title > < link rel = "stylesheet" href = "AfterBefore.css" > </ head > < body > < div class = "slideleft" > < p > Slide From Left </ p > </ div > < div class = "slideright" > < p > Slide From right </ p > </ div > < div class = "slidetop" > < p > Slide From top </ p > </ div > < div class = "slidebottom" > < p > Slide From bottom </ p > </ div > < div class = ...
Bootstrap Different Colors
< div class=" text-bg-primary p-3 ">Primary with contrasting color</ div > < div class=" text-bg-secondary p-3 ">Secondary with contrasting color</ div > < div class=" text-bg-success p-3 ">Success with contrasting color</ div > < div class=" text-bg-danger p-3 ">Danger with contrasting color</ div > < div class=" text-bg-warning p-3 ">Warning with contrasting color</ div > < div class=" text-bg-info p-3 ">Info with contrasting color</ div > < div class=" text-bg-light p-3 ">Light with contrasting color</ div > < div class=" text-bg-dark p-3 ">Dark with contrasting color</ div >