The Code Breaker

Text Grow And Shrink Animation

2022-02-19T22:30:00.024-08:00

Learn how to create Text Grow And Shrink using only using only HTML and CSS.

Watch the tutorial video here-

The VS Code extensions used in this video are Live Server, Bracket Pair Colorizer, and Prettier.

HTML Source Code-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="text animation.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <span class="text1">Welcome to</span>
        <span class="text2">The Code Breaker</span>
    </div>
</body>
</html>

Download HTML source file

CSS Source Code-

*{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    background: #000;
}

.container{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 100%;
}

.container span{
    display: block;
    text-transform: uppercase;
    animation: text 3s infinite;
}

.text1{
    color: white;
    font-size: 75px;
    font-weight: bold;
    margin-bottom: 10px;
}

.text2{
    font-size: 40px;
    color: #ff4540;
}

@keyframes text {
    0%{
        color: transparent;
        letter-spacing: -28px;
    }
    50%{
        letter-spacing: 14px;
    }
    100%{
        letter-spacing: 2px;
    }
}

Download CSS source file

Neon Light Button Effect

2021-06-18T04:51:00.007-07:00

Learn how to create Neon Light Button Effect On Hover using only using only HTML and CSS.

Watch the tutorial video here-

The VS Code extensions used in this video are Live Server, Bracket Pair Colorizer, and Prettier.

HTML Source Code-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <button class="btn" id="btn1">Hover Me</button>
        <button class="btn" id="btn2">Hover Me</button>
        <button class="btn" id="btn3">Hover Me</button>
        <button class="btn" id="btn4">Hover Me</button>
    </div>
</body>
</html>

Download HTML source file

CSS Source Code-

body{
    margin: 0;
    padding: 0;
    background-color: #000000;
}

.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid;
    padding: 40px;
    border-radius: 40px;
    text-align: center;
    border-color: #00ff00 #ffff00 #ff0000 #00ffff;
}

.btn{
    width: 240px;
    border-radius: 100px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 26px;
    background-color: #000000;
    padding: 22px;
    margin: 22px;
    cursor: pointer;
    transition: 0.5s;
    font-weight: 400;
    text-transform: uppercase;
}

.btn:hover{
    transform: scale(1.1);
}

#btn1{
    color: #ff0000;
    border: 4px solid #ff0000;
}
#btn2{
    color: #ffff00;
    border: 4px solid #ffff00;
}
#btn3{
    color: #00ff00;
    border: 4px solid #00ff00;
}
#btn4{
    color: #00ffff;
    border: 4px solid #00ffff;
}

#btn1:hover{
    box-shadow: 0 5px 40px 0 #ff0000 inset, 0 5px 40px 0 #ff0000,
                0 5px 40px 0 #ff0000 inset, 0 5px 40px 0 #ff0000;
}
#btn2:hover{
    box-shadow: 0 5px 40px 0 #ffff00 inset, 0 5px 40px 0 #ffff00,
                0 5px 40px 0 #ffff00 inset, 0 5px 40px 0 #ffff00;
}
#btn3:hover{
    box-shadow: 0 5px 40px 0 #00ff00 inset, 0 5px 40px 0 #00ff00,
                0 5px 40px 0 #00ff00 inset, 0 5px 40px 0 #00ff00;
}
#btn4:hover{
    box-shadow: 0 5px 40px 0 #00ffff inset, 0 5px 40px 0 #00ffff,
                0 5px 40px 0 #00ffff inset, 0 5px 40px 0 #00ffff;
}

Download CSS source file

Awesome CSS Animation

2021-02-26T08:20:00.005-08:00

Learn how to create Color, Shape, and Position changing Animation using only HTML and CSS.

Watch the animation tutorial video here-

The VS Code extensions used in this video are Live Server, Bracket Pair Colorizer, and Prettier.

HTML Source Code-

<!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>Document</title>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Download HTML source file

CSS Source Code-

body{
    background-color: #333;
}
.box{
    height: 150px;
    width: 150px;
    position: relative;
    animation-name: shifting;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes shifting{
    0%{background-color:red; left:25vw; top:25vh; border-radius:0;}
    25%{background-color:orange; left:60vw; top:25vh; border-radius:50%;}
    50%{background-color:yellow; left:60vw; top:60vh; border-radius: 0;}
    75%{background-color:green; left:25vw; top:60vh; border-radius: 50%;}
    100%{background-color:red; left:25vw; top:25vh; border-radius:0;}
}

Download CSS source file

Bouncing Ball Animation Tutorial

2021-02-10T07:12:00.006-08:00

Bouncing Ball Animation gif

Learn how to create Bouncing Ball Animation using only HTML and CSS.

Watch the Bouncing Ball animation tutorial video here-

The VS Code extensions used in this video are Live Server and Prettier.

HTML Source Code-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bouncing ball effect</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="box">
        <div class="ball"></div>
    </div>
</body>
</html>

Download HTML source file

CSS Source Code-

*{
    padding:0px;
    margin: 0px;
    background-color: rgb(65, 65, 65);
}

.box{
    position: absolute;
    width: 400px;
    height: 500px;
    background-color: rgb(110, 218, 110);
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.ball{
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(to right, rgb(235, 110, 172),rgb(235, 35, 62));
    margin: auto;
    animation: bounce 1.3s infinite;
}

@keyframes bounce{
    0%{
        width: 70px;
        height: 70px;
    }
    30%{
        width: 60px;
        height: 70px;
    }
    50%{
        width: 77px;
        height: 50px;
        transform: translateY(452px);
        box-shadow: 20px 10px 10px black;
    }
    75%{
        width: 77px;
        height: 70px;
    }
    100%{
        transform: translateY(0px);
    }
}

Download CSS source file