- estherjan
Illustrations for Breakfast
During the first week of Creative Code Immersive, we've been learning the basics of HTML, CSS and a bit of Javascript. The workshop assignment for the first week is to draw out a triptych with a topic of our own choice, and we can decide whether or not the drawings will be sequential.

I started brainstorming during breakfast, and while nibbling off my Nutella toast, I came across this tutorial on Youtube, animating a toaster in CSS and HTML. Staring at the tutorial on the screen, and my Nutella toast in the plate, I decided to create a sequential triptych with my breakfast art the main theme, and quickly sketched out my idea.

The first couple lines of code were actually hard to set up the environment. I kept on getting confused in positioning the three canvases. In the end, I used the "column" function in CSS.
At first, I wanted the countertop to be checkered, but realized I couldn't draw it out, so went on to create it in stripes. The tutorial here about CSS stripes helped me a lot to weave the three panels together.
After the three-panel-environment was set up, the rest were pretty easy to draw out, I just have to keep on adjusting the positions since I'm using positioning-absolute all the way through the illustrations. (The code is quite long, so I'm placing them at the bottom of this blogpost)
When all the illustrations were mostly created, I started to work on the animations. The "transform:rotate" was very helpful in making elements spin and rotate.

See it in CodePen
body {
margin: 0;
padding: 0;
}
.collumnfirst {
width: 360px;
float: left;
height: 500px;
margin: 10px;
background-color: #B1BFE2;
}
.collumnsecond {
width: 360px;
height: 500px;
float: left;
margin: 10px;
background-color: #95B4AE;
}
.collumnthird {
width: 360px;
height: 500px;
float: left;
margin: 10px;
background-color: #DE907D;
}
/*Table*/
.vertical-stripes {
background: repeating-linear-gradient(
90deg,
#F9F7E9,
#F9F7E9 20px,
#454B66 20px,
#454B66 25px);
height: 150px;
width: 360px;
position: relative;
top: 300px;
}
/*Tea*/
.cup {
position: absolute;
margin: 10px;
width: 90px;
height: 130px;
top:280px;
left: 140px;
border-radius: 40px 40px 40px 40px;
background-color: #DE907D;
}
.mugshadow {
position: absolute;
margin: 10px;
width: 120px;
height: 60px;
top:370px;
left: 140px;
border-radius: 60px 60px 60px 60px;
opacity: 0.5;
background-color: black;
}
.handle {
position: absolute;
margin: 10px;
width: 30px;
height: 30px;
top:320px;
left: 200px;
/* border-radius: 40px 40px 40px 40px; */
border: 1em solid #DE907D;
}
.liquid {
position: absolute;
margin: 10px;
width: 70px;
height: 45px;
top:290px;
left: 150px;
border-radius: 90px 90px 60px 70px;
background-color: white;
animation: 6s teadone infinite;
}
@keyframes teadone {
90% {
opacity: 0.5;
background-color: #F7D49D;
}
95% {
background-color: #F7D49D;
}
}
.teabag {
position: absolute;
margin: 10px;
width: 40px;
height: 50px;
top:60px;
left: 170px;
transform: skew(20deg, -40deg);
background-color: #F9F7E9;
animation: 6s drop infinite;
}
.teabagshadow {
position: absolute;
margin: 10px;
width: 40px;
height: 50px;
top:65px;
left: 175px;
transform: skew(20deg, -40deg);
background-color: #AFAFAF;
animation: 6s drop infinite;
}
@keyframes drop{
50% {
transform: translateY(290px);
}
}
.tealeaves {
position: absolute;
margin: 10px;
width: 20px;
height: 30px;
top:150px;
left: 300px;
transform: skew(20deg, -40deg);
background-color: #DE907D;
}
.cupcover {
position: absolute;
margin: 10px;
width: 90px;
height: 80px;
top:335px;
left: 140px;
border-radius: 0px 0px 40px 40px;
background-color: #DE907D;
}
/*Toaster in the middle*/
.toaster {
position: absolute;
margin: 10px;
width: 120px;
height: 90px;
top:300px;
left: 480px;
border-radius:25px 25px 0 0;
background-color: #B1BFE2;
}
.cover{
position: absolute;
margin: 10px;
width: 120px;
height: 90px;
top:300px;
left: 520px;
border-radius:25px 25px 0 0;
background-color: #454B66;
}
.toastershadow {
position: absolute;
margin: 10px;
width: 180px;
height: 50px;
top:380px;
left: 480px;
border-radius:25px 25px 25px 25px;
opacity: 0.5;
background-color: black;
}
.b1, .b2 {
width: 10px;
height: 10px;
border-radius: 50%;
background-color:#F9F7E9;
position: absolute;
}
.b1 {
top:25px;
left: 55px;
}
.b2 {
top:40px;
left: 55px;
}
.button {
position: absolute;
width:15px;
height: 15px;
border-radius: 50%;
border:2px solid white;
background-color: #DE907D;
top:56px;
left: 51px;
}
.slot1{
position:absolute;
background-color:#AAAAAA;
height: 50px;
width: 8px;
border-radius: 15px;
top:25px;
left: 130px;
}
.slot2{
position:absolute;
background-color:#AAAAAA;
height: 50px;
width: 8px;
border-radius: 15px;
top:25px;
left: 145px;
}
.handle1{
background-color: white;
height: 5px;
width:20px;
position: absolute;
left: 0.1px;
animation: 6s move infinite;
}
@keyframes move{
50% {
transform: translateY(31px);
}
}
.handle2{
background-color: white;
height: 5px;
width:20px;
position: absolute;
}
.l1, .l2, .l3, .l4{
background-color: #AAAAAA;
width:10px;
height: 15px;
border-radius: 0px 0px 15px 15px;
position: absolute;
}
.l1{
top: 90px;
left: 5px;
}
.l2{
top: 90px;
left: 30px;
}
.l3{
top: 90px;
right: 5px;
}
.l4{
top: 90px;
right: 30px;
}
.base {
background-color: #DE907D;
width:120px;
height: 10px;
border-radius: 5px;
position: absolute;
top 200px;
}
.toast{
position: absolute;
margin: 10px;
width: 90px;
height: 90px;
top:230px;
left: 520px;
border-radius: 20px 20px 20px 20px;
background-color: #F7D49D;
animation: 6s fly infinite;
}
@keyframes fly {
50% {
transform: translateY(30px);
}
87% {
transform: translateY (-100px);
}
}
/* Tabletop */
.table-cloth {
background: repeating-linear-gradient(
-45deg,
#F9F7E9,
#F9F7E9 20px,
#454B66 20px,
#454B66 25px);
position: absolute;
height: 450px;
width: 360px;
}
.plate {
position: absolute;
width: 250px;
height: 250px;
top:230px;
right: 400px;
border-radius: 50%;
background-color: #454B66;
}
.plateshadow {
position: absolute;
width: 250px;
height: 250px;
top:240px;
right: 390px;
border-radius: 50%;
opacity:0.5;
background-color: black;
}
.toast2{
position: absolute;
margin: 10px;
width: 120px;
height: 120px;
top:250px;
right: 480px;
transform: rotate(20deg);
border-radius: 40px 40px 40px 40px;
background-color: #F7D49D;
}
.jam2{
position: absolute;
margin: 10px;
width: 100px;
height: 100px;
top:260px;
right: 490px;
transform: rotate(20deg);
border-radius: 40px 40px 40px 40px;
background-color: #DE907D;
animation: 6s spread infinite;
}
@keyframes spread {
50% {
opacity: 0.2;
transition: ease-in;
}
}
.toast2{
position: absolute;
margin: 10px;
width: 120px;
height: 120px;
top:250px;
right: 480px;
transform: rotate(20deg);
border-radius: 40px 40px 40px 40px;
background-color: #F7D49D;
}
.toast3{
position: absolute;
margin: 10px;
width: 120px;
height: 120px;
top:320px;
right: 440px;
transform: rotate(60deg);
border-radius: 40px 40px 40px 40px;
background-color: #F2BB72;
}
.jam3{
position: absolute;
margin: 10px;
width: 100px;
height: 100px;
top:330px;
right: 450px;
transform: rotate(60deg);
border-radius: 40px 40px 40px 40px;
background-color: #5E3F24;
animation: 6s spread infinite;
}
.cupshadow {
position: absolute;
width: 100px;
height: 100px;
top:140px;
right: 350px;
border-radius: 50%;
opacity:0.5;
background-color: black;
}
.cuptop {
position: absolute;
width: 100px;
height: 100px;
top:120px;
right: 360px;
border-radius: 50%;
background-color: #DE907D;
}
.handletop{
position: absolute;
width: 20px;
height: 40px;
top:130px;
right: 350px;
transform: rotate(60deg);
background-color: #DE907D;
}
.tea {
position: absolute;
width: 80px;
height: 80px;
top:130px;
right: 370px;
border-radius: 50%;
background-color: #F7D49D;
}
.spoon {
position: absolute;
width: 15px;
height: 50px;
top:150px;
right:450px;
transform: rotate(260deg);
background-color: #AFAFAF;
animation: 2s spin infinite;
}
@keyframes spin {
rom {
transform:rotate(250deg);
}
to {
transform:rotate(270deg);
}
}
// HTML code //
<div class="collumnfirst col1">
<p style="text-align:center;" "font-family:courier;">Tea</p>
<div class="vertical-stripes"></div>
<div class="mugshadow"></div>
<div class="handle"></div>
<div class="cup"></div>
<div class="liquid"></div>
<div class="teabagshadow"></div>
<div class="teabag"></div>
<!-- <div class="tealeaves"></div> -->
<div class="cupcover"></div>
</div>
<div class="collumnsecond col2">
<p style="text-align:center;" "font-family:courier;">Toast</p>
<div class="vertical-stripes"></div>
<div class="toastershadow"></div>
<div class="toast"></div>
<div class="cover">
<div class="l3"></div>
<div class="l4"></div>
</div>
<div class="toaster">
<div class="b1"></div>
<div class="b2"></div>
<div class="button"></div>
<div class="slot1">
<div class="handle2"></div>
</div>
<div class="slot2">
<div class="handle1"></div>
</div>
<div class="l1"></div>
<div class="l2"></div>
</div>
</div>
<div class="collumnthird col3">
<p style="text-align:center;" "font-family:courier;">Breakfast!</p>
<div class="table-cloth"></div>
<div class="plateshadow"></div>
<div class="plate"></div>
<div class="toast3"></div>
<div class="jam3"></div>
<div class="toast2"></div>
<div class="jam2"></div>
<div class="cupshadow"></div>
<div class="cuptop"></div>
<div class="handletop"></div>
<div class="tea"></div>
<div class="spoon"></div>
</div>
</div>