Hello friends, today I am back with CSS art. If you don't know about CSS art, then let me tell you a little bit. CSS Art is a type of design technique where images are drawn using only HTML elements and CSS code without using any images.
Earlier, we had created CSS art of the elephant and fox. In today's tutorial, we will draw a pig face. There is no JavaScript, no library, just HTML and CSS.
Video Tutorial:
HTML:
Let us start by creating a div element with the 'pig' class. This element will be the main container for the entire Pig face. Inside this element, different parts are placed, such as ears, eyes, and a nose.
Each part will be given a separate DIV with a different class so that it can be easily designed with CSS. We will create two ears with the classes 'ear left' and 'ear right', which are placed on either side of the top of the pig head.
'eye left' and 'eye right' are the two eyes, which we will usually make circular.
The most important part is the 'nose'. We will usually make it in the shape of an oval, so that two nostrils can be placed inside.
This HTML structure is just creating a skeleton, and the real beauty will come out by defining the color, size, and position with CSS.
<div class="pig">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
<div class="nose"></div>
</div>StyleSheet (CSS):
Centering the Pig Face:Moving on to CSS code. Let us start by setting a pleasant shade of blue (Hex-code: #EBAEB5) as a background to our page. The first thing we want to do is centre our pig face. We'll use FlexLayout for centering. You can see a tutorial on using flex to center any text, image, or HTML element here.
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ebaeb5;
}This '.pig' CSS block is creating the base of our pig head. Here we create a circle of a certain size with 300*300px.
And the background is given a light pink color that looks like the skin of a pig. Due to the use of border radius, it has become a perfect round.
For centering, we use the margin auto method. We have discussed the margin auto method earlier. The position 'relative' is given so that the separate DIV inside the ears, eyes and nose can be placed in the correct place using the 'absolute' position.
Finally, animation has been added, which will give a slight floating movement to the pig head. Using this animation will make the whole art look more alive. As if the pig's face is swinging in the wind.
.pig {
width: 300px;
height: 300px;
background: #ffd2d9;
border-radius: 50%;
margin: 80px auto;
position: relative;
animation: float ease-in-out 1.5s infinite;
}We want the pig ears to hang down. So we set the ears to 128×80pixels. Using position and top will position the ears correctly inside the '.pig' container. The background color is a light pink.
The '.ear.left' part has 'left: -15px' so that the ear sticks out a little to the left of the head. The border radius has curved the shape of the ear so that it looks like a real pig's ear. The box shadow has given it a slight 3D effect. Similarly, the '.ear.right' ear has 'right: -15px', which places it on the right.
.ear {
height: 128px;
width: 80px;
position: absolute;
top: 30px;
background: #f599a3;
}
.ear.left {
left: -15px;
border-radius: 250% 50% 250% 20%;
box-shadow: -2px 2px 8px rgba(90, 0, 0, 0.25), 0 -1px 4px rgba(0, 0, 0, 0.5) inset;
}
.ear.right {
right: -15px;
border-radius: 50% 250% 20% 250%;
box-shadow: -2px 2px 8px rgba(90, 0, 0, 0.25), 0 -1px 4px rgba(0, 0, 0, 0.5) inset;
}You will need to make a 24x24px black round base, which will fit the pig container to place it. To make the view stand out on both sides, we used 24% ‘left’ for the left processing and 24% ‘right’ for the representative, so that the reflections on both sides of the head are nicely represented.
They are perfectly rounded with a border radius so that they look like soft, rounded sparkles rather than pixel-sharp spots. The look is brought to life with a small white highlight, which I will create with a ':after' pseudo-element.
There is a small 5*5px white circle and an inset box shadow to make it look like the reveal is glowing from within.
.eye {
height: 24px;
width: 24px;
position: absolute;
top: 128px;
background: #000;
}
.eye.right {
right: 24%;
border-radius: 50%;
}
.eye.left {
left: 24%;
border-radius: 50%;
}
.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;
}We will keep the height and width separate to make the nose look a little longer. The four corners are adjusted using border radius to give it a cute cartoon-style nose shape. The background will be a light pink color, which matches the color of the head but still stands out.
We will use a box shadow to bring the nose to life instead of just keeping it flat.
Now the cutest part of the pig nose is the two black holes. These are created with ':before' and ':after'. Both are very small round black holes, one on the left, one on the right.
.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;
}
.nose:before, .nose:after {
height: 16px;
width: 16px;
position: absolute;
top: calc(300px * 0.08);
border-radius: 100%;
content: '';
background: #000;
}
.nose:before {
left: 28px;
}
.nose:after {
right: 28px;
}Using 'keyframes' we will make the pig head float. Imagine a pink balloon floating in the air, and move the entire '.pig' div in that way.
The position will stay normal at 0%, we will move it down a bit at 50% by changing the translateY to 1em, and finally we will move it back up again at 100%.
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(1em);
}
100% {
transform: translateY(0);
}
}
Are you interested in CSS art? We have drawn pictures of the elephant, fox etc. using only CSS properties. These tutorials will entertain you.
إرسال تعليق