Skip to main content

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: 100px;
    -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #ffffff);
}

Comments

Post a Comment

Popular posts from this blog

Amazing 404 Error Page Using HTML & CSS

  Video: Source Code: <! DOCTYPE   html > < html   lang = "en" > < head >     < meta   charset = "UTF-8" >     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >     < meta   http-equiv = "X-UA-Compatible"   content = "ie=edge" >     < title >Error! 404</ title > </ head > <style> * {     margin:  0 ;     padding:  0 ;     font-family: Nunito;     box-sizing:  border-box ; } body {     background:  linear-gradient (to  right ,  #48dbfb ,  #1dd1a1 );     display:  flex ;     align-items:  center ;     justify-content:  center ;     min-heigh...
Post a Comment
Read more

Pure CSS Hamburger Menu | Side Bar Menu

Video:  Source Code: HTML <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < meta   http-equiv = "X-UA-Compatible"   content = "ie=edge" >      < link   rel = "stylesheet"   href = "style.css" >      < title > Hamburger Menu </ title > </ head > < body >      < input   type = "checkbox"   name = ""   id = "check" >      < label   class = "ham_menu"   for = "check" > &#9776; </ label >      < div   class = "main" >          < label   for = "check" > &times; </ label ...
1 comment
Read more

UI Card Design Using Only HTML and CSS

\ <! DOCTYPE   html > < html   lang = "en" > < head >     < meta   charset = "UTF-8" >     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >     < meta   http-equiv = "X-UA-Compatible"   content = "ie=edge" >     < title >UI CARD DESIGN</ title >     < link   rel = "stylesheet"   href = "style.css" > </ head > < body >     < div   class = "box" >         < div   class = "text" >             < h2 >Gaming Mouse</ h2 >             < p >Lorem ipsum dolor sit amet consectetur adipisicing...
Post a Comment
Read more