Required knowledge level: expert
Walruses are my favorite animals, I just like how calm and friendly they are and it’s a shame that they are threatened with extinction due to water pollution and climate changes. One day when I had some free time I came up with the idea to build a cartoon-styled walrus using only HTML and CSS. I have never created a CSS animal before but since I kept on seeing pure CSS animals on Codepen or JSFiddle I wanted to give it a try. In this tutorial you will create an animated walrus using only CSS and HTML.
Preview
HTML5 responsive website
Download
Download it from GitHub
The difficulty of pure CSS objects
The difficulty when creating complex objects like animals with CSS is that you can not transform an HTML element to an extent that you could with for example SVG elements. When you build an object you need to create many HTML elements for all the different parts of the object. So let’s say you would like to build a human. You would then need to create HTML elements for the head, the eyes, each of the hairs etc. Furthermore in many cases you need multiple HTML elements to create one part of the object. So for example you would like the arm of the human to be bend in a specific way. Since we can not use paths in CSS we would need to create multiple HTML elements for different sections of the arm, adapt these elements with CSS and make sure they look like a bend arm when combined. Creating complex objects with SVG is definitely simpler and less pain.
Creating a sketch
Before we can begin to build the animal we need to create a sketch of the object. So either you are a very creative and artistic person who loves to draw cartoons then you can sketch your own object. Or you are just like me not the best cartoonist then you could check the internet for inspiring cartoons or cliparts and recreate an object with HTML and CSS. Note though that if you are using the clipart for something other than personal use you would need to make sure you don’t infringe somebody’s copyrights.
To find a suitable walrus I just went to Google and typed in “Walrus”. Then I got some real life images of walruses which is not what I wanted. So I went into the search options and chose the type to be “Clipart”. Now I got some really good results of cartoon-styled walruses. I chose one image which showed a cute cartoon illustration of a walrus without any colors.
Thinking in HTML – Creating the HTML code
The next step when creating a pure CSS walrus based on the illustration I chose above is to think in HTML. We need to convert the image into HTML and therefore create different div elements for the different parts of the object. It always makes sense to go from large to small so we start by adding the container of the whole object which then has all the other elements inside. We add a new div element and give it a class “walrus”. This walrus element should contain every part of the walrus, the body as well as for example a shadow below the animal.
Now that we have the most outer container of our walrus we need to have a look at the clipart image again and find out how we can further segment the walrus. It has a head containing the eyes, nose and mouth with tusks, some legs/fins and a tail fin. So we add a new HTML element as a container for our head, our legs and our tail. Now we go further into detail: the head contains hairs so we add a new “hairs” element and put one HTML element for each hair into that “hairs” element. The head also has two eyes so we add a container “eyes” and put two elements “eye” inside. It also has a mouth and a nose so we add elements for them as well into the “head”.
Into the legs we add two elements with the class “leg” for our two legs. The tail of the walrus is one of the most difficult parts and can not be created with CSS using only one single HTML element. So what I did is separating the tail into two fins.
Since we have some elements which are doubly present like the legs, the hair or the eyes I added a class “left” and “right” so that we can later position these elements on the left or right side.
This is the HTML code for the walrus that you should have now:
<div class="walrus"> <div class="body"> <div class="head"> <div class="hairs"> <div class="left"> <div class="hair"></div> <div class="hair"></div> <div class="hair"></div> </div> <div class="right"> <div class="hair"></div> <div class="hair"></div> <div class="hair"></div> </div> </div> <div class="eyes"> <div class="left eye"></div> <div class="right eye"></div> </div> <div class="nose"></div> <div class="mouth"></div> </div> <div class="legs"> <div class="left leg"></div> <div class="right leg"></div> </div> <div class="tail"> <div class="fin"></div> <div class="fin"></div> </div> </div> </div>
Styling the Walrus – Creating the CSS code
We have created the HTML code for our walrus, now we need to make this code visible. To make writing the CSS code as simple as possible I am using Stylus which is a CSS language built for Node.js. I used to work with Less and Sass however Stylus has some advantages and an even simpler syntax. In case you think you don’t need Less, Sass or Stylus you are right, you don’t need it to create the walrus but it will make things a lot easier and faster. The installation is very simple, you should definitely give it a try. Just install Node.js and then use the Node Package Manager to install Stylus.
In this tutorial I will not go deeply into detail about how and what CSS properties to use. You should have a look at the clipart image and think how you could recreate a certain part with CSS. You need to play around with the values and CSS properties to make an element look the way you want. You should use your browser’s developer console to change property values and see a live result. Some elements took me more time to realize because I had to do lots of adaptations until I was satisfied with the result. The most used properties when building CSS objects are probably border-radius, transform as well as sizing and positioning properties.
Creating the body
First of all let’s define some variables like the primary and secondary color and the border color. Next we begin adding CSS code to our .body element. This element should display the body of our walrus so basically the whole walrus but without legs, tail or head elements like eyes. As you can see on the clipart image the top part of the body is a bit like a halved sphere and then gets wider at the bottom. So one solution is to create a square for the body, then give it round borders and add pseudo-elements (:before and :after) to create the wider part at the bottom. Check out the image on the right to better understand how this can be done. To make the pseudo-elements skew you can use the transform property. This is the Stylus code I have for the body:
.body
border-radius 100px
width 250px
height 250px
background-color color-primary
position relative
&:after,&:before
width 200px
height 150px
background-color color-primary
display block
content ''
position absolute
bottom 0
left -10px
transform skew(-8deg, 0)
border-radius 50px
&:after
left auto
right -10px
transform skew(8deg, 0)
Creating the head
The head of our walrus contains two eyes with eyebrows, a nose and a mouth with two tusks. For the eyes we simply build two spheres and use the :before element to create a small black dot for the pupil. Using the :after pseudo-element we can then create a square, round off the borders and rotate it a bit using transform. And there we have an eyebrow.
The hair of our walrus can be simply created by setting a width and height as well as a position and rotation to each of the hairs.
For the nose we just create a rounded square, give it a black background and use a pseudo-element to also display a white shadow in the nose.
The mouth works in the same way. We just create a black square and set the border-radius for our top left and top right corner to a small value and for our bottom left and bottom right corners to a large value. That way we receive a smiling mouth.
The tusks are also just two squares with more border-radius on one side than on the other.
Positioning all the elements to the right spot is fairly simple, we just use absolute positioning and position an element pixel-precise to where we want.
Your Stylus code for the head should now look something like this:
.head
.hairs
position absolute
top 0
left 0
width 100%
.left
.hair
position absolute
width 5px
height 25px
background-color border-color
z-index -1
&:nth-of-type(1)
left 25px
top 14px
transform rotate(-35deg)
&:nth-of-type(2)
left: 15px
top: 17px
transform: rotate(-61deg)
&:nth-of-type(3)
left: 8px
top: 27px
transform: rotate(-86deg)
.right
.hair
position absolute
width 5px
height 25px
background-color border-color
z-index -1
&:nth-of-type(1)
right 25px
top 14px
transform rotate(30deg)
&:nth-of-type(2)
right 15px
top 17px
transform rotate(55deg)
&:nth-of-type(3)
right 8px
top 27px
transform rotate(76deg)
.eyes
.eye
background-color color-secondary
position absolute
border 3px solid border-color
&.left
left 65px
width 55px
height 60px
border-radius 60px
top -30px
&:before
position absolute
width 10px
height 10px
background-color border-color
border-radius 10px
left 50%
top 50%
content ''
&:after
position absolute
top -9px
left -5px
width 50px
height 10px
transform rotate(-15deg)
background-color border-color
content ''
border-bottom-left-radius 50px
border-bottom-right-radius 50px
&.right
right 65px
width 55px
height 55px
border-radius 50px
top -25px
&:before
position absolute
width 10px
height 10px
background-color border-color
border-radius 10px
left 30%
top 50%
content ''
&:after
position absolute
top -5px
right -5px
width 50px
height 10px
transform rotate(15deg)
background-color border-color
content ''
border-bottom-left-radius 50px
border-bottom-right-radius 50px
.nose
position absolute
top 55px
left calc(50% - 20px)
width 40px
height 20px
border-radius 30px
background-color border-color
&:before
position absolute
top 5px
left calc(50% - 7px)
content ''
background-color color-secondary
width 15px
height 3px
border-radius 15px
.mouth
position absolute
top 80px
z-index 5
left calc(50% - 50px)
width 100px
height 50px
background-color border-color
border-top-left-radius 15px
border-top-right-radius 15px
border-bottom-left-radius 90px
border-bottom-right-radius 90px
&:before
position absolute
content ''
background-color color-secondary
height 80px
width 22px
left 6px
border-top-left-radius 5px
border-top-right-radius 5px
border-bottom-left-radius 5px
border-bottom-right-radius 50px
&:after
position absolute
content ''
background-color color-secondary
height 80px
width 22px
right 6px
border-top-left-radius 5px
border-top-right-radius 5px
border-bottom-left-radius 50px
border-bottom-right-radius 5px
Creating the legs
Creating the legs/fins of our walrus is quite simple. Just like before we define a width and height, set a background-color and adapt the border-radius for both our left and right leg separately. Then we just rotate the legs so that they look like on the clipart image.
Your Stylus code for the legs/fins should look like this:
.legs
.leg
background-color color-primary
width 50px
height 70px
position absolute
bottom -30px
border-top 0
&.left
left -30px
border-bottom-right-radius 50px
border-bottom-left-radius 20px
border-top-right-radius 40px
border-top-left-radius 7px
transform rotate(55deg)
&.right
right -30px
border-bottom-right-radius 20px
border-bottom-left-radius 50px
border-top-right-radius 7px
border-top-left-radius 40px
transform rotate(-55deg)
Creating the tail fin
The tail of our walrus consists of one surrounding “tail” container and two “fin” elements. We use the “tail” container to position the tail at the right location. Then we can use the :after element to create a rounded square and rotate it until it sticks up a bit into the sky. Then we can create two rounded squares for our fins and rotate and position them corresponding to the clipart image.
The Stylus code for your tail fin could look like this:
.tail
position absolute
left -80px
bottom 120px
z-index -1
transform rotate(15deg)
&:after
position absolute
left 35px
top 4px
background-color #7a5d4d
width 100px
height 50px
transform rotate(26deg)
border-radius 90px
content ''
.fin
position absolute
background-color darken(color-primary,15%)
width 50px
height 50px
border-top-left-radius 50px
border-top-right-radius 5px
border-bottom-left-radius 50px
border-bottom-right-radius 5px
&:nth-of-type(1)
left 21px
bottom -12px
transform rotate(15deg)
&:nth-of-type(2)
transform rotate(45deg)
Bringing it to life – Animating the walrus
Your walrus should now look pretty cool already. You can add further improvements, add some more details or change some elements according to your liking. The bring our walrus to life we will now add some CSS animations to move elements like the eyes, eyebrows and the whole body. Once you have understood how to add animations to elements you can easily add more animations and even create a little story, for example the walrus watching a fish swimming by.
Let’s begin by making the walrus breath. This is the most important step when bringing it to life. To make it breath I chose to simply scale the walrus on the y-axis. The whole walrus scales up by 3 percent within two seconds and then scales back down to its original size. This makes it look like the walrus is actually breathing.
The code for this animation is simple. We just set the scaleY property to 1 at 0% and then set it to 1.03 at 50% (after 1 second). Also we set the transform-origin to center bottom in order for the scaling to take place to the top. The bottom is fixed and the walrus only scales up to the top.
@keyframes breath
0%
transform scaleY(1)
transform-origin center bottom
50%
transform scaleY(1.03)
transform-origin center bottom
To call the animation code we just add the animation property to the element we would like to be animated. In this case we can for example add it to the body of the walrus. The code for .body would then look like this:
animation breath 2s infinite ease-in-out
For the eye blinking all I did was add an animation that changes the background-color from white to black and back.
The eyebrow movement is done by using translateY to move the eyebrow up and down (faster than using top or bottom) as well as rotate to rotate the eyebrow a bit when moving up.
The pupil movement was also done using translate. I just moved the pupils around and using alternate inside the animation property I made sure the animation is also played backwards every odd time. That way the animation seems a bit more random.
This was my short tutorial on creating an animated pure CSS walrus. Have a look at the code on GitHub and try to use the concepts we talked about to build your own pure CSS object. I would love to see your creations so feel free to drop a comment with a link to your object (doesn’t have to be an animal). Thank you for reading!
