Hi. My name is Marian and this is my first post on dev.to! I wanted to start with something light, so here is a floating banana made only with Html and CSS.
The Background
To get started I first added a blue background to the page and added a container to be able to position the banana.
Html
<div class="page">
<div class="container">
</div>
</div>
CSS
.page {
width: 960px;
padding: 50px 50px;
margin: 30px auto;
border-radius: 2%;
background-color: #81e4e4; /*light blue*/
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.container {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50px;
position: relative;
}
The Body
The body of the banana consists of two rectangles with rounded borders.
One of the rectangles is yellow and forms the body of the banana, the other has the same color as the background and creates the bend of the banana.
Both rectangles have width=0. What we see on the screen is only the border.
(For illustration I changed the color of the outline to black in the screenshot).
Html
<div class="page">
<div class="container">
<div class="banana">
<div class="banana-body">
<div class="banana-outline"></div>
</div>
</div>
</div>
</div>
CSS
.container {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50px;
position: relative;
}
.banana {
height: 500px;
width: 500px;
top: 80px;
position: relative;
}
.banana-body {
height: 80%;
width: 0px;
top: 50px;
left: 160px;
border-right: 180px solid #ecec13; /* yellow */
border-radius: 0 150px 150px 0%;
position: absolute;
transform: rotate(15deg);
}
.banana-outline {
height: 120%;
width: 0px;
top: -20px;
left: -50px;
border-top: 30px solid transparent;
border-right: 120px solid #81e4e4; /* light blue */
border-radius: 0 120px 120px 0%;
position: absolute;
}
The Eyes
The eyes consist of two big white circles and two small black circles.
Html
<div class="page">
<div class="container">
<div class="banana">
<div class="banana-body">
<div class="banana-outline"></div>
</div>
<div class="banana-eyes">
<div class="banana-left-eye"></div>
<div class="banana-right-eye"></div>
</div>
</div>
</div>
</div>
CSS
.banana-left-eye {
width: 90px;
height: 90px;
border: 5px solid #e6e619; /* yellow */
background: #FFFFFF;
border-radius: 50%;
position: absolute;
top: 180px;
left: 200px;
}
.banana-left-eye::after {
content:"";
position: absolute;
border-radius: 50%;
background-color: #000000;
width: 35px;
height: 35px;
left: 30px;
top: 30px;
}
.banana-right-eye {
width: 90px;
height: 90px;
border: 5px solid #e6e619; /* yellow */
background: #FFFFFF;
border-radius: 50%;
position: absolute;
top: 180px;
left: 290px;
}
.banana-right-eye::after {
content:"";
position: absolute;
border-radius: 50%;
background-color: #000000;
width: 35px;
height: 35px;
left: 30px;
top: 30px;
}
The Mouth
The mouth is another rectangle with rounded border.
Html
<div class="page">
<div class="container">
<div class="banana">
<div class="banana-body">
<div class="banana-outline"></div>
</div>
<div class="banana-eyes">
<div class="banana-left-eye"></div>
<div class="banana-right-eye"></div>
</div>
<div class="banana-mouth"></div>
</div>
</div>
</div>
CSS
.banana-mouth {
width: 30px;
height: 20px;
border-radius: 0 0 5em 5em;
border-bottom: 5px solid #675340; /* dark outline */
border-right: 5px solid #675340; /* dark outline */
border-left: 5px solid #675340; /* dark outline */
position: absolute;
left: 270px;
top: 270px;
}
The banana ends
The banana doesn't look very banana-ey yet, so let's also add top- and bottom end.
Html
<div class="page">
<div class="container">
<div class="banana">
<div class="banana-body">
<div class="banana-outline"></div>
</div>
<div class="banana-end"></div>
<div class="banana-top"></div>
<div class="banana-eyes">
<div class="banana-left-eye"></div>
<div class="banana-right-eye"></div>
</div>
<div class="banana-mouth"></div>
</div>
</div>
</div>
CSS
.banana-end {
width: 10px;
height: 15px;
border-radius: 0 0 3em 3em;
background: #996633; /* brown */
position: absolute;
transform: rotate(65deg);
bottom: 60px;
left: 160px;
}
.banana-top {
width: 35px;
height: 12px;
background: #4d9933; /* green */
position: absolute;
transform: rotate(25deg);
border-radius: 50% 0 0 50%;
top: 33px;
left: 210px;
}
Make it float!
Since the banana floats above the ground, we should add a shadow. It's hard to be completely still while floating, so let's also animate it.
Html
<div class="page">
<div class="container">
<div class="banana">
<div class="banana-body">
<div class="banana-outline"></div>
</div>
<div class="banana-end"></div>
<div class="banana-top"></div>
<div class="banana-eyes">
<div class="banana-left-eye"></div>
<div class="banana-right-eye"></div>
</div>
<div class="banana-mouth"></div>
</div>
<div class="banana-float"></div>
</div>
</div>
CSS
/* we created this class at the beginning and only have to add the new items here */
.banana {
height: 500px;
width: 500px;
top: 80px;
position: relative;
animation-name: float; /* NEW */
animation-duration: 5s; /* NEW */
animation-iteration-count: infinite; /* NEW */
animation-timing-function: ease; /* NEW */
}
.banana-float {
width: 350px;
height: 10px;
border-radius: 50%;
background-color: #868679;
position: relative;
top: 330px;
left: -150px;
}
@keyframes float {
0%, 100% {
top: 80px;
}
50% {
top: 70px;
}
}
BONUS - Animate the eyes
Let's also animate the eyes to make it look even more silly.
CSS
/* add the animation to the eyes*/
.banana-right-eye::after {
content:"";
position: absolute;
border-radius: 50%;
background-color: #000000;
width: 35px;
height: 35px;
left: 30px;
top: 30px;
animation: eyes 2s infinite; /* NEW */
}
.banana-left-eye::after {
content:"";
position: absolute;
border-radius: 50%;
background-color: #000000;
width: 35px;
height: 35px;
left: 30px;
top: 30px;
animation: eyes 2s infinite; /* NEW */
}
@keyframes eyes {
0%, 50%, 100% {
left: 30px;
}
25% {
left: 20px;
}
75% {
left: 40px;
}
}
One Last Thing
If you made it until here, well done and thank you so much!
I originally made this when I started coding and wanted to get better at CSS. I even created a repository on GitHub at the time to collect my drawings. https://github.com/mrnbck/drawing-with-css
Whether you are new to web development or just enjoy drawing with CSS, I would love to see more contributions to the repo. If you are not finished with Hacktoberfest yet, it might even count towards your Pull Requests :)
Top comments (12)
I love bananas! Thank you for making this delightful css creation.
I just started to learn css and I would NEVER imagine that you could use it to draw. It is just amazing
Yes, it's amazing. I thought exactly the same when I saw something like this for the first time! It helped me so much to get used to CSS and all the different properties. Search for "pure css" on Codepen for much, much better examples of what can be done with CSS. I love this one codepen.io/miocene/pen/mjLPVp
Thank you for your dancing banana
Love the CSS banana 🍌 Specially the eye animations 👀
But can you do it in a single div? ( ͡° ͜ʖ ͡°)
I'll have to google it ( ͡~ ͜ʖ ͡°)
Since we have the technology for a banana, when will we finally be able to do this in CSS? media.giphy.com/media/qr093KEQQE5T...
I'd love to see that. Shouldn't be too hard :)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.