Hey kids, today we’re going to make a hamburger with only CSS box-shadow.
The end result:
The first step is to make the first pixel. This can be any pixel you want, but for argument’s sake let’s start in the top left corner.
HTML
<div class=”hamburger”></div>CSS
.hamburger {
width: 10px;
height: 10px;
background-color: transparent;
}The “pixels” will all be 10x10 pixels.
Now let’s draw the top line. We’re going to be using multiple box-shadows.
Each comma-separated box-shadow will be another pixel. For example, to place a black pixel directly to the right of the initial pixel we would do this:
box-shadow: <pixel-width> 0 0 #000and a black pixel directly below the initial pixel would be:
box-shadow: 0 <pixel-height> 0 #000;Here’s the first line. There’s a slight offset — it starts 4 pixels in, and it’s 8 pixels wide:
.hamburger {
width: 10px;
height: 10px;
background-color: transparent;
box-shadow: 40px 0 0 #000,
50px 0 0 #000,
60px 0 0 #000,
70px 0 0 #000,
80px 0 0 #000,
90px 0 0 #000,
100px 0 0 #000
110px 0 0 #000;
}Now let’s do the second line:
.hamburger {
width: 10px;
height: 10px;
background-color: transparent;
box-shadow: 40px 0 0 #000,
50px 0 0 #000,
60px 0 0 #000,
70px 0 0 #000,
80px 0 0 #000,
90px 0 0 #000,
100px 0 0 #000,
110px 0 0 #000, 30px 10px 0 #000,
40px 10px 0 #e8a056,
50px 10px 0 #e8a056,
60px 10px 0 #e8a056,
70px 10px 0 #e8a056,
80px 10px 0 #e8a056,
90px 10px 0 #e8a056,
100px 10px 0 #e8a056,
110x 10px 0 #e8a056,
120px 10px 0 #000;
}
At this point your burger should be looking like this:
Continue drawing your burger line by line. Don’t forget the lettuce:
.hamburger {
width: 10px;
height: 10px;
background-color: transparent;
box-shadow:/* top bun */40px 0 #000, 50px 0 #000, 60px 0 #000, 70px 0 #000, 80px 0 #000, 90px 0 #000, 100px 0 #000, 110px 0 #000,30px 10px #000, 40px 10px #e8a056, 50px 10px #e8a056, 60px 10px #e8a056, 70px 10px #e8a056, 80px 10px #e8a056, 90px 10px #e8a056, 100px 10px #e8a057, 110px 10px #e8a056, 120px 10px #000,20px 20px #000, 30px 20px #e8a056, 40px 20px #e8a056, 50px 20px #e8a056, 60px 20px #e8a056, 70px 20px #e8a056, 80px 20px #e8a056, 90px 20px #e8a056, 100px 20px #e8a057, 110px 20px #e8a056, 120px 20px #e8a056, 130px 20px #000,10px 30px #000, 20px 30px #e8a056, 30px 30px #e8a056, 40px 30px #000, 50px 30px #fff, 60px 30px #e8a056, 70px 30px #e8a056, 80px 30px #e8a056, 90px 30px #000, 100px 30px #fff, 110px 30px #e8a056, 120px 30px #e8a056, 130px 30px #e8a056, 140px 30px #000,0 40px #000, 10px 40px #e8a056, 20px 40px #e8a056, 30px 40px #e8a056, 40px 40px #000, 50px 40px #000, 60px 40px #e8a056, 70px 40px #e8a056, 80px 40px #e8a056, 90px 40px #000, 100px 40px #000, 110px 40px #e8a056, 120px 40px #e8a056, 130px 40px #e8a056, 140px 40px #e8a056, 150px 40px #000,0 50px #000, 10px 50px #e8a056, 20px 50px #e8a056, 30px 50px #e8a056, 40px 50px #e8a056, 50px 50px #e8a056, 60px 50px #e8a056, 70px 50px #e8a056, 80px 50px #e8a056, 90px 50px #e8a056, 100px 50px #e8a056, 110px 50px #e8a056, 120px 50px #e8a056, 130px 50px #e8a056, 140px 50px #e8a056, 150px 50px #000,0 60px #000, 10px 60px #e8a056, 20px 60px #e8a056, 30px 60px #e8a056, 40px 60px #e8a056, 50px 60px #e8a056, 60px 60px #000, 70px 60px #000, 80px 60px #000, 90px 60px #e8a056, 100px 60px #e8a056, 110px 60px #e8a056, 120px 60px #e8a056, 130px 60px #e8a056, 140px 60px #e8a056, 150px 60px #000,0 70px #000, 10px 70px #e8a056, 20px 70px #e8a056, 30px 70px #e8a056, 40px 70px #e8a056, 50px 70px #e8a056, 60px 70px #e8a056, 70px 70px #e8a056, 80px 70px #e8a056, 90px 70px #e8a056, 100px 70px #e8a056, 110px 70px #e8a056, 120px 70px #e8a056, 130px 70px #e8a056, 140px 70px #e8a056, 150px 70px #000,0 80px #000, 10px 80px #000, 20px 80px #000, 30px 80px #000, 40px 80px #000, 50px 80px #000, 60px 80px #000, 70px 80px #000, 80px 80px #000, 90px 80px #000, 100px 80px #000, 110px 80px #000, 120px 80px #000, 130px 80px #000, 140px 80px #000, 150px 80px #000,/* patty */-10px 90px #000, 0 90px #996b39, 10px 90px #996b39, 20px 90px #996b39, 30px 90px #996b39, 40px 90px #996b39, 50px 90px #996b39, 60px 90px #996b39, 70px 90px #996b39, 80px 90px #996b39, 90px 90px #996b39, 100px 90px #996b39, 110px 90px #996b39, 120px 90px #996b39, 130px 90px #996b39, 140px 90px #996b39, 150px 90px #996b39, 160px 90px #000,0 100px #000, 10px 100px #000, 20px 100px #000, 30px 100px #000, 40px 100px #000, 50px 100px #000, 60px 100px #000, 70px 100px #000, 80px 100px #000, 90px 100px #000, 100px 100px #000, 110px 100px #000, 120px 100px #000, 130px 100px #000, 140px 100px #000, 150px 100px #000,/* lettuce */-10px 110px #000, 0 110px #4adb64, 10px 110px #4adb64, 20px 110px #4adb64, 30px 110px #4adb64, 40px 110px #4adb64, 50px 110px #4adb64, 60px 110px #4adb64, 70px 110px #4adb64, 80px 110px #4adb64, 90px 110px #4adb64, 100px 110px #4adb64, 110px 110px #4adb64, 120px 110px #4adb64, 130px 110px #4adb64, 140px 110px #4adb64, 150px 110px #4adb64, 160px 110px #000,0 120px #000, 10px 120px #4adb64, 20px 120px #000, 30px 120px #4adb64, 40px 120px #4adb64, 50px 120px #000, 60px 120px #000, 70px 120px #000, 80px 120px #000, 90px 120px #4adb64, 100px 120px #4adb64, 110px 120px #4adb64, 120px 120px #4adb64, 130px 120px #000, 140px 120px #4adb64, 150px 120px #000,/* bottom bun */0 130px #000, 10px 130px #000, 20px 130px #e99e5a, 30px 130px #000, 40px 130px #000, 50px 130px #e99e5a, 60px 130px #e99e5a, 70px 130px #e99e5a, 80px 130px #e99e5a, 90px 130px #000, 100px 130px #000, 110px 130px #000, 120px 130px #000, 130px 130px #e99e5a, 140px 130px #000, 150px 130px #000,0 140px #000, 10px 140px #e99e5a, 20px 140px #e99e5a, 30px 140px #e99e5a, 40px 140px #e99e5a, 50px 140px #e99e5a, 60px 140px #e99e5a, 70px 140px #e99e5a, 80px 140px #e99e5a, 90px 140px #e99e5a, 100px 140px #e99e5a, 110px 140px #e99e5a, 120px 140px #e99e5a, 130px 140px #e99e5a, 140px 140px #e99e5a, 150px 140px #000,10px 150px #000, 20px 150px #000, 30px 150px #000, 40px 150px #000, 50px 150px #000, 60px 150px #000, 70px 150px #000, 80px 150px #000, 90px 150px #000, 100px 150px #000, 110px 150px #000, 120px 150px #000, 130px 150px #000, 140px 150px #000}
And now you have a cute hamburger guy.
Compliments to the chef!
