A fun tutorial this time round! I am going to teach you how to draw Pokemon characters with CSS and HTML. We will draw a Pokeball, Charmander, Bulbasuar and Squirtle using pure CSS and HTML. So this is going to be a fairly long but I think very rewarding tutorial (how could it not be when you end up with Pokemon characters!) We may even chuck in a little animation at the end just to make it even more fun you can see what we end up with here. So let’s not blather on any longer and get stuck in.
Firstly let’s put everything in a container and just set it out so we have a nice area to work with and it sits nicely in the middle of your test page, we will also set a background colour on the body otherwise we won’t see the white parts of your Pokeball.
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
#container {
width: 715px;
height: 500px;
margin: 0 auto;
position: relative;
}
Pokeball
We will start with the easiest one the Pokeball itself. The HTML mark up is very straight forward we simply put in a div with the id of pokeball and then inside that I have put another div with the class of pokeball-details.
Most CSS drawings are simply shapes made up with simple circles and shapes which we use border-radius for more than anything and once you get the hang of that and positioning your elements you are virtually good to go with layering and building whatever you like!
Let’s start with some simple code to give us the white part of our Pokeball, it first starts as a simple white square:
#pokeball {
width: 10em;
height: 10em;
background-color: #fff;
}
Then we just add a border radius of 50% to make it circular and we will also add relative positioning and hide the overflow, it will be apparent why in just a minute. Your CSS now looks like this:
#pokeball {
width: 10em;
height: 10em;
background-color: #fff;
border-radius: 50%;
overflow: hidden;
}
Now to add the red half we use the CSS3 pseudo element ::before. We put the content to be empty and we will give it the same width as the white circle but only half the height as we only need it to be half of the ball. We add border-radius again but only to the top left and top right as we need this to be a semi-circle. The rest is fairly obvious but we give it a background colour of red and absolutely position it:
#pokeball::before {
content: '';
background-color: red;
border-radius: 5em 5em 0 0;
width: 10em;
height: 5em;
position: absolute;
}
It is now taking shape. Now to style the pokeball-details div so that we can get the middle detail parts in there. To get the simple grey line through the middle is quit straight forward we give it the same width a smaller height and the grey background colour and position it to the middle of the ball:
#pokeball .pokeball-details {
width: 10em;
height: 1em;
background-color: #333;
position: absolute;
top: 4.5em;
}
To add the button thingy in the middle we use pseudo elements again firstly to get the grey circle part we use ::before again. Simply create a grey square using an equal width and height of 3.5em and the same background colour you gave the pokeball-details (#333). Guess what no add border radius of 50% again to make a full circle and then we absolutely position that to be in the center:
#pokeball .pokeball-details::before {
content: '';
width: 3.5em;
height: 3.5em;
border-radius: 50%;
background-color: #333;
position: absolute;
top: -1.25em;
left: 3.25em;
z-index: 200;
}
Nearly there! Now using the ::after pseudo element we can get the white button thingy bit in place (if anyone knows what that is actually called do let me know). It is not much different to the ::before part other than the colour and the size and obviously positioned slightly differently, oh and we add the z-index for it to sit above:
#pokeball .pokeball-details::after {
content: '';
width: 2.4em;
height: 2.4em;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: -0.65em;
left: 3.80em;
margin: 0 auto;
z-index: 250;
}
That’s it you now have a pokeball! I add a little shazam to it in the demo, I delve into animation briefly later on but you can check out the source files to see how i do it.
Charmander
Charmander in pure HTML and CSS is a little bit trickier than the Pokeball, but the principles and styling techniques are still virtually the same, there are just a few more parts to piece together.
For the HTML some people might do this a little different but I have split my parts up into arms, feet, body, tail and flame. The body contains further parts within it which are eyes, pupils, nostrils, mouth and belly. The flame also has an inner flame.
Your HTML markup will look like this:
<div id="charmander">
<div id="arms"></div>
<div id="feet"></div>
<div id="body">
<div id="eyes"></div>
<div id="pupils"></div>
<div id="nostrils"></div>
<div id="mouth"></div>
<div id="belly"></div>
</div>
<div id="tail"></div>
<div id="flame">
<div id="inner-flame"></div>
</div>
</div>
So let’s get to styling! First some basics just to give it some width and height (you don’t have to it just helps me know it’s contained) and position relative for the same reasons as the pokeball and I have floated it as I am going to float our other characters next to each other.
#charmander {
position: relative;
width: 10em;
height: 12em;
float: left;
}
Next Charmander’s body, this is pretty straight forward we give it a rectangular shape and again of course using border radius again we give it an arc at the top along with the positioning of relative so we can absolutely position parts within it and obviously the colour:
#charmander #body {
width: 8em;
height: 13em;
background-color: #e88923;
border-radius: 5em 5em 0 0;
z-index: 150;
position: relative;
}
Let’s add his little feet. We will use the ::before and ::after elements again ::before for one foot and ::after for the other. Again nothing special here just an empty content, a square and then border radius to shape it and the colour, then we just position them where they need to go:
#charmander #feet::before {
content: '';
width: 2em;
height: 2em;
background-color: #e88923;
border-radius: 0 0 1em 1em;
position: absolute;
top: 12em;
}
#charmander #feet::after {
content: '';
width: 2em;
height: 2em;
background-color: #e88923;
border-radius: 0 0 1em 1em;
position: absolute;
top: 12em;
left: 6em;
}
Following almost identical styles we have the whites of the eyes. Only difference being colours used, amount of border radius to make full circles and obviously the positioning:
#charmander #eyes::before {
content: '';
width: 1.5em;
height: 1.5em;
background-color: #fff;
border-radius: 1em;
position: absolute;
top: 2em;
left: 1em;
}
#charmander #eyes::after {
content: '';
width: 1.5em;
height: 1.5em;
background-color: #fff;
border-radius: 1em;
position: absolute;
top: 2em;
left: 4.5em;
}
Now the pupils are almost direct copies of the whites of the eyes other than we make them semi-circles and black and slightly change the positioning:
#charmander #pupils::before {
content: '';
width: 0.75em;
height: 1.5em;
background-color: #000;
border-radius: 0 1em 1em 0;
position: absolute;
top: 2em;
left: 5.25em;
}
#charmander #pupils::after {
content: '';
width: 0.75em;
height: 1.5em;
background-color: #000;
border-radius: 0 1em 1em 0;
position: absolute;
top: 2em;
left: 1.75em;
animation: white-black 5s infinite;
}
Your character should be looking a little like a pac-man ghost now which is pretty cool. But on we go!
The nostrils again, no surprise, follow the same as the whites of the eyes just smaller, black and positioned in a different place.
#charmander #nostrils::before {
content: '';
width: 0.25em;
height: 0.25em;
background-color: #000;
border-radius: 1em;
position: absolute;
top: 3em;
left: 3em;
}
#charmander #nostrils::after {
content: '';
width: 0.25em;
height: 0.25em;
background-color: #000;
border-radius: 1em;
position: absolute;
top: 3em;
left: 3.75em;
}
Let’s take a break from ::before and ::after for about 2 seconds shall we. To style the mouth we again just create a rectangle and colour it and use border radius to give us that little smile, then position it into place, but you already knew I was going to say that:
#charmander #mouth {
width: 1.25em;
height: 0.75em;
background-color: #942e58;
border-radius: 0 0 3em 3em;
position: absolute;
top: 3.75em;
left: 2.85em;
}
Alright I will give you a little more time off of those pseudo elements, the belly is not too much different from how we did the body. We simply create a square, give it the lighter orange colour then use good old border radius (sorry I can’t give you a break from that one) on three of the corners to give us that belly shape and of course position it in place and don’t forget your z-index to keep elements above others:
#charmander #belly {
width: 5.5em;
height: 5.5em;
background-color: #f8e393;
border-radius: 2em 2em 0 2em;
position: absolute;
top: 7.5em;
left: 0.5em;
z-index: 10;
}
Sorry but to get that nice arced tail we need to go back into the pseudo elements, I am not really sorry I love them and think they are great! Annnyywwaayyy…
The tail is not really any different to what we have done already and what you will need to do for early anything you decide to draw with CSS, you create the block shape and then you border radius it, colour it and position it into place. So for the sake of not sounding like a broken record here is what we do for the tail:
#charmander #tail::before {
content: '';
width: 3em;
height: 2.75em;
background-color: #e88923;
border-radius: 0 0 2em 0;
position: absolute;
top: 10em;
left: 8em;
z-index: 10;
}
#charmander #tail::after {
content: '';
width: 1.5em;
height: 1.5em;
background-color: #f5f5f5;
border-radius: 0 0 50% 0;
position: absolute;
top: 9.50em;
left: 8em;
z-index: 10;
}
The arms are the same as the feet we did earlier just basically rounded on different edges and positioned differently:
#charmander #arms::before {
content: '';
width: 2em;
height: 2em;
background-color: #e88923;
border-radius: 2em 0 0 2em;
position: absolute;
top: 5.75em;
left: -1.5em;
z-index: 10;
}
#charmander #arms::after {
content: '';
width: 2em;
height: 2em;
background-color: #e88923;
border-radius: 0 2em 2em 0;
position: absolute;
top: 5.75em;
left: 7.75em;
z-index: 10;
}
We are very nearly done, just the flame to add now. The flame is again fairly straight forward the only thing extra on this is a little rotate CSS using transform. Then for the inner flame exactly the same without the transform as it is already contained inside the transformed object and just made a little smaller and red:
#charmander #flame {
content: '';
width: 2.5em;
height: 2.5em;
overflow: hidden;
border-radius: 50% 0 50% 50%;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
background-color: #FFB800;
position: absolute;
top: 8em;
left: 9em;
z-index: 300;
}
#charmander #flame #inner-flame {
content: '';
width: 1.5em;
height: 1.5em;
overflow: hidden;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
border-top-left-radius: 50%;
background-color: #F00;
margin: 13px 0 0 5px;
z-index: 301;
}
That is it you have drawn a Pokeball and Chramander NEAT EY!
Now I could go rambling on and pretty much repeat myself over and over again explaining how to draw Bulbasaur and Squirtle but I would guess you have already gathered that it is all about creating your blocks of colour and then just rounding them out to the shapes you require using border-radius and then positioning them where you need. So why not just experiment yourselves? But of course you can get the source files from here and then inspect and play yourself, it should all be quite obvious what I have done and why.
Now I said I would perhaps chuck in some animation and I would not let me followers down! In the demo and in the source files you can obviously see the animation I have done. You can see the flame flickering a little, the 2 Pokeballs rolling around, yes I draw a more 3D Pokeball for you as well, it is really easy so go ahead and figure out how I did that and the other added gradients etc. I will show you how to do the rolling Pokeball.
Animation – Rolling Ball
For this we will use the CSS animation keyframes. To set up the actual spinning of the ball we create an animation and name it spinning (took me a while to think of that). I give it just 3 stages 0%, 50% and 100% and all we do is set the rotation degree for each stage:
@-webkit-keyframes spinning {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
50% {
transform: rotate(325deg);
-webkit-transform: rotate(325deg);
}
100% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
}
Then we find our #pokeball style block and add in the animation CSS telling it to use the spinning keyframes for 5 seconds and to play for infinity.
#pokeball {
width: 10em;
height: 10em;
background-color: #fff;
border-radius: 50%;
position: relative;
overflow: hidden;
animation: spinning 5s infinite;
}
Cool so we have a ball spinning on the spot but we want it to roll. To achieve that I wrap the pokeball div in another div and give it the id of moving-container (again took all day for that name ey). Then the same as the spinning we set up some keyframes but this time using translateX so we are moving the whole container across the X –axis like so:
@-webkit-keyframes translating {
0% {
transform: translateX(-300%);
-webkit-transform: translateX(-300%);
}
50% {
transform: translateX(300%);
-webkit-transform: translateX(300%);
}
100% {
transform: translateX(-300%);
-webkit-transform: translateX(-300%);
}
}
Then we do what we did for the spinning and add the animation to the CSS for the mobbing container:
#moving-container {
width: 10em;
height: 10em;
margin: 10px auto 70px;
position: relative;
-webkit-animation: translating 5s infinite;
-moz-animation: translating 5s infinite;
animation: translating 5s infinite;
}
As you may have noticed there I have left in the moz prefix and the standard animation CSS declaration. That is to show you if you want these animations to work in firefox and other browsers than just webkit ones you need to add the prefixes. You will also need to copy all of your keyframe animations and put them with the prefixes too, you can see them in the source code for further clarification.
Well that is that you have drawn a cool Pokeball and Charmander and hopefully looked at the demo and downloaded the source files to get a good understanding of taking it further and how to draw Bulbasaur and Squirtle.
I hope you had fun! And I also hope you noticed the extra effort for me to make them eyes move along with the ball at the right time.