Always the second fiddle, Luigi deserves some love. Inspired by this great dribble illustration, check out how I recreated Luigi in CSS below using a series of ovals.
This was originally published on codinhood.com
Luigi's Hat CSS
Stripping away all the details on the hat, you end up with what is essentially a fat egg shape that is thicker on the bottom. We can create this shape in CSS by providing 8 values to the border-radius property, which allows us to customize the height and width of each corner's border-radius. Check out the W3C spec on border-radius to learn more about this technique.
<div class="Luigi">
<div class="Luigi__hat"></div>
</div>
.Luigi {
height: 400px;
width: 400px;
position: relative;
}
.Luigi__hat {
margin-left: calc(50% - 125px);
height: 250px;
width: 250px;
background: #1ca42f;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: relative;
}
Luigi Hat Logo CSS
The capital "L" logo is a little more complicated than it looks, because both the stem and branch of the "L" are different sizes, thicker on one end, and rotated slightly. Getting this to look right took a few iterations and pseudo-elements.
<div class="Luigi__hat">
<div class="Luigi__logo">
<div class="Luigi__stem"></div>
<div class="Luigi__branch"></div>
</div>
</div>
.Luigi__logo {
background: white;
width: 80px;
height: 80px;
border-radius: 100%;
left: calc(50% - 40px);
top: 25px;
position: absolute;
}
.Luigi__stem {
position: absolute;
top: 8px;
left: calc(50% - 15px);
height: 45px;
width: 16px;
background: #1ca42f;
border-radius: 1px;
}
.Luigi__stem::before {
content: "";
position: absolute;
height: 2px;
width: 12px;
top: -1px;
background: white;
transform: rotate(-5deg);
}
.Luigi__stem::after {
content: "";
position: absolute;
height: 40px;
width: 5px;
top: 0px;
left: 12.33px;
background: white;
transform: rotate(3deg);
}
.Luigi__branch {
position: absolute;
top: 45px;
left: 25px;
height: 11px;
width: 33px;
background: #1ca42f;
border-radius: 1px;
}
.Luigi__branch::before {
content: "";
position: absolute;
height: 3px;
width: 20px;
top: -2px;
left: 11.5px;
background: white;
transform: rotate(-5deg);
}
Luigi's cap CSS
The cap is an oval shape with a darker inside oval to give the illusion of being "inside" the cap. The illusion won't really work until we put ahead in there, but it should overlap the white part of the logo to help give the illusion of depth on the hat.
<div class="Luigi__hat">
<div class="Luigi__logo">
<div class="Luigi__stem"></div>
<div class="Luigi__branch"></div>
</div>
<div class="Luigi__cap "></div>
</div>
.Luigi__cap {
position: absolute;
left: calc(50% - 85px);
top: 105px;
width: 170px;
height: 140px;
border-radius: 50%;
background: #025a10;
box-shadow: 0 -0.8em 0 0 #32b744;
}
Luigi's Ears CSS
Luigi's ears are ovals with specific border-radius's on either side. The side of the ear closest to the face is less rounded while the outside of the ear is more rounded. We can use the border-radius shorthand to define each corner of the oval to create this shape as shown below.
<div class="Luigi">
<div class="Luigi__ear Luigi__ear--left"></div>
<div class="Luigi__ear Luigi__ear--right"></div>
...
</div>
.Luigi__ear {
background: #f8ccb3;
width: 50px;
height: 75px;
left: 80px;
top: 200px;
position: absolute;
border-radius: 50% 40% 40% 90%;
overflow: hidden;
}
.Luigi__ear--right {
left: 270px;
border-radius: 40% 50% 90% 40%;
}
.Luigi__ear--left::after {
content: "";
height: 60px;
width: 40px;
background: #e5b69b;
position: absolute;
right: -5px;
top: 5px;
border-radius: 50% 40% 40% 90%;
}
.Luigi__ear--right::after {
content: "";
height: 60px;
width: 40px;
background: #e5b69b;
position: absolute;
left: -5px;
top: 5px;
border-radius: 40% 50% 90% 40%;
}
Luigi's Face CSS
Hopefully, at this point, you've realized that I'm probably going to use an oval with border-radius to create Luigi's face, in which case, you're absolutely right. We can create the five-o-clock shadow by adding a vertical linear-gradient that does not blend.
<div class="Luigi">
...
<div class="Luigi__face"></div>
</div>
.Luigi__face {
background-image: linear-gradient(to bottom, #f8ccb3 50%, #ecb494 50%);
height: 250px;
width: 175px;
position: absolute;
top: 115px;
left: calc(50% - 87.5px);
border-radius: 100%;
z-index: 1;
}
Luigi's Eyebrows CSS
Luigi's eyebrows are essentially fat arcs that taper off on the side very quickly. We can create this effect in CSS by first creating a regular circle in CSS:
Then creating another circle that overlaps the first circle:
Then changing the overlapping circle to match the color of the background to create the illusion of "cutting out" the original circle:
The second circle that overlaps the first is created with the ::after pseudo-element, but you could easily just create another full element.
<div class="Luigi__eyebrow"></div>
<div class="Luigi__eyebrow Luigi__eyebrow--right"></div>
.Luigi__eyebrow {
width: 40px;
height: 43px;
border-radius: 100%;
background: #2e0400;
position: absolute;
left: 37px;
top: 10px;
transform: rotate(10deg);
}
.Luigi__eyebrow::after {
content: "";
background: #f8ccb3;
position: absolute;
bottom: -10px;
left: 3px;
height: 40px;
width: 45px;
border-radius: 100%;
}
.Luigi__eyebrow--right {
left: 97px;
transform: rotate(-10deg);
}
.Luigi__eyebrow--right::after {
right: 4px;
left: auto;
}
Luigi Eyes CSS
The eyes are really just nested ovals (see a pattern yet?) with different colors at specific positions.
<div class="Luigi__eye">
<div class="Luigi__iris">
<div class="Luigi__pupil"></div>
</div>
</div>
<div class="Luigi__eye Luigi__eye--right">
<div class="Luigi__iris Luigi__iris--right ">
<div class="Luigi__pupil Luigi__pupil--right"></div>
</div>
</div>
.Luigi__eye {
background: white;
height: 70px;
width: 45px;
border-radius: 100%;
position: absolute;
left: 35px;
top: 40px;
overflow: hidden;
z-index: 2;
}
.Luigi__eye--right {
left: 95px;
}
.Luigi__iris {
width: 35px;
height: 55px;
background: #2ba7d1;
border-radius: 100%;
right: -2px;
bottom: 7px;
position: absolute;
}
.Luigi__iris--right {
left: -2px;
right: auto;
}
.Luigi__pupil {
width: 23px;
height: 40px;
background: black;
border-radius: 100%;
right: 4px;
bottom: 7px;
position: absolute;
}
.Luigi__pupil::before {
content: "";
position: absolute;
background: white;
height: 10px;
width: 10px;
border-radius: 100%;
left: 5px;
top: 5px;
}
.Luigi__pupil--right {
right: auto;
left: 4px;
}
Luigi's Nose CSS
Luigi's nose, like most other elements in this image, is an oval with slightly different border-radius values for each side. Position the nose over the eyes to create some depth as well.
<div class="Luigi">
...
<div class="Luigi__nose"></div>
...
</div>
.Luigi__nose {
width: 84px;
height: 84px;
border-radius: 50% 50% 60% 60%;
background: #f6b996;
position: absolute;
left: calc(50% - 42px);
top: 86px;
z-index: 3;
}
Luigi's Mustache CSS
We've come to the most important part of the face: the mustache. The mustache really brings the whole image together so it's important to get right. We're going to start with an oval:
Then we're going to create two more large ovals on either side of the main oval using multiple box-shadows, check out the image to see the placement.
box-shadow: -2.25em 1em 0 red, 2.25em 1em 0 blue;
The blue and red colors are just placeholders so you can distinguish the shapes better. Next, we're going to create another oval that spans across all three ovals on the top. This oval will have the same color as Luigi's skin, while the two box-shadow ovals should be changed to the color of the mustache.
The top oval will blend in with Luigi's skin on either side of his nose to give the illusion of cutting away the ovals, similar to his eyebrows. Finally, we need to place the mustache under his nose but above his chin.
<div class="Luigi__mustache"></div>
.Luigi__mustache {
position: absolute;
top: 73px;
left: calc(50% - 55px);
height: 96px;
width: 110px;
border-radius: 50%;
background: #2e0400;
box-shadow: -2.25em 1em 0 #2e0400, 2.25em 1em 0 #2e0400;
}
.Luigi__mustache::after {
content: "";
position: absolute;
top: 0em;
left: calc(50% - 85px);
height: 60px;
width: 170px;
border-radius: 50%;
background: #f8ccb3;
}
If you liked this CSS demo, you also might like Draw and Animate Bender's Face with CSS or Animate Octocat swimming with CSS.
Top comments (5)
Super creative! Thanks for sharing
Thanks, credit for the actual design should definitely go to the Dribble illustrator though dribbble.com/shots/1135988-Flat-Lu...
When I saw the headline I thought this was a new framework, so glad it's not! Awesome work really cool div art.
I'm curious as to why you decided to do this in HTML+CSS? Wouldn't SVG be simpler (and allow for easier manipulation as an object placed elsewhere, plus reusable with SVG !)
You're absolutely right, SVG would be way easier. But that's kind of the point, working within the limitations of HTML/CSS to create complicated images stretches my skill and understanding of CSS. Not 100% practical, but I certainly feel more comfortable creating interesting shapes with CSS and I kind of enjoy it as a somewhat creative outlet.