I made some spooky Halloween eyes using CSS.
I started out similar to other posts with an outer frame around a centered subject. You can see the frame in B2EMO and the Halloween House Party. In this project I removed the border so you don't see the frame just the subjects which are the eyes.
<div class="flex-container">
<div class="main">
<div class="outer_frame">
<div class="subject">
<div class="eyeball">
</div>
</div>
<div class="subject">
<div class="eyeball">
</div>
</div>
</div>
</div>
.flex-container > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%;
background: var(--Black);
justify-content: center;
align-items: center;
position: relative;
}
.main {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.outer_frame {
width: 900px;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background-color: #18321f;
}
.subject {
display: flex;
justify-content: center;
overflow: visible;
flex-direction: column;
}
Eyes are spheres
The eyeballs start out as black squares with border-radius: 50% which turns the squares to circles. Inside the eyeballs are eyecolor and inside those are pupils. All are squares shaped into circles.
To give them a 3d effect drop-shadows and box shadows are added.
<div class="subject">
<div class="eyeball">
<div class="eyecolor">
<div class="pupil">
</div>
</div>
</div>
</div>
<div class="subject">
<div class="eyeball">
<div class="eyecolor">
<div class="pupil">
</div>
</div>
</div>
</div>
.eyeball {
height: 275px;
width: 275px;
border-radius: 50%;
background-color: var(--Black);
display: flex;
justify-content: center;
overflow: hidden;
filter: drop-shadow(0 0 0.75rem black);
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
}
.eyecolor {
height: 175px;
width: 175px;
border-radius: 50%;
margin-top: 44px;
background-color: #103c21;
justify-content: center;
overflow: hidden;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
filter: drop-shadow(0 0 1.5rem white);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
}
The box-shadow: inset -25px -25px 40px rgba(0,0,0,.5) added to give an edge to the eye color this helps the 3d effect. But adding a linear-gradient makes them pop off the screen. It added some highlighting.
Review
This was fun. I wanted to make something with more depth than previous art projects. I played around with spheres till I figured I could make some spooky eyes.
Have you ever made CSS art? Share links in the comments.
-$JarvisScript git push
Follow me here and on twitter.
Top comments (0)