3.4K
CSS Glassmorphism Working Calculator
CSS glassmorphism is a design technique that involves using a combination of CSS (Cascading Style Sheets) and HTML (Hypertext Markup Language) to create a visual effect that simulates the appearance of glass or transparent materials. In this article, I am going to show you how we create a CSS Glassmorphism working calculator. Just you have to follow some easy steps to create CSS Glassmorphism Working Calculator.
To create a glassmorphism effect using CSS, designers can use a variety of techniques, including:
- Transitions and animations: By applying transitions and animations to elements, designers can create a subtle, smooth change in the appearance of a website as a user interacts with it.
- Blur filters: By applying blur filters to elements, designers can create the appearance of a transparent or frosted glass effect.
- Opacity: By adjusting the opacity of elements, designers can create the appearance of a transparent or translucent effect.
- Gradients: By using gradients, designers can create the appearance of a transparent or frosted glass effect, as well as create a sense of depth and dimensionality.
CSS glassmorphism is a popular design trend that is often used to create a modern, sleek, and visually appealing user interface. It can be used in a variety of contexts, including web design, app design, and user interface design
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Glassmorphism Working Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" data-tilt data-tilt-full-page-listening data-tilt-axis="x">
<form class="calculator" name="calc">
<input type="text" readonly class="value" name="txt"/>
<span class="num clear" onclick="calc.txt.value = ''">c</span>
<span class="num" onclick="document.calc.txt.value += '/'">/</span>
<span class="num" onclick="document.calc.txt.value += '*'">*</span>
<span class="num" onclick="document.calc.txt.value += '7'">7</span>
<span class="num" onclick="document.calc.txt.value += '8'">8</span>
<span class="num" onclick="document.calc.txt.value += '9'">9</span>
<span class="num" onclick="document.calc.txt.value += '-'">-</span>
<span class="num" onclick="document.calc.txt.value += '4'">4</span>
<span class="num" onclick="document.calc.txt.value += '5'">5</span>
<span class="num" onclick="document.calc.txt.value += '6'">6</span>
<span class="num plus" onclick="document.calc.txt.value += '+'">+</span>
<span class="num" onclick="document.calc.txt.value += '1'">1</span>
<span class="num" onclick="document.calc.txt.value += '2'">2</span>
<span class="num" onclick="document.calc.txt.value += '3'">3</span>
<span class="num" onclick="document.calc.txt.value += '0'">0</span>
<span class="num" onclick="document.calc.txt.value += '00'">00</span>
<span class="num" onclick="document.calc.txt.value += '.'">.</span>
<span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
</form>
</div>
</body>
</html>
CSS
* {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031323;
}
.container {
position: relative;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
backdrop-filter: blur(15px);
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.container .calculator {
position: relative;
display: grid;
}
.container .calculator .value {
grid-column: span 4;
height: 140px;
width: 360px;
text-align: right;
border: none;
outline: none;
padding: 10px;
font-size: 40px;
background: transparent;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.container .calculator span {
display: grid;
align-items: center;
justify-items: center;
height: 75px;
width: 90px;
color: #fff;
font-weight: 400;
cursor: pointer;
font-size: 20px;
user-select: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.05);
transition: 0.5s;
}
.container .calculator span:hover {
transition: 0s;
background: rgba(255, 255, 255, 0.05);
}
.container .calculator span:active {
background: #14ff47;
color: #192f00;
font-size: 24px;
font-weight: 500;
}
.container .calculator .clear {
grid-column: span 2;
width: 180px;
background: rgba(255, 255, 255, 0.05);
}
.container .calculator .plus {
grid-row: span 2;
height: 150px;
}
.equal {
background: rgba(255, 255, 255, 0.05);
}
@media (max-width: 768px) {
body::before {
max-width: 75vw;
max-height: 75vh;
}
}
For More Tutorials Please Click Here
