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

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...

JavaScript Text Animation

Download Source Code From Here: Click To Download

Login Form With Animated Placeholders 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" > < title >Login</ title > </ head > <style> * { margin: 0 ; padding: 0 ; font-family: Century Gothic; box-sizing: border-box ; } body { height: 100 vh ; display: flex ; align-items: center ; justify-content: center ; flex-direction: column ; background: -webkit-linear-gradient ( right , #7579ff , #b224ef ); } .parent h2 { ...

Code Incredible

Search This Blog