If you're hearing the term "Glassmorpism" for the first time, well... It only just got my attention a few hours before this post so, What is glassmorphism?
Glassmorphism is a new trend which is getting more traction on websites like Dribble, Behance etc and I've seen a couple of awesome designs made using this trendy UI.
Here We Have Call Screen Design Using HTML And CSS.
Source Code:- https://www.websitemakers.xyz/2021/05/call-phone-glass-ui-using-html-css.html
HTML Code
<section>
<div class="card">
<div class="face">
<h3>Innocent Coder</h3>
<h6>mobile</h6>
<div class="icon-content">
<div style="text-align: center;">
<i class="far fa-clock"></i>
<h5>Remind me</h5>
</div>
<div style="text-align: center;">
<i class="fas fa-comment"></i>
<h5>Message</h5>
</div>
</div>
<div class="slide-content">
<h5>Slide to answer ></h5>
</div>
</div>
</div>
</section>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body{
overflow: hidden;
color: #fff;
}
section{
display: flex;
justify-content: center;
align-items: center;
background-color: #1c1c25;
height: 100vh;
}
section::before,
.card::before{
content: '';
position: absolute;
width: 170px;
height: 170px;
background: linear-gradient(#f00, #f0f);
border-radius: 50%;
}
section::before{
top: 3%;
left: 55%;
}
.card::before{
bottom: 2%;
left: 31%;
background: linear-gradient(#0098f0, #0457d3);
}
.face{
width: 250px;
height: 485px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
background-color: rgba(255,255,255,0.05);
filter: blur(0.2px);
border-width: 0.1px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.425);
}
.slide-content{
width: 120px;
height: 15px;
padding: 12px 20px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
background-color: rgba(255,255,255,0.05);
text-align: center;
margin: 30px auto;
cursor: pointer;
}
.face h3{
font-weight: 300;
font-size: 20px;
text-align: center;
margin-top: 100px;
}
.face h6{
font-weight: 300;
font-size: 12px;
text-align: center;
letter-spacing: 1px;
}
.icon-content{
margin-top: 180px;
padding: 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.icon-content i{
font-size: 14px;
}
h5{
font-weight: 400;
font-size: 11px;
letter-spacing: 0.5px;
}
Note:- visit my youtube channel for frontend tutorials
subscribe to my youtube channel :- https://www.youtube.com/channel/UCR64vQptythbJ1SmI-ub0Rg
Resent post :-
Top comments (0)