This content originally appeared on DEV Community and was authored by Jatin Sharma
In this article, we are going to make a Mickey mouse. We will only need CSS to do this and also we are not going to make a bunch of HTML elements, we will avoid that stuff. First, let's look at what are we building.
Preview
Wrapper Container
As I said before that we don't need a bunch of HTML elements or tags, we just need one. It will be a wrapper or a container for all the shapes we are going to build.
<div class="mickey_mouse"></div>
Applying the following CSS to the .mickey_mouse class-
.mickey_mouse {
width: 100vw;
height: 100vh;
background: #a30000;
}
How we are going to make shapes?
So now the question is we are not using HTML tags to how we are going to make shapes such as face, eyes and etc. So the answer is radial-gradient we are going to apply this CSS property to our .mickey_mouse(wrapper-container).
radial-gradient(width height at pos-x-axis pos-y-axis, color1 amount%, color2 amount%);
This property will apply to the background-image. For further learning about this property Click Here
Now let's look at how background-image will look like in code.
background-image:
/* face-middle */
radial-gradient( 70px 45px at 50% 64%, #ffe3bf 50%, transparent 50% ),
/* smile-curve */
radial-gradient(70px 45px at 50% 65%, black 50%, transparent 50%),
/* tounge */
radial-gradient(12px 12px at 49% 189px, red 50%, transparent 50%),
/* tounge */
radial-gradient(12px 12px at 52% 189px, red 50%, transparent 50%),
/* mouth */
radial-gradient(58px 58px at 50% 170px, black 50%, transparent 50%),
/* left-eye */
radial-gradient(12px 20px at 110px 114px, #222 50%, transparent 50%),
/* right-eye */
radial-gradient(12px 20px at 140px 114px, #222 50%, transparent 50%),
/* nose-white */
radial-gradient(14px 2px at 125px 130px, white 50%, transparent 50%),
/* nose */
radial-gradient(26px 14px at 125px 134px, black 50%, transparent 50%),
/* left-eye-white */
radial-gradient(22px 38px at 110px 106px, white 50%, transparent 50%),
/* right-eye-white */
radial-gradient(22px 38px at 140px 106px, white 50%, transparent 50%),
/* left-eye-skin-color */
radial-gradient(60px 90px at 100px 106px, #ffe3bf 50%, transparent 50%),
/* right-eye-skin-color */
radial-gradient(60px 90px at 150px 106px, #ffe3bf 50%, transparent 50%),
/* left-ear */
radial-gradient(90px 90px at 24% 20%, black 50%, transparent 50%),
/* right-ear */
radial-gradient(90px 90px at 76% 20%, black 50%, transparent 50%),
/* bottom-face */
radial-gradient(140px 94px at 50% 158px, #ffe3bf 50%, transparent 50%),
/* black hair on top, left, right */
radial-gradient(160px 160px at center, black 50%, transparent 50%);
As you can see there are more than one radial-gradient, it is because we need to make more than one shapes.
The order should be the same as shown in the code because if you change the order, then the other shape can appear at the top which we don't want. So, the topmost shape/property will always appear on top and the other shapes will be below it according to their order. You can understand it like z-index the topmost shape will have the highest z-index and the bottom property will have the lowest z-index.
Full CSS Code
* {
margin: 0;
padding: 0;
}
.mickey_mouse {
width: 100vw;
height: 100vh;
background: #a30000;
}
/* full face */
.mickey_mouse::before {
position: absolute;
content: "";
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 250px;
background-image:
/* face-middle */
radial-gradient( 70px 45px at 50% 64%, #ffe3bf 50%, transparent 50% ),
/* smile-curve */
radial-gradient(70px 45px at 50% 65%, black 50%, transparent 50%),
/* tounge */
radial-gradient(12px 12px at 49% 189px, red 50%, transparent 50%),
/* tounge */
radial-gradient(12px 12px at 52% 189px, red 50%, transparent 50%),
/* mouth */
radial-gradient(58px 58px at 50% 170px, black 50%, transparent 50%),
/* left-eye */
radial-gradient(12px 20px at 110px 114px, #222 50%, transparent 50%),
/* right-eye */
radial-gradient(12px 20px at 140px 114px, #222 50%, transparent 50%),
/* nose-white */
radial-gradient(14px 2px at 125px 130px, white 50%, transparent 50%),
/* nose */
radial-gradient(26px 14px at 125px 134px, black 50%, transparent 50%),
/* left-eye-white */
radial-gradient(22px 38px at 110px 106px, white 50%, transparent 50%),
/* right-eye-white */
radial-gradient(22px 38px at 140px 106px, white 50%, transparent 50%),
/* left-eye-skin-color */
radial-gradient(60px 90px at 100px 106px, #ffe3bf 50%, transparent 50%),
/* right-eye-skin-color */
radial-gradient(60px 90px at 150px 106px, #ffe3bf 50%, transparent 50%),
/* left-ear */
radial-gradient(90px 90px at 24% 20%, black 50%, transparent 50%),
/* right-ear */
radial-gradient(90px 90px at 76% 20%, black 50%, transparent 50%),
/* bottom-face */
radial-gradient(140px 94px at 50% 158px, #ffe3bf 50%, transparent 50%),
/* black hair on top, left, right */
radial-gradient(160px 160px at center, black 50%, transparent 50%);
}
Wrapping Up
This is it. Now you can make your own shapes with just only one div and via using radial-gradient. If you enjoyed this article then don't forget to press ❤️. If you have any queries or suggestions don't hesitate to drop them. See you.
You can extend your support by buying me a Coffee.😊👇
You might be interested in -
This content originally appeared on DEV Community and was authored by Jatin Sharma
Jatin Sharma | Sciencx (2021-12-22T06:15:00+00:00) Mickey Mouse with CSS only (one div). Retrieved from https://www.scien.cx/2021/12/22/mickey-mouse-with-css-only-one-div/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.