Skip to content

Instantly share code, notes, and snippets.

@cochrancj
Created January 27, 2017 19:37
Show Gist options
  • Save cochrancj/78bc0106cf8ec9ff579cb8b1fa655c4d to your computer and use it in GitHub Desktop.
Save cochrancj/78bc0106cf8ec9ff579cb8b1fa655c4d to your computer and use it in GitHub Desktop.
#dailycssimages 12 - Hamburger
<div class="container">
<div class="top-bun"></div>
<div class="sesame">
<span class="seed"></span>
<span class="seed"></span>
<span class="seed"></span>
<span class="seed"></span>
<span class="seed"></span>
<span class="seed"></span>
</div>
<div class="ketchup"></div>
<div class="cheese">
<div class="point"></div>
<div class="slice"></div>
</div>
<div class="lettuce">
<div class="leaf">
<div class="frill"></div>
<div class="frill"></div>
<div class="frill"></div>
<div class="frill"></div>
<div class="frill"></div>
<div class="frill"></div>
<div class="frill"></div>
<div class="frill"></div>
<div class="frill"></div>
</div>
</div>
<div class="patty"></div>
<div class="bottom-bun"></div>
<div class="fry">
<div class="upright"></div>
<div class="bend"></div>
<div class="horizontal"></div>
<div class="left-eye"></div>
<div class="left-iris"></div>
<div class="right-eye"></div>
<div class="right-iris"></div>
<div class="smile">
<div class="corner"></div>
<div class="corner right"></div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
body {
background-color: cornflowerblue;
}
.container {
width: 600px;
height: 700px;
margin-top: 5em;
margin-left: 5em;
}
.top-bun {
width: 300px;
height: 100px;
background-color: peru;
border-top-left-radius: 80px;
border-top-right-radius: 80px;
transform: rotate(-5deg);
position: absolute;
}
.seed {
width: 5px;
height: 8px;
background-color: navajowhite;
position: absolute;
border-radius: 50%;
}
.seed:nth-child(1) {
transform: rotate(15deg);
margin-left: 3em;
margin-top: 2em;
position: absolute;
z-index: 1;
}
.seed:nth-child(2) {
transform: rotate(10deg);
margin-left: 5em;
margin-top: 3em;
position: absolute;
z-index: 1;
}
.seed:nth-child(3) {
transform: rotate(5deg);
margin-left: 7em;
margin-top: 1.5em;
position: absolute;
z-index: 1;
}
.seed:nth-child(4) {
transform: rotate(15deg);
margin-left: 9em;
margin-top: 2.5em;
position: absolute;
z-index: 1;
}
.seed:nth-child(5) {
transform: rotate(5deg);
margin-left: 11em;
margin-top: 1em;
position: absolute;
z-index: 1;
}
.seed:nth-child(6) {
transform: rotate(10deg);
margin-left: 14em;
margin-top: 1.5em;
position: absolute;
z-index: 1;
}
.ketchup {
width: 295px;
height: 8px;
background-color: firebrick;
position: absolute;
margin-top: 6.8em;
margin-left: 0.5em;
transform: rotate(-3deg);
}
.cheese {
/* position: absolute; */
}
.slice {
width: 295px;
height: 8px;
background-color: gold;
margin-top: 7.7em;
margin-left: 0.5em;
transform: rotate(-2deg);
position: absolute;
}
.point {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 80px solid gold;
margin-left: 11em;
margin-top: 7.6em;
position: absolute;
transform: rotate(-2deg);
z-index: 2;
}
.leaf {
width: 295px;
height: 15px;
background-color: green;
margin-top: 9em;
margin-left: 0.5em;
transform: rotate(-2deg);
position: absolute;
}
.frill {
width: 25px;
height: 30px;
border-radius: 50%;
background-color: forestgreen;
}
.frill:nth-child(1) {
transform: rotate(-8deg);
margin-left: 0.3em;
margin-top: 0.5em;
position: absolute;
z-index: 1;
}
.frill:nth-child(2) {
transform: rotate(-5deg);
margin-left: 2.3em;
margin-top: 0.5em;
position: absolute;
z-index: 1;
}
.frill:nth-child(3) {
transform: rotate(0deg);
margin-left: 4.3em;
margin-top: 0.5em;
position: absolute;
z-index: 1;
}
.frill:nth-child(4) {
transform: rotate(5deg);
margin-left: 6.3em;
margin-top: 0.5em;
position: absolute;
z-index: 1;
}
.frill:nth-child(5) {
transform: rotate(8deg);
margin-left: 8.3em;
margin-top: 0.5em;
position: absolute;
z-index: 1;
}
.frill:nth-child(6) {
transform: rotate(12deg);
margin-left: 10.3em;
margin-top: 0.5em;
position: absolute;
z-index: 1;
}
.frill:nth-child(7) {
transform: rotate(17deg);
margin-left: 12.3em;
margin-top: 0.5em;
position: absolute;
z-index: 1;
}
.frill:nth-child(8) {
transform: rotate(22deg);
margin-left: 14.3em;
margin-top: 0.5em;
position: absolute;
z-index: 1;
}
.frill:nth-child(9) {
transform: rotate(27deg);
margin-left: 16.3em;
margin-top: 0.5em;
position: absolute;
z-index: 1;
}
.patty {
width: 295px;
height: 30px;
border-radius: 20px;
background-color: saddlebrown;
margin-top: 12em;
position: absolute;
margin-left: 0.8em;
}
.bottom-bun {
width: 300px;
height: 50px;
background-color: peru;
border-bottom-left-radius: 80px;
border-bottom-right-radius: 80px;
/* transform: rotate(-5deg); */
position: absolute;
margin-top: 14.2em;
margin-left: 0.7em;
}
.fry {
}
.upright {
width: 30px;
height: 200px;
background-color: khaki;
margin-left: 30em;
margin-top: 5em;
position: absolute;
}
.bend {
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 27px solid lightgoldenrodyellow;
margin-left: 29.6em;
margin-top: 4em;
position: absolute;
transform: rotate(50deg);
z-index: 2;
}
.horizontal {
width: 100px;
height: 30px;
background-color: khaki;
margin-left: 24.5em;
margin-top: 4.1em;
position: absolute;
z-index: 1;
transform: rotate(-10deg);
}
.left-eye {
width: 25px;
height: 40px;
border-radius: 50%;
background-color: white;
position: absolute;
margin-left: 29.5em;
margin-top: 8.5em;
}
.right-eye {
width: 25px;
height: 40px;
border-radius: 50%;
background-color: white;
position: absolute;
margin-left: 31em;
margin-top: 8.5em;
}
.left-iris {
width: 15px;
height: 30px;
border-radius: 50%;
background-color: black;
position: absolute;
margin-left: 29.6em;
margin-top: 9em;
animation-name: eyeroll;
animation-duration: 1s;
-webkit-animation-name: eyeroll; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
}
@-webkit-keyframes eyeroll {
0% {left:29.8em; top:9em;}
25% {left:29.9em; top:9em;}
50% {left:30em; top:9em;}
75% {left:29.9em; top:9em;}
100% {left:29.8em; top:9em;}
}
/* Standard syntax */
@keyframes eyeroll {
0% {left:29.8em; top:9em;}
25% {left:29.9em; top:9em;}
50% {left:30em; top:9em;}
75% {left:29.9em; top:9em;}
100% {left:29.8em; top:9em;}
}
.right-iris {
width: 15px;
height: 30px;
border-radius: 50%;
background-color: black;
position: absolute;
margin-left: 31.2em;
margin-top: 9em;
animation-name: eyeroll-right;
animation-duration: 1s;
-webkit-animation-name: eyeroll-right; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
}
@-webkit-keyframes eyeroll-right {
0% {left:31.4em; top:9em;}
25% {left:31.6em; top:9em;}
50% {left:31.8em; top:9em;}
75% {left:31.6em; top:9em;}
100% {left:31.4em; top:9em;}
}
/* Standard syntax */
@keyframes eyeroll-right {
0% {left:31.4em; top:9em;}
25% {left:31.6em; top:9em;}
50% {left:31.8em; top:9em;}
75% {left:31.6em; top:9em;}
100% {left:31.4em; top:9em;}
}
.smile {
width: 30px;
height: 9px;
border: 4px solid palevioletred;
border-top: 0;
-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
border-radius: 0 0 120px 120px / 0 0 90px 90px;
position: absolute;
margin-top: 13em;
margin-left: 30em;
}
.corner {
width: 4px;
height: 11px;
background-color: palevioletred;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
margin-left: -0.4em;
margin-top: -0.4em;
}
.corner.right {
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
margin-left: 1.5em;
margin-top: -0.6em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment