I really like drawing with CSS, and I've just finished drawing this Diglett using nothing more than CSS.
However, as good as it looks on my desktop, it isn't responsive and I don't know how to make it. I noticed this while transferring it to codepen.
.diglett {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.body {
height: 230px;
width: 200px;
background-color: #b1917e;
border-radius: 100px 100px 0 0;
border-top: 2px solid #040202;
border-right: 2px solid #040202;
border-left: 2px solid #040202;
overflow-y: hidden;
}
.head-shine {
position: relative;
left: 0px;
top: 0px;
height: 50px;
width: 140px;
color: #c9b3a4;
background-color:currentColor;
filter: blur(8px);
border-radius: 100px / 50px;
transform: rotate(160deg);
z-index: 1;
}
.head-shine2 {
position: relative;
left: -10px;
top: -250px;
height: 200px;
width: 100px;
color: #b49580;
filter: blur(10px);
border-radius: 50%;
transform: rotate(80deg);
}
.left-eye{
position: absolute;
height: 30px;
width: 8px;
border-radius: 40% 40%;
color: black;
background-color: black;
transform: rotate(5deg);
box-shadow:
inset -1px -6px 7px -2px #595a5a;
border: solid 2px black;
left: 45.4%;
top: 8%;
z-index: 2;
}
.right-eye{
position: absolute;
height: 30px;
width: 8px;
border-radius: 40% 40%;
color: black;
background-color: black;
transform: rotate(5deg);
box-shadow:
inset -1px -6px 7px -2px #595a5a;
border: solid 2px black;
left: 50%;
top: 8.2%;
z-index: 2 ;
}
.eye-shines{
position: absolute;
height: 7px;
width: 6px;
background-color: white;
border-radius: 50%;
left: 45.7%;
top: 8.2%;
box-shadow:
9.7vmin 0 0 0 white;
z-index: 8;
filter: blur(0.8px);
transform: rotate(2deg);
}
.mouth {
position: absolute;
height: 41px;
width: 77px;
background-color: #b982a2;
border-radius: 46% 46% 46% 46%;
border: 3px solid #040202;
left: 44.6%;
top: 14.5%;
z-index: 2;
}
.mouth-shine {
position: absolute;
height: 30px;
width: 60px;
background-color: #e5b6d3;
border-radius: 50%;
left: 45%;
top: 15.3%;
z-index: 3;
filter: blur(2px);
}
.mouth-shine2 {
position: absolute;
height: 9px;
width: 18px;
background-color: #f4e4f0;
border-radius: 50%;
transform: rotate(-8deg);
left: 45.8%;
top: 16.2%;
z-index: 4;
filter: blur(1.5px);
}
.soil{
position: absolute;
width: 80px;
height: 80px;
background-color: #828388;
border-radius: 50% 50% 0 0;
transform: translate(80%, -55%);
filter:
drop-shadow(0 2px black)
drop-shadow(0 -2px black)
drop-shadow(2px 0 black)
drop-shadow(-2px 0 black);
color: #828388;
box-shadow:
-6vmin 1vmin 0 -2vmin,
-12vmin 1vmin 0 -1vmin,
7vmin 1.25vmin 0 -1.75vmin,
12vmin 1.25vmin 0 -1.25vmin,
-18vmin 1.25vmin 0 -1.25vmin,
18vmin 1.25vmin 0 -1.25vmin;
z-index: 6;
} <html>
<head>
<title>Diglett</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="diglett">
<div class="body">
<div class="eyes">
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="eye-shines"></div>
</div>
<div class="head">
<div class="head-shine"></div>
<div class="head-shine2"></div>
</div>
<div class="mouth"></div>
<div class="mouth-shine"></div>
<div class="mouth-shine2"></div>
<div class="soil"></div>
</div>
</div>
</body>
</html>Full codepen: https://codepen.io/devjuanv/pen/qBjYgEB
So: 1) could u help me updating the code so it looks as intended in every viewport? and 2) could you provide at least a short explanation on what you did?
It would mean lot for my learning! Thank u!!!
This is how it looks on my desktop: 