Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Fun front-end CSS effects – imitation Disney Mickey Hat

I believe everyone is familiar with this picture. The Mickey hat, a representative figure of Disney, once sold well in the Store of Disney Town as the opening commodity. We, who were party B at that time, gave it to them when we attended the training.

So without further ado, as usual, let’s draw it in CSS.

1. The render

Start by drawing the main part of the hat: think of the hat as an irregular ‘oval’. Then it is easy to think of a scheme to draw a square, by setting the arc of the border to get the ellipse of the main part of the hat. The following code

div{
    width: 200px;
    height: 200px;
    border-radius: 0 100% 0 70% ;
    background: #222;
}
Copy the code

Sets the parent container div to be full-screen centered. (Obsessive compulsive disorder)

 div{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}
Copy the code

So, the main part of the hat appears. Div {transform: rotate(-45deg); transform: rotate(-45deg); }

Fill in the brim seam with a lighter color designated “border”.

div{
     border-bottom: 7px solid #3e3e3e; 
     border-left: 7px solid #3e3e3e;
}
Copy the code

2. Add ears to the hat

Mickey’s ears are very round and can be set to two circles here. Then place them on the corresponding sides.

div:before, div:after { width: 110px; height: 110px; top: -102px; left: 29px; background: #333; border-radius: 50%; box-shadow: -4px 4px 0 4px #222; // Shadow the ears to create a more three-dimensional shadow effect. } div:after { top: 56px; left: 192px; }Copy the code

3. Paint the center of the hat

Due to various reasons (don’t ask, ask is afraid of legal affairs, just don’t admit is not fine technology), the effect of the middle picture can only be done similar. The following code

box-shadow: -4px 4px 0 4px #000, // Hat right ear shadow -144px -45px 0-44px #222, // mouse head left ear -115px -15px 0-44px #222, // Mouse head right ear -142px-22px 0-53px #222, // mouse head left eye spot -138px-18px 0-53px #222, // Mouse head right eye spot -143px-17px 0-54px white, // Mouse nose tip light spot -144px -16px 0-51px #222, // Mouse nose background color -142px -23px 0-50px white, // Mouse nose left eye background color -137px -18px 0-50px white, // Right eye background color of mouse head -151px -9px 0-54px #e95b4f, // tongue color of mouse head -150px -10px 0-52px #222, // mouth of mouse head -142px -18px 0-40px #d3b579, // Mouse head big face plate -141px -19px 0-28px white, // mouse head small circle shading -141px -18px 0-11px #e95b4f; // Mouse head big face plate -141px -19px 0-28px #e95b4f; // Large circle shading after mouseCopy the code

Let go of border-radius and you can see the effect of box-shadow in the picture below. It looks a bit like Jerry, haha.

Border-radius: 50% turn all patterns into prototypes.

Close the whole part of the hat and add the shadow effect to get the image below

div{ background-image: Radial -gradient(circle at 170px 220px,rgba(255,255,255, 255,0) 70%,rgba(255,255,255,0.15) 90%),radial-gradient(circle at 50px  80px,transparent 60%,#000 90%); box-shadow: -7px 7px 6px -2px rgb(0 0 0 / 30%); }Copy the code

Above, a copy of jerry’s brand “Mickey hat” is complete.