Skip to main content

Posts

Showing posts from August, 2020

Text Reflection Effect Using CSS3

Source Code: HTML: <! DOCTYPE   html > < html   lang = "en" > < head >     < meta   charset = "UTF-8" >     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >     < title >Awesome CSS Text Reflection</ title >     < link   rel = "stylesheet"   href = "style.css" > </ head > < body >     < h1 >Logo</ h1 > </ body > </ html > CSS: * {     margin:  0 ;     padding:  0 ;     font-family:  Century  Gothic; } body {     background:  #000 ; } h1 {     color:  #ffffff ;     position:  absolute ;     top:  50 % ;     left:  50 % ;     transform:  translate ( -50 % , -50 % );     text-transform:  uppercase ;     font-size:  100 px ;      -webkit-box-reflect :  below   1 px   linear-gradient ( transparent ,  transparent ,  #ffffff ); }

Parallax Website using HTML And CSS

VIDEO: Source Code:      Images used: HTML: <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < link   rel = "stylesheet"   href = "style.css" >      < title > Parallax Website </ title > </ head > < body >      < div   class = "bg1" >          < h1 > Parallax </ h1 >      </ div >      < div   class = "bg2" >      </ div >      < div   class = "bg3" >      </ div >      </ body > </ html > CSS: * {      margin :  0 ;      padding :  0 ;      font-family : Century Gothic; } .bg1 {      height :  100 vh ;      width :  100 % ;      background :  url ( "photo1.jpg" )no-repeat;      background-size : cover;      background-attachment : fixed; } .bg