Now web design world, you can't impress anyone by just creating boxes and textures, so I want you to learn something more attractive that will catch everyone's eye. 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 pseudo-elements or create a cartoon look with border-radius and box-shadow. Skip the boring learning stuff, and let's have fun with some CSS features.
Oh! you haven't been told before, we create a fox cartoon image. If you're interested, you can check it out here.
HTML Editor:
HTML:
Let us start by writing 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 when coding 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 we have used to style each part of the elephant are shown to you in the table given 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 elephant created by HTML to give them shape and add animation using CSS pro.
Setting up the body:Now let us move on to coding in CSS. The first part of our task is to centralize the main container. For this we will apply the FLEXBOX METHOD in the document body. Thereafter, we set a pleasing light orange color with the hex code #fef6eb as the background for the document body. Also set here is 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 the 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;
}We will set the dimensions of the head container to be 300x300. To the container we add a box shadow so it provides our elephant character a cartoonish appearance. Elephants are generally considered to be grey in color, so light grey will be used in this case. There will be a black border around all the parts of the elephant which we will implement using border radius.
.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 250x250 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 (180x180). 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 25x25 and a deep blue color is used. The left eye is placed 180 pixels away from the left side and the same distance from the right eye. 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. It will be applied like blush on the outside under the eyes.
.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 trunk of the elephant i saw in the zoo was big, so here we set the height to 150px. The 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 animation magic happens. We need @keyframes to scale the elephant's trunk from small to large. For this let us add height 100px auto 0%, max 200px 40% and height 100px 100%.
@keyframes long {
0% {
height: 100px;
}
40% {
height: 200px;
}
100% {
height: 100px;
}
}The elephant body will be set to 300x270. 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 create elephant legs. We are using this element to cover the lower part of the body a little. Then create the elephant's two legs using pseudo-elements.
.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 place the bottom negative 14px under the elephant legs. Its background color would 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;
}Mission Complete! If you have any queries, then you can comment below. I hope you enjoyed this tutorial and please subscribe to my yt channel to stay updated. Code on and have fun!
Post a Comment