Received a McDonald's flyer and thought the simple cheeseburger could be easily CSS'd.
Perhaps I'll update it to be bulletproof cross-browser, but for now the cheese drips look best in Chrome.
<!doctype html> | |
<meta charset="utf-8"> | |
<body> | |
<burger> | |
<bun></bun> | |
<condiments></condiments> | |
<cheese></cheese> | |
<patty></patty> | |
<cheese></cheese> | |
<bun></bun> | |
</burger> | |
</body> | |
<style> | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
position: relative; | |
margin-top: 15em; | |
font-size: 5px; | |
background: #fff; | |
} | |
burger { | |
display: block; | |
position: relative; | |
width: 100em; | |
margin: 0 auto; | |
} | |
burger:before { | |
content: ' '; | |
display: block; | |
width: 80em; | |
height: 100em; | |
position: absolute; | |
left: -17em; | |
top: -36em; | |
background-color: rgba(255,255,255,0.4); | |
-webkit-transform: rotate(46.75deg); /* 48.75 is perfect between seeds */ | |
transform: rotate(46.75deg); | |
mix-blend-mode: overlay; | |
z-index: 5; | |
} | |
bun:first-of-type { | |
display: block; | |
position: relative; | |
width: 100em; | |
height: 31.5em; | |
overflow: hidden; | |
} | |
bun:first-of-type:before { | |
content: ' '; | |
display: block; | |
position: relative; | |
width: 106em; | |
height: 94.5em; | |
left: 50%; | |
margin-left: -53em; | |
background-color: #d96532; | |
border-top-left-radius: 50%; | |
border-top-right-radius:50%; | |
z-index: 1; | |
} | |
bun:first-of-type:after { | |
content: ' '; | |
display: block; | |
width: 2.2em; | |
height: 2.2em; | |
position: absolute; | |
top: 7.8em; | |
left: 50%; | |
margin-left: -1.1em; | |
background-color: #fbdbd1; | |
border-radius: 50%; | |
z-index: 2; | |
box-shadow: | |
-5.3125em -4.675em #fbdbd1, | |
5.3125em -4.675em #fbdbd1, | |
-21.25em 0em #fbdbd1, | |
-10.625em 0em #fbdbd1, | |
10.625em 0em #fbdbd1, | |
21.25em 0em #fbdbd1, | |
-26.5625em 4.675em #fbdbd1, | |
-15.9375em 4.675em #fbdbd1, | |
-5.3125em 4.675em #fbdbd1, | |
5.3125em 4.675em #fbdbd1, | |
15.9375em 4.675em #fbdbd1, | |
26.5625em 4.675em #fbdbd1, | |
-31.875em 9.35em #fbdbd1, | |
-21.25em 9.35em #fbdbd1, | |
-10.625em 9.35em #fbdbd1, | |
0 9.35em #fbdbd1, | |
10.625em 9.35em #fbdbd1, | |
21.25em 9.35em #fbdbd1, | |
31.875em 9.35em #fbdbd1, | |
-37.1875em 14.025em #fbdbd1, | |
-26.5625em 14.025em #fbdbd1, | |
-15.9375em 14.025em #fbdbd1, | |
-5.3125em 14.025em #fbdbd1, | |
5.3125em 14.025em #fbdbd1, | |
15.9375em 14.025em #fbdbd1, | |
26.5625em 14.025em #fbdbd1, | |
37.1875em 14.025em #fbdbd1, | |
-42.5em 18.7em #fbdbd1, | |
-31.875em 18.7em #fbdbd1, | |
-21.25em 18.7em #fbdbd1, | |
-10.625em 18.7em #fbdbd1, | |
0 18.7em #fbdbd1, | |
10.625em 18.7em #fbdbd1, | |
21.25em 18.7em #fbdbd1, | |
31.875em 18.7em #fbdbd1, | |
42.5em 18.7em #fbdbd1; | |
} | |
condiments { | |
display: block; | |
height: 3.5em; | |
width: 100em; | |
background-color: transparent; | |
overflow: hidden; | |
box-shadow: | |
inset 10em 0 0 0em #fa1c3b, | |
inset 23em 0 0 0em #f3cc47, | |
inset 28em 0 0 0em #fa1c3b, | |
inset 31.4em 0 0 0em #e8bfaa, | |
inset 38.8em 0 0 0em #fcccba, | |
inset 52.6em 0 0 0em #e8bfaa, | |
inset 65.8em 0 0 0em #fa1c3b, | |
inset 71.6em 0 0 0em #1f2a1c, | |
inset 77.1em 0 0 0em #476233, | |
inset 93.4em 0 0 0em #1f2a1c, | |
inset 100em 0 0 0em #fa1c3b | |
} | |
cheese { | |
display: block; | |
position: relative; | |
width: 100em; | |
height: 6.05em; | |
border-top: 3em solid #f2b734; | |
padding-bottom: 3em solid transparent; | |
margin-bottom: -6.05em; | |
box-sizing: content-box; | |
background-image: radial-gradient(ellipse 6em 3em, #f2b734 5em, transparent 0); | |
background-position: -25.3em 0.55em; | |
background-repeat: no-repeat; | |
} | |
cheese:before, | |
cheese:after { | |
content: ' '; | |
position: absolute; | |
top: 0em; | |
width: 37.7em; | |
height: 30em; | |
margin-top: -1px; | |
background-color: transparent; | |
box-shadow: 0px 0px 0px 10em #f2b734; | |
} | |
cheese:before { | |
left: -4em; | |
border-top-right-radius: 56.55em 31.5em; | |
-webkit-clip-path: inset(10em 18em 34.5em 14em); | |
clip-path: inset(10em 18em 34.5em 14em); | |
clip: rect(0em, 28.8em, 5.5em, 4em); /* deprecated, but not all support clip-path */ | |
} | |
cheese:after { | |
left: 15.7em; | |
border-top-left-radius: 56.55em 31.5em; | |
-webkit-clip-path: inset(10em 13em 34.5em 19em); | |
clip-path: inset(10em 13em 34.5em 19em); | |
clip: rect(0em, 34.7em, 5.5em, 8em); | |
} | |
cheese:last-of-type { | |
background-position: 26em 0.55em; | |
} | |
cheese:last-of-type:before { | |
left: 47.2em; | |
border-top-right-radius: 56.55em 31.5em; | |
-webkit-clip-path: inset(10em 18em 34.5em 13em); | |
clip-path: inset(10em 18em 34.5em 13em); | |
clip: rect(0em, 28.8em, 5.5em, 0em); /* deprecated, but not all support clip-path */ | |
} | |
cheese:last-of-type:after { | |
left: 66.9em; | |
border-top-left-radius: 56.55em 31.5em; | |
-webkit-clip-path: inset(10em 14.6em 34.5em 19em); | |
clip-path: inset(10em 14.6em 34.5em 19em); | |
clip: rect(0em, 33.1em, 5.5em, 8em); | |
} | |
patty { | |
display: block; | |
width: 105.7em; | |
height: 10.5em; | |
margin-left: -2.85em; | |
background-color: #3c1012; | |
border-radius: 2.9em / 2.3em; | |
} | |
bun:last-of-type { | |
display: block; | |
width: 100em; | |
height: 0; | |
border-top: 11.5em solid #d96532; | |
border-left: 2.9em dotted transparent; | |
border-right: 2.9em dotted transparent; | |
} | |
</style> |