CSS - Neumorphism
<!DOCTYPE html>
<html>
<head>
<!--You can go to "neumorphism.io" to customize your own neumorphism-->
<style type="text/css">
body{
background-color: #dde1e7;
}
.container1{
width:99vw;
height:95vh;
background-color: #dde1e7;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
}
.morph1{
width:100px;
height: 100px;
background-color: #dde1e7;
border-radius:10px;
box-shadow:-6px -6px 5px #ffffff73,5px 5px 10px rgba(94,104,121,.4);
}
.morph2{
width:100px;
height: 100px;
margin:40px;
background-color: #dde1e7;
border-radius:10px;
box-shadow:inset 7px 7px 7px rgba(94,104,121,.288),inset -8px -8px 7px #ffffff73;
}
.morph3{
width:100px;
height:100px;
display:flex;
margin:40px;
justify-content: center;
align-items: center;
background:#dde1e7;
border-radius:50%;
box-shadow:-5px -5px 7px #ffffff73,6px 6px 15px rgba(94,104,121,.4);
}
.morph3:after{
content: '';
display:block;
background-color:#dde1e7;
width:80%; /*80px*/
height:80%; /*80px*/
border-radius:50%;
box-shadow:inset 6px 6px 15px rgba(94,104,121,.288),inset -5px -5px 7px #ffffff73;
}
.morph3:hover:after{
transform: scale(1.3);
}
.morph4{
width:100px;
height:100px;
display:flex;
justify-content: center;
align-items: center;
background:linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
animation: load .5s linear infinite;
border-radius:50%;
box-shadow:-5px -5px 7px #ffffff73,6px 6px 15px rgba(94,104,121,.4);
}
@keyframes load{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.morph4:after{
content: '';
display:block;
background-color:#dde1e7;
width:80%; /*80px*/
height:80%; /*80px*/
border-radius:50%;
box-shadow:inset 6px 6px 15px rgba(94,104,121,.288),inset -5px -5px 7px #ffffff73;
}
.morph4:hover:after{
transform: scale(0.8);
}
</style>
<title></title>
</head>
<body>
<div class="container1">
<div class="morph1"></div>
<div class="morph2"></div>
<div class="morph3"></div>
<h2>This is for fun :</h2>
<div class="morph4"></div>
</div>
</body>
</html>
Comments
Post a Comment