In today's web design world, you can't impress anyone by just making boxes and textures. So I want you to learn something more interesting. Which will catch people's eyes. For that, the topic of our tutorial will be CSS Illustration. We will create a complete elephant illustration using only DIV, pseudo-elements, border-radius, transform, and a little animation. No SVG or image will be used to create this illustration.
Such projects are usually of no use in the practical world. However, here we will learn to use CSS properties in the right place. For example, where to use the pseudo-elements. Or to create a cartoon look with border-radius and box-shadow. Skip the boring topics like learning, let's have fun with some CSS properties.
Oh! You haven't been told before, we created a fox cartoon illustration before this too. If you're interested, you can check that out too.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can watch the video down below.
HTML:
Let's start with the HTML code first. In HTML, we will only use the DIV tag. We will give each DIV tag a class name. The class names will represent the body parts of the elephant character. So that we can identify each part separately while writing our CSS properties.
But we will not only use the div tag for the elephant body parts. We use the div tag for the elephant shadow. Using a shadow will make the elephant look a little more realistic.
<div class="elephant">
<div class="head"></div>
<div class="ear left"></div>
<div class="ear right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
<div class="trunk"></div>
<div class="body"></div>
<div class="leg"></div>
<div class="shadow"></div>
</div>
The class names that we have used to style each part of the elephant are shown to you in the table below.
| Class Name | Description |
|---|---|
| .elephant | This is the main container, which contains the body parts of the elephant and its shadow. |
| .head | These are two separate elements. Which will be useful to create the elephant ears. |
| .ear.left and .ear.right | The fox ears. The ears are on either side of the head, making the fox face stand out more. |
| .eye.left and .eye.right | Like the ears, we have used two separate elements to create the eyes. The position of the eyes will be in the head. |
| .nose | If you have seen an elephant, then you know how big the elephant's nose is. Here we will use this class to create a big nose for the elephant. And we animate the nose. |
| .body | Using this class, we will create the body. |
| .leg | We are trying to create the complete character of the elephant here, so we cannot leave anything out. Using these classes, we will create the elephant legs. |
| .shadow | Finally, a shadow that makes it look like the elephant is standing. |
StyleSheet (CSS):
Next, we style the elements created by HTML to give them shape and add animation using CSS.
Setting up the body:Moving on to CSS, First of all, we need to center our main container. For that we will use the FLEXBOX METHOD in the document body. Next, we set a pleasant light-orange color with hex code #fef6eb as a background for our document body. Here we have set a minimum height for the container.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 70vh;
background: #fef6eb;
}First we centered the document body. Now we need to position all the elements inside the main container. We have already learned that flexbox method is the best way to center multiple elements. So here we are using flexbox for the second time.
.elephant {
display: flex;
justify-content: center;
justify-items: center;
position: relative;
}In the next step, we set dimensions for the head container as 300*300px. We add a box-shadow to the container, so it gives our elephant character a cartoon look. Elephants are usually gray in color, so we will use a light gray color here. We will give all the parts of the elephant a black border. We are using border radius for that.
.head {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: #d3e1ea;
z-index: 5;
border: 10px solid #093c45;
box-shadow: inset 6px 5px 0 1px #fff, inset -4px -4px 0 4px #9fc6cd;
}We will keep the elephant ears large. Each ear will be set to two 250*250px with a light blue-gray background. A dark 10px border and inset shadow will make the ears pop more on the page.
We will use border-radius to keep the left and right ears distinct. To create the inner ear shape, a pink oval will be added to the two ears :after pseudo-elements. These inner ear shapes will be kept small (180*180px). The two ears, and the shape inside the ears, will be given an inverted border-radius value. Together, the main ear and the inner pink part will create a nice cartoon effect.
.ear {
height: 250px;
width: 250px;
top: 6px;
background: #d3e1ea;
border: 10px solid #093c45;
box-shadow: inset 0px 4px 0 1px #fff,
inset 0px -9px 0 1px #9fc6cd;
z-index: 4;
}
.ear.left {
border-radius: 40% 50%;
}
.ear.right {
border-radius: 50% 40%;
}
.ear.left:after,
.ear.right:after {
content: "";
position: absolute;
height: 180px;
width: 180px;
background: #fa9698;
border-radius: 40% 50%;
top: 45px;
}
.ear.left:after {
border-radius: 40% 50%;
left: 67px;
}
.ear.right:after {
border-radius: 50% 40%;
right: 67px;
}Now, we will create two small round shapes for the elephant eyes. The eyes are set to 25*25px and a deep-blue color is used. The left eye is placed 180px from the left, and the right eye is placed the same distance from the right. To give life to the eyes, we will add a small white dot to :after pseudo-elements. Below each eye, add a soft pink oval using the :Before pseudo-elements. This will be placed under the eyes on the outside, like a blush.
.eye {
height: 25px;
width: 25px;
top: 150px;
border-radius: 50%;
background: #093c45;
position: absolute;
z-index: 6;
}
.eye.left {
left: 180px;
}
.eye.right {
right: 180px;
}
.eye:after {
content: "";
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
background: #fff;
top: 2px;
left: 4px;
}
.eye:before {
content: "";
position: absolute;
height: 25px;
width: 35px;
border-radius: 50%;
background: #fa9698;
top: 40px;
}
.eye.left:before {
left: -20px;
}
.eye.right:before {
right: -20px;
}The elephant i saw at the zoo had a very big trunk. Here, we set the height of the elephant trunk to 150px. The blue-gray color blends into the head. The bottom edge will be curved using a border radius so that the trunk looks natural. We only used animation on the trunk.
.trunk {
width: 80px;
height: 150px;
background: #d3e1ea;
position: absolute;
z-index: 6;
border-left: 10px solid #093c45;
border-right: 10px solid #093c45;
border-bottom: 10px solid #093c45;
top: 230px;
box-shadow: inset -5px -4px 0 1px #fff,
0px 3px 0 3px #9fc6cd;
border-radius: 0% 0% 30% 100%;
animation: long ease-in-out 3s infinite;
}Keyframes are where the magic happens. We need Keyframes to make the elephant trunk smaller and larger. For this, let us add height 100px auto 0% , highest 200px at 40% and height 100px at 100%.
@keyframes long {
0% {
height: 100px;
}
40% {
height: 200px;
}
100% {
height: 100px;
}
}The elephant body will be set to 300*270px. It will be the same light gray-blue color as the head and ears. Use a negative Z index to create the elephant body behind the head. Then, smooth the body using a border radius and try to highlight the shape of the body using a box shadow.
Styling the elephant nose:.body {
width: 300px;
height: 270px;
background: #d3e1ea;
border: 10px solid #093c45;
position: absolute;
z-index: -1;
top: 200px;
border-radius: 45% 45% 30% 30%;
box-shadow: inset -11px 18px 0px 0px #9fc6cd;
}First we will not make the elephant legs. We are using this element to cover the lower part of the body a little. Then use the pseudo-elements to create two legs of the elephant.
.leg {
width: 125px;
height: 30px;
background: #fa9698;
position: absolute;
top: 450px;
z-index: 5;
border-left: 10px solid #093c45;
border-right: 10px solid #093c45;
border-top: 10px solid #093c45;
}
.leg:after,
.leg:before {
width: 80px;
height: 53px;
position: absolute;
content: "";
top: -20px;
background: #d3e1ea;
border-left: 10px solid #093c45;
border-right: 10px solid #093c45;
border-bottom: 10px solid #093c45;
border-radius: 0% 0% 40% 40%;
box-shadow: inset 0px -8px 0px 0px #9fc6cd;
}
.leg:before {
left: -50px;
}
.leg:after {
right: -50px;
}Create this oval shadow. Then set the bottom negative 141px to position it under the elephant feet. The background color of this will be pink. We use a negative Z index to position the shadow behind the feet and body.
.shadow {
width: 400px;
height: 53px;
bottom: -241px;
border-radius: 50%;
z-index: -2;
position: absolute;
background: #fa9698;
}And mission complete. If you have any queries, suggestions or feedback you can comment below. I hope you guys enjoyed this tutorial. You can stay updated with the latest tutorials by subscribing to us on YouTube. Happy Coding!
Post a Comment