Muna Mohamed**This post has previously been posted on Medium.
Lately, I’ve got into creating little CSS animations using HTML and CSS and I think this easy and fun tutorial would be great for beginners. Plus, the CSS properties that you will learn in this tutorial will allow you to create a variety of other CSS images or animations. The possibilities are endless!
The Setup
So first we need to figure out the components that make up a watermelon slice. We have the:
- skin
- flesh
- seeds
HTML
With the components that make up a watermelon in mind, we can now start to write the HTML code.
<div class="skin">
<div class="flesh">
<div class="seeds-container">
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
<div class="seed"></div>
</div>
</div>
</div>
Here we have div class named skin which will not only represent the skin of the watermelon but also will serve as a container for the rest of the watermelon components.
Then inside the skin container, we have the flesh which represents the red flesh of the watermelon.
Following this, we have the div class called seeds-container which will act as a container for the seeds. With the use of the seeds-container, this will allow us have control of all the seeds simultaneously rather than having to deal with each individual seed.
That brings us to the last component of the watermelon; the seeds themselves. It’s up to you how many seeds you want the watermelon to have but here, I have used 15 individual seeds.
CSS
Skin
Next, we have to style the HTML code in order to create the watermelon. Normally, I would use SCSS (CSS preprocessor) but since this is a tutorial for beginners, I will use CSS.
We’ll start off by styling the skin of the watermelon.
.skin {
margin-top: 150px;
margin-right: auto;
margin-left: auto;
display: block;
width: 400px;
height: 200px;
-webkit-border-bottom-right-radius: 400px;
-webkit-border-bottom-left-radius: 400px;
-moz-border-radius-bottomright: 400px;
-moz-border-radius-bottomleft: 400px; border-bottom-left-radius: 400px;
border-bottom-right-radius: 400px;
box-shadow: 2px 2px 5px black;
background-color: green;
transition: all 1s;
cursor: pointer;
}
I will explain why I have applied each property to .skin below.(for those who would rather skip this part, scroll down!)
Margin-top: 150px → This moves the .skin class 150px away from the top of the margin.
Margin-left & margin-right: auto → These two properties together centers .skin.
Width: 400px, height: 200px → The shape of a watermelon slice is a semi-circle thus, the width is double that of the height.
Border-bottom-left-radius: 400px, border-bottom-right-radius: 400px → In order to create the semi-circle shape, we need to apply these two properties which will target the bottom right and left corners of our .skin container; this will round the bottom two corners of .skin. Don’t forget to add the prefixes.
Box-shadow: 2px 2px 5px black → To give a slight 3D effect, I applied a shadow to the .skin container.
Background-color: green → Because the skin of a watermelon is green!
Transition: all 1s → This will help us when we apply a transition to our watermelon slice later on; this will slow down and make the transition occur smoothly.
Cursor: pointer → So that when we hover over our watermelon slice, the cursor will change to a pointer (i.e the finger pointing cursor).
Flesh
Next up is the flesh of the watermelon slice. The properties we’ll be using here are pretty much the same as the properties we used for the skin.
.skin .flesh {
margin-right: auto;
margin-left: auto;
width: 350px;
height: 180px;
background-color: red;
-webkit-border-bottom-right-radius: 350px;
-webkit-border-bottom-left-radius: 350px;
-moz-border-radius-bottomright: 350px;
-moz-border-radius-bottomleft: 350px;
border-bottom-left-radius: 350px;
border-bottom-right-radius: 350px;
}
We use margin-right and margin-left to center the flesh so that its centered in the skin container. The width and height of the flesh container is smaller in comparison to the skin container. This is so that we can see both the skin and the flesh of the watermelon slice. The background-color is red because the flesh (i.e the inside) of a watermelon is red. The border-radius of the bottom left and bottom right corners of the flesh container are 350px. This creates the rounded border that create the semi circle shape. Don’t forget the prefixes!
Here’s what we have so far:
Seeds-container and seeds
Finally, we add the seeds to the watermelon slice. We do this by first defining the seeds-container. This lets us decide where the seeds will appear on the watermelon slice. We know the seeds of a watermelon appear on the flesh so we create the seeds-container that is exactly the same size as the flesh. Thus, the properties we will use to define the seeds-container will be similar, if not the same, as the properties used on the flesh container.
.skin .flesh .seeds-container {
width: 350px;
height: 180px;
-webkit-border-bottom-right-radius: 350px;
-webkit-border-bottom-left-radius: 350px;
-moz-border-radius-bottomright: 350px;
-moz-border-radius-bottomleft: 350px;
border-bottom-left-radius: 350px;
border-bottom-right-radius: 350px;
overflow: hidden;
}
The extra property that we added here that we did not add on the flesh container is overflow. We set the overflow to hidden; this is so that when we insert the seeds later on, if any go outside of the seed-container, they will be hidden.
I also used the border property to make sure that the seed-container was exactly the same size as the flesh container and that it covered the same area of space.
Now, the seeds (we’re almost there, I promise!).
.skin .flesh .seeds-container .seed {
margin-left: 18%;
margin-top: 10%;
display: inline-block;
width: 5px;
height: 2px;
background-color: black;
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
margin-left: 18% → This is to create space between the seeds; each seed will have a 18% gap between it and the next seed to its left.
margin-top: 10% → This is to create space between the seeds on the row above and the row below.
display: inline-block → This defines each of the seeds as a block and organises them to be inline.
width: 5px, height: 2px → Seeds are relatively small which is reflected by these width and height values.
background-color: black → Watermelon seeds tend to be black.
transform: rotate(60deg) → Rotates the seeds to be 60 degrees clockwise. Don’t forget to add prefixes so that it can work on different browsers!
Transition
Because this is a tutorial for beginners, I felt that the transition should be one that is simple but nice at the same time.
The animation we will be applying will increase the scale of the watermelon slice image when the cursor hovers over it. We will do this using the transform property, making sure not to forget to add the prefixes.
.skin:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
To translate the code block above, when the user hovers over the CSS image of the watermelon slice, the image will increase in size; it will increase by a scale of 1.1. Although we are applying the hover to the skin container, the transform property will affect the entire contents of the skin container so that all of the components increase in scale.
As you can see, with the transition property that we applied earlier to the skin, the transition applies with an even timing function; the change happens slowly both at the beginning and end, and speeds up only in the middle.
That’s it! Below you can see the finished Watermelon Slice animation!
If you made it this far, congratulations! I hope you enjoyed this article! I did initially intend to keep it as simple and short as possible; that didn’t quite work out. Till next time! 👋
