Here's an alien made using CSS and HTML. This branched off Cody Pearce's Bender in CSS post. I followed his tutorial and made Bender them made a some LEGO minifig faces. I decided since it's Halloween why not make some creatures here's my first an Alien. It is a work in progress. I figured if I share it will motivate me to continue.
Here's the code for the eyes.
HTML
<div class="eyes_pair">
<div class="eye_socket">
<div class="eyes">
<div class="catchlight">
<div class="pupil"></div>
</div>
</div>
<div class="eyes">
<div class="catchlight">
<div class="pupil"></div>
</div>
</div>
</div>
</div>
CSS
.eyes_pair {
width: 400px;
height: 150px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.eye_socket {
width: 375px;
height: 125px;
display: flex;
justify-content: center;
}
.eyes {
height: 145px;
width: 145px;
background: white;
border-radius: 100%;
border: solid 4px black;
margin:-10px 10px 0px 10px;
display: flex;
justify-content: center;
position: relative;
}
.pupil {
width: 5px;
height: 100px;
margin-top: 5px;
background: black;
border-radius: 100%;
display: flex;
justify-content: center;
position: relative;
}
A slightly different version where I added a color gradient as a backrground-image to the skin. I trying to see if I can add some scales.
Have you ever made something cool with CSS? Share it.
-$JarvisScript git push
Top comments (0)