Skip to content

Instantly share code, notes, and snippets.

@natebates

natebates/README.md

Last active November 11, 2016 21:36
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save natebates/2e8a50ae76d5723be90f to your computer and use it in GitHub Desktop.
Save natebates/2e8a50ae76d5723be90f to your computer and use it in GitHub Desktop.
Download ZIP
CSS Cheeseburger
Raw
README.md

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.

Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment