In this video, we will create an awesome text effect CSS only. This video on how to clip image on text using -webkit-background-clip. For a preview click on Demo If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files. Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇 HTML <! 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" > < title >How to clip image on text</ title > <!-- style.css --> < link rel = "stylesheet" href = "style.css" > </ head > < body >
In this video, we will create a complete working calculator using HTML, CSS & JavaScript with a glass morphism effect.
A mini JavaScript project for beginners that can help you to build this easily.
If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files.
Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glass Morphism Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<form name="calc">
<input type="text" name="txt" placeholder="0">
<div class="numbers">
<div class="calCol">
<span class="btn" onclick="document.calc.txt.value =''">C</span>
<span class="btn" onclick="document.calc.txt.value +='7'">7</span>
<span class="btn" onclick="document.calc.txt.value +='4'">4</span>
<span class="btn" onclick="document.calc.txt.value +='1'">1</span>
<span class="btn" onclick="document.calc.txt.value +='0'">0</span>
</div>
<div class="calCol">
<span class="btn" onclick="document.calc.txt.value +='/'">/</span>
<span class="btn" onclick="document.calc.txt.value +='8'">8</span>
<span class="btn" onclick="document.calc.txt.value +='5'">5</span>
<span class="btn" onclick="document.calc.txt.value +='2'">2</span>
<span class="btn" onclick="document.calc.txt.value +='00'">00</span>
</div>
<div class="calCol">
<span class="btn" onclick="document.calc.txt.value +='*'">X</span>
<span class="btn" onclick="document.calc.txt.value +='9'">9</span>
<span class="btn" onclick="document.calc.txt.value +='6'">6</span>
<span class="btn" onclick="document.calc.txt.value +='3'">3</span>
<span class="btn" onclick="document.calc.txt.value +='.'">.</span>
</div>
<div class="calCol">
<span class="btn" onclick="document.calc.txt.value +='-'">-</span>
<span class="btn" onclick="document.calc.txt.value +='+'">+</span>
<span class="btn" onclick="document.calc.txt.value +='%'">%</span>
<span class="resultBtn" onclick="document.calc.txt.value=eval(calc.txt.value)">=</span>
</div>
</div>
</form>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
font-family: 'Lexend Mega', sans-serif;
user-select: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #010129;
}
body::before {
content: '';
position: absolute;
z-index: 1;
top: 12%;
left: 52%;
width: 200px;
height: 200px;
background: linear-gradient(45deg, #010129, #115b94);
border-radius: 50%;
}
body::after {
content: '';
position: absolute;
z-index: 1;
top: 60%;
left: 35%;
width: 200px;
height: 200px;
background: linear-gradient(45deg, #eb6c6c, #810438);
border-radius: 50%;
}
.wrapper {
width: 300px;
min-height: 400px;
backdrop-filter: blur(20px);
background-color: #fff1;
box-shadow: 20px 20px 50px #00000080;
border: 2px solid #fff3;
overflow: hidden;
z-index: 2;
}
input {
width: 100%;
height: 100px;
background-color: #fff7;
font-size: 2.5em;
font-weight: 600;
color: #115b94;
padding: 0 15px;
text-align: right;
}
input::placeholder {
color: #115b94;
}
form {
display: flex;
flex-direction: column;
}
.numbers {
display: flex;
justify-content: space-between;
}
.calCol {
display: grid;
grid-gap: 5px;
}
.calCol .btn,
.calCol .resultBtn {
width: 70px;
height: 70px;
color: #fff;
background-color: #fff1;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
cursor: pointer;
position: relative;
overflow: hidden;
}
.calCol .resultBtn {
height: 145px;
}
.calCol .btn::before,
.calCol .resultBtn::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: #fff5;
}
.calCol .btn:active:before,
.calCol .resultBtn:active:before {
animation: animate 1s linear;
}
@keyframes animate {
0% {
transform: scale(0.6);
opacity: 0.6;
border-radius: 50%;
}
100% {
transform: scale(4.5);
opacity: 1;
border-radius: 0;
}
}
Subscribe to me on YouTube
Like & Comment on my video on YouTube & press the bell icon to get notification first.
Follow me on Instagram
Comment down any query if you have.
Comments
Post a Comment
If you have any doubts please let me know.