Select Page

CSS Character Fun: I made a sheep!

What Have I Been Reading?

Subscribe via Email

If you enjoy my ramblings, then you can sign up using your email address and get notified whenever I post!

Join 372 other subscribers

by | Nov 12, 2018

Hello all! So I thought I would take a little break from explaining HTML this week as I discovered something that was a lot of fun, and totally blew my mind. Pure CSS animation. Whaaaaaaaaaaat?!

CSS is a Cascading Style Sheet, it’s the pretty part of the web. HTML gives you your content, CSS beautifies it. Colours your background, your text and adds background images. That’s just the basics! So, while playing about with CSS and checking out freecodecamp’s section on it, I stumbled upon CSS animation.

My first issue with wrapping my head writing my own CSS animation was that I knew I wanted a small character to move across the screen, but how would I create that without simply adding an image? How would I create the character with only CSS? There are lots of blogs etc on it, but I simplified it for myself so I could start right at the basics. Set up your html boilerplate, and within the body create divs for each part of your character. I’ll use my sheep as an example. First, I set the background-color of the body to green (because grass is green, and he needs somewhere to bounce around). To make my sheep, I started with the “wool” body. I created a < div > tag with an id of “sheep” and within it created three more divs with the id’s wool, face and eyes. The wool was created using two shapes and rotating them. So I made a rectangle with rounded corners. I used this blog post to edit some of the original code, to get the shape I wanted “css-tricks.com/the-shapes-of-css/“.

The border radius rounds the corners, the width and height sets how “big” your sheep wool is and rotating it 20deg is achieved by using the transform CSS property. That gives us one slightly skewed, rounded corner rectangle, we want to create another so it gives the effect of bumpy sheep wool. So we have to use :before. This layers the two.

3DVt+WicQa2l9tU6MKr5Vw

#wool {

background: white;
width: 100px;
height: 100px;
position: relative;
text-align: center;
transform: rotate(20deg);
border-radius:30%; }

#wool:before {
content: “”;
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 100px;
background: white;
transform: rotate(135deg);
border-radius:30%;}

And we have our sheep wool! Now we want a face so he looks less like a little white blob, and a little more friendly. So, I selected the < div > tag I created earlier with the id “face”. The CSS looks similar to our wool, but we don’t need to use before because we only need one shape for his face!

1EWNVg0NS%Sip8EXrork4Q

 

 

#face{

background-color:black;border-radius:100%;
height:50px;
width:40px;position:absolute;
margin-top:30px;
margin-left:20px;}

 

 

And then we want some eyes so he can see where he is going. First I used the class “eyes” to make two, pink circles. Each was given an id so I could position them individually on his face.

i0LeFtcDQaqJ4QfTOGnduQ

 

.eyes {

border-radius:100%;
background-color: pink;
position:absolute;
margin-top:10px;
margin-left:10px;
height:5px;
width:5px;

}

#eye1 {

margin-left:20px;
}

 

Finally, he won’t be able to move anywhere without legs! I created two rectangles, similar to how we made the wool but not using “before” because the legs are separate and not layered.

 

ByGTH0EbTsSh%qkg3S0SVA

#leg1 {

background-color:black;
border-radius: 20%;
position:absolute;
display:inline-block;
height:40px;
width:15px;
margin-top:90px;
margin-left:0px;
}
#leg2 {

background-color:black;
border-radius: 20%;
position:absolute;
display:inline-block;
height:40px;
width:15px;
margin-top:0px;
margin-left:10px;
}

We need to add “transform:rotate(-15deg);” to these because the legs will appear as slightly askew otherwise. I just played about with the degrees until I was happy with the positioning, nothing technical there! I am still completely new to this so I am sure my code could use some tweaking to look a lot nicer, but I was proud as a first attempt! What should we call him? Leave a comment for me!

After I made this little guy I used some CSS animations to bounce him up and down across the screen, but I will leave this blog post here because that is a whole other post and took me forever to figure out, but it is doable! CSS animations look intimidating at first when you see new things like @keyframes and 50%{ transform:rotate(50deg);} in blocks and blocks of code, but just like anything it is simple once you break it down into chunks!