Using CSS, you can go from drawing simple boxes to creating masterpieces like the Mona Lisa—pretty amazing, right?
Hello friends, today I am back with a CSS art tutorial. If you are new to CSS art, here’s a quick intro. CSS art is a type of design technique where pictures are drawn using only HTML elements and CSS code.
So today, let us have some fun and create a pig face using HTML and CSS. Before starting the tutorial, I want to tell you that CSS art is not used in practice. The tutorial is created to have fun with CSS properties. So let us discover something new about CSS properties.
Table of Content
Step 1: Set Up the Basic Structure
To create a pig face, you can start with simple HTML. This includes a DOCTYPE declaration, defining head and body sections, and using meta tags.
If you have any difficulty, please see the "How to structure an HTML project" tutorial.
Step 2: Create the Pig Structure
To create a pig face, we need an HTML element. CSS will only give us the style, and HTML will give it structure.
<div class="pig">
<!-- Pig ears -->
<div class="ear left"></div>
<div class="ear right"></div>
<!-- Pig eyes -->
<div class="eye left"></div>
<div class="eye right"></div>
<!-- Pig nose -->
<div class="nose"></div>
</div>Here's a breakdown of the main elements and their purposes:
Main container Setup
<div class="pig">So let us start by creating a div element with the class name pig. This element will act as the main container for the entire pig face.
Ear and Eye Class Setup
<div class="ear left"></div>
<div class="ear right"></div>It is not possible to create a pig face using just one element, because the face has different parts. So I will create a div element for each part of my pig face. We will create div elements for two ears, two eyes, and a nose inside the main container.
<div class="eye left"></div>
<div class="eye right"></div>We will create two ears using the classes ear left and ear right, placing them on either side of the top of the head. In the same way, we will set the class for the two eyes.
Nose Class Setup
<div class="nose"></div>Finally, we will add the nose, which is the centerpiece of our pig.
Now let's look into drawing the pig. We'll break this down into multiple steps. First, we'll draw the head, then the ear, the eye, and finally the nose of the pig.
Step 3: Document Body Styling
At the beginning of the CSS, we will style the document body. First, we set the height of the document body to 100%, which will cause the body to occupy the entire height of the viewport. We then used the flexbox method to center the elements inside the body.
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ebaeb5;
}Flexbox is a popular method used to easily center elements. To implement this method, we will change the body to a flex container. Then we will set the justify-content CSS property to center, which will center the content inside the body horizontally. In the same way, the CSS align-item property centers content vertically.
Finally, we will set a soft pink background for the page.
Step 4: Pig head Styling
We will give the main container the shape of the head. So the height and width are set using CSS, taking the pig class of the main container. We set the main content height and width to 300 pixels and used a pink color for the background. It will now look like a pink box, and we will use the CSS border-radius property to make it rounded.
.pig {
width: 300px;
height: 300px;
background: #ffd2d9;
border-radius: 50%;
margin: 80px auto;
position: relative;
animation: float ease-in-out 1.5s infinite;
}Finally, we will add a bubble animation called float. The animation is set to infinite and its duration is given as 1.5 seconds.
Pig Animation in HTML Editor
Below is a live demo to help you see how the pig look. Click "Run Code" to see the pig animation live.
Step 5: Creating CSS Pig Ears
Next, let us shape the ears. Since we created two elements with the class name .ear to form the ears, we can style them together easily using the same class.
The Base Ear Style
.ear {
height: 128px;
width: 80px;
position: absolute;
top: 30px;
background: #f599a3;
box-shadow: -2px 2px 8px rgba(90, 0, 0, 0.25),
0 -1px 4px rgba(0, 0, 0, 0.5) inset;
}We will define the basic shape of the ear with the .ear class. First, we will set it to 128 pixels tall and 80 pixels wide. Then setting position: absolute will allow you to position the ear exactly where you want it on the pig head.
Positioning Left and Right Ears
Now we will place the ears on either side of the head. We will use the same values to place the two ears in their correct positions. Here we have moved the right ear 15 pixels to the right and the left ear 15 pixels to the left.
.ear.left {
left: -15px;
border-radius: 250% 50% 250% 20%;
}
.ear.right {
right: -15px;
border-radius: 50% 250% 20% 250%;
}We will use the border-radius CSS property to create the shape of the ears. There are still many people who have difficulty determining the value of the border-radius property.
The border radius values go clockwise, starting from the top left. Here we have set different values for the border radius property for the two ears.
Step 6: Creating CSS Pig Eyes
In this step we will create two black eyes with white highlights. Here is what each part does.
The Basic Eye Shape
.eye {
height: 24px;
width: 24px;
position: absolute;
top: 128px;
background: #000;
border-radius: 50%;
}This CSS code makes a black circle 24 pixels wide and tall. The border-radius: 50% turns the square into a perfect circle. The position: absolute lets you place it exactly where you want on the page.
Positioning Left and Right Eyes
.eye.right {
right: 24%;
}
.eye.left {
left: 24%;
}These CSS properties define the position of each eye. The right eye sits 24% from the right edge. The left eye sits 24% from the left edge. This way, you will get an equal gap on both sides.
The Eye Highlight
.eye:after {
height: 5px;
width: 5px;
position: absolute;
top: 5px;
right: 1px;
border-radius: 100%;
box-shadow: 0 4px 8px #fff inset;
content: '';
background: #fff;
}The :after pseudo-element adds a small white circle inside each eye. This creates a shiny highlight that makes the eyes look alive. The box-shadow with inset creates a subtle glow effect inside the white dot that adds depth.
Step 7: Creating CSS Pig Nose
We will keep the width high to make the nose look wider. One element is not enough to create the nose and two nostrils. So we will use pseudo-elements.
The Basic Nose Shape
Here the nose will be given a height of 63px and a width of 96px. Then we will adjust the four corners using CSS border-radius to give it a nose shape. The background of the nose will be a light pink color (hex code #f599a3), which matches the color of the head. Instead of keeping the nose flat, we will use a box-shadow.
.nose {
height: 63px;
width: 96px;
position: absolute;
top: 60%;
left: 36%;
border-radius: 80% 80% 70% 70%;
box-shadow: 0 4px 6px rgba(90, 0, 0, 0.5), 0 -1px #fff;
background: #f599a3;
}The Basic Nostril Shape
The coolest part of the pig nose is two black nostrils, which we will create using pseudo-elements. We set the height and width of the hole to 16 pixels and used CSS border-radius to give it a rounded shape. We will also set the background color of both holes to black.
.nose:before, .nose:after {
height: 16px;
width: 16px;
position: absolute;
top: calc(300px * 0.08);
border-radius: 100%;
content: '';
background: #000;
}Positioning Left and Right Nostrils
Next, we will place the holes 28 pixels to the right and left. Here our pig drawing is complete.
.nose:before {
left: 28px;
}
.nose:after {
right: 28px;
}Step 8: Creating CSS Pig Animation
Now it's time to create the keyframes for the animation. Here we'll create a bobble animation, which will make the pig head appear to be floating in the air like a balloon.
To do this animation, we'll set the CSS transform property translateY(0) to 0% when the keyframe is at 0%. This means that the element will remain in its original position.
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(1em);
}
100% {
transform: translateY(0);
}
}
When the keyframe reaches 50%, we'll set the translate Y-axis value to 1em, which will move the element up.
And finally, when the keyframe reaches 100%, we'll set the CSS transform property translateY(0) to 0%, which will move the element back to its original position.
Final Thoughts and Conclusion
We have covered a lot in this article, so let us quickly recap what you have learned.
- How to create a pig with HTML
- How to shape it using CSS
- How to create a pig ears, eyes, and nose with CSS
- How to make a bubble animation
With these foundations, you can create any type of CSS Art.
Thank you for reading the entire article. I hope you gained some insight into CSS pig art. For more content like this, you can follow me on YouTube.
Happy Coding!
0 Comments