Glassmorphism Vs Neuromorphism Css Html Javascript
.png)
Introduction:
Welcome to our latest coding exploration video! In this episode, we delve into the intriguing world of UI design trends, specifically the captivating battle between Glassmorphism and Neuromorphism. 🎨✨
In this hands-on session, we're diving deep into the realm of frontend design with HTML, CSS, and JavaScript. But wait, there's a twist – this video is all about showing, not telling! No talking, just pure coding action. 🚀🖥️
Glassmorphism offers a sleek, transparent aesthetic, while Neuromorphism takes a more tactile and realistic approach. We'll guide you through the step-by-step process of creating both styles, from start to finish. You'll see firsthand how to manipulate elements, apply background effects, and master the art of creating visually stunning interfaces.
🔔 Stay tuned for:
- Practical coding tips for beginners and experienced developers alike.
- In-depth explanations of each design style's core principles.
- How to achieve the glassy and soft, embossed looks using CSS variables.
- Adding interactive elements with JavaScript to enhance user experience.
Whether you're an aspiring designer, a frontend enthusiast, or simply curious about the latest design trends, this video has something for you. We've made sure that every line of code, every property tweak, and every result is right here for you to absorb.
Remember to like, comment, and subscribe to our channel to stay updated with our coding journeys and frontend design explorations. Hit the notification bell so you never miss out on our latest content. Let's embark on this design venture together!
📚 Relevant resources:
- Glassmorphism and Neuromorphism guides.
- CSS, HTML, and JavaScript documentation.
- Code snippets available on our website.
Thank you for joining us on this creative coding adventure. Let's bring these design trends to life through code! 💻🎉
Html Code:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Vs Neuromorphism</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h1> VS </h1>
<div class="wrapper">
<h2>Glassmorphism</h2>
<div class="container-01">
<div class="content">
<div class="calculator">
<form class="calculator" name="calc01">
<input type="text" readonly class="value01" name="text" />
<span class="num clear" onclick="calc01.text.value = ''">c</span>
<span class="num" onclick="document.calc01.text.value +='/'">/</span>
<span class="num" onclick="document.calc01.text.value +='*'">*</span>
<span class="num" onclick="document.calc01.text.value +='7'">7</span>
<span class="num" onclick="document.calc01.text.value +='8'">8</span>
<span class="num" onclick="document.calc01.text.value +='9'">9</span>
<span class="num" onclick="document.calc01.text.value +='-'">-</span>
<span class="num" onclick="document.calc01.text.value +='4'">4</span>
<span class="num" onclick="document.calc01.text.value +='5'">5</span>
<span class="num" onclick="document.calc01.text.value +='6'">6</span>
<span class="num plus" onclick="document.calc01.text.value +='+'">+</span>
<span class="num" onclick="document.calc01.text.value +='1'">1</span>
<span class="num" onclick="document.calc01.text.value +='2'">2</span>
<span class="num" onclick="document.calc01.text.value +='3'">3</span>
<span class="num" onclick="document.calc01.text.value +='0'">0</span>
<span class="num" onclick="document.calc01.text.value +='00'">00</span>
<span class="num" onclick="document.calc01.text.value +='.'">.</span>
<span class="num equal"
onclick="document.calc01.text.value =eval(calc01.text.value)">=
</span>
</form>
</div>
</div>
<p><span>CSS Property:</span> Backdrop-Filter</p>
</div>
<h2>Neumorphism</h2>
<div class="container-02">
<div class="calculator">
<form class="calculator" name="calc">
<input type="text" class="value02" name="text" readonly="">
<span class="num clear" onclick="document.calc.text.value=''">c</span>
<span class="num" onclick="document.calc.text.value+='/'">/</span>
<span class="num" onclick="document.calc.text.value+='*'">*</span>
<span class="num" onclick="document.calc.text.value+='7'">7</span>
<span class="num" onclick="document.calc.text.value+='8'">8</span>
<span class="num" onclick="document.calc.text.value+='9'">9</span>
<span class="num" onclick="document.calc.text.value+='-'">-</span>
<span class="num" onclick="document.calc.text.value+='4'">4</span>
<span class="num" onclick="document.calc.text.value+='5'">5</span>
<span class="num" onclick="document.calc.text.value+='6'">6</span>
<span class="num plus" onclick="document.calc.text.value+='+'">+</span>
<span class="num" onclick="document.calc.text.value+='3'">3</span>
<span class="num" onclick="document.calc.text.value+='2'">2</span>
<span class="num" onclick="document.calc.text.value+='1'">1</span>
<span class="num" onclick="document.calc.text.value+='00'">00</span>
<span class="num" onclick="document.calc.text.value+='0'">0</span>
<span class="num" onclick="document.calc.text.value+='.'">.</span>
<span class="num equal" onclick="document.calc.text.value=eval(calc.text.value)">=
</span>
</form>
</div>
<p><span>CSS Property:</span> Box Shadow</p>
</div>
</div>
</section>
</body>
<script src="script.js"></script>
</html>
Css Code:
@import url('https://fonts.googleapis.com/
css2?family=Quicksand:wght@300;
400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
}
body {
min-height: 100vh;
padding: 20px;
background: #091921;
}
section {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1 {
position: relative;
font-size: 30px;
font-weight: 500;
text-align: center;
width: 100%;
padding: 10px;
margin: 10px auto 30px;
color: #fff;
}
h2 {
position: absolute;
z-index: 11;
color: #fff;
}
h2:nth-child(1) {
font-weight: 700;
background: rgba(255, 255, 255, 0.05);
text-align: center;
padding: 5px 8px;
font-size: 25px;
left: 17%;
top: -10%;
}
h2:nth-child(3) {
right: 20%;
top: -10%;
text-align: center;
font-weight: 300;
padding: 5px 8px;
font-size: 25px;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05),
0 15px 15px rgba(0, 0, 0, 0.7),
inset 0 15px 15px rgba(0, 0, 0, 0.4);
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/*First calculator*/
.wrapper .container-01 {
position: relative;
width: 50%;
min-height: 80vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #091921;
}
.wrapper .container-01::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#e91e63, #ffc187);
clip-path: circle(22% at 38% 20%);
}
.wrapper .container-01::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#ffffff, #da00ff);
clip-path: circle(22% at 78% 90%);
}
.wrapper .container-01 .content {
position: relative;
background: rgba(255, 255, 255, 0.05);
border-radius: 5px;
overflow: hidden;
z-index: 10;
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 rgba(0, 0, 0, 0.2);
}
.wrapper .container-01 .content .calculator {
position: relative;
display: grid;
}
.wrapper .container-01 .content .calculator .value01 {
grid-column: span 4;
height: 140px;
width: 300px;
text-align: right;
border: none;
outline: none;
padding: 10px;
font-size: 30px;
background: transparent;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.wrapper .container-01 .content .calculator span {
display: grid;
place-items: center;
width: 75px;
height: 75px;
color: #fff;
font-weight: 400;
cursor: pointer;
font-size: 20px;
user-select: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-left: 1px solid rgba(255, 255, 255, 0.05);
transition: 0.5s;
}
.wrapper .container-01 .content .calculator span:hover {
transition: 0px;
background: rgba(255, 255, 255, 0.05);
}
.wrapper .container-01 .content .calculator span:active {
background: #14ff47;
color: #192f00;
font-size: 24px;
font-weight: 500;
}
.wrapper .container-01 .content .calculator .clear {
grid-column: span 2;
width: 150px;
background: rgba(255, 255, 255, 0.05);
}
.wrapper .container-01 .content .calculator .plus {
grid-row: span 2;
height: 150px;
}
.wrapper .container-01 .content .calculator .equal {
background: rgba(255, 255, 255, 0.05);
}
.wrapper .container-01 p {
z-index: 12;
margin: 20px auto 10px;
position: relative;
color: #fff;
}
.wrapper .container-01 p span {
font-weight: 700;
}
/*Second Calculator*/
.wrapper .container-02 {
position: relative;
width: 50%;
min-height: 80vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.wrapper .container-02 .calculator {
padding: 25px;
position: relative;
display: grid;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05),
0 15px 15px rgba(0, 0, 0, 0.7),
inset 0 15px 15px rgba(0, 0, 0, 0.4);
border: 15px solid #091921;
}
.wrapper .container-02 .calculator .value02 {
grid-column: span 4;
height: 100px;
text-align: right;
border: none;
outline: none;
padding: 25px;
font-size: 18px;
font-weight: 700;
border: 2px solid #091921;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05),
0 15px 15px rgba(0, 0, 0, 0.7),
inset 0 15px 15px rgba(0, 0, 0, 0.4);
}
.wrapper .container-02 .calculator span {
margin: 10px;
display: grid;
width: 60px;
height: 60px;
color: #fff;
background: #0c2835;
place-items: center;
border: 1px solid #091921;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05),
0 15px 15px rgba(0, 0, 0, 0.7),
inset 0 15px 15px rgba(0, 0, 0, 0.4);
}
.wrapper .container-02 .calculator span:active {
border: none;
box-shadow: 0 -65px 65px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.03),
0 65px 65px rgba(255, 255, 255, 0.05),
inset 0 15px 15px rgba(0, 0, 0, 0.7);
}
.wrapper .container-02 .calculator span.clear {
grid-column: span 2;
width: 120px;
background: #ff3077;
}
.wrapper .container-02 .calculator span.plus {
grid-row: span 2;
height: 120px;
}
.wrapper .container-02 .calculator span.equal {
background: #03b1ff;
}
.wrapper .container-02 p {
z-index: 12;
margin: 20px auto 10px;
position: relative;
color: #fff;
}
.wrapper .container-02 p span {
font-weight: 700;
}
@media (max-width: 991px) {
h1 {
display: none;
}
h2:nth-child(1) {
left: 6%;
top: 0%;
}
h2:nth-child(3) {
left: 3%;
top: 47%;
width: 20%
}
.wrapper {
flex-direction: column;
}
.wrapper .container-02 {
margin-top: 70px;
}
}
Javascript Code:
VanillaTilt.init(document.querySelector(".content"), {
max: 15,
speed: 400,
glare: true,
"max-glare": 0.2,
});
