cssHTML

HTML & CSS Pokeball

By August 1, 2016 No Comments

So it seems like everyone and their mother is Pokemon crazy right now with the recent release of the popular game, Pokemon Go, so I thought I would take the opportunity to show you guys how to make a Pokeball from HTML & CSS.

To make a Pokeball there are very few elements in the html document, so without further ado, let’s get going…

First things first, you will need a code editor (if you haven’t already got one) to write all your code in. You can use any code editor you like but one I really recommend is ATOM which is made by GitHub, best of all, it’s FREE. I have provided a download link below;

Download ATOM

The HTML BIT…

ok now we have a place to write our code, we can now get to the fun part. We will prepare our HTML code before we get to the cool styling part, so in your code editor, we will be adding some very basic HTML tags that will allow the editor to understand the code we are writing and also allows your web browser to read and interpret the code we have wrote.

In your code editor add the tags as follows:

<html lang="en">

<head>
	
	
</head>

<body>
	
</body>

</html>

You will notice, every tag is preceded by a closing tag, if we open a tag, we must always close it. If you forget to close a tag, when our code compiles in the browser we will get errors so make sure all tags are closed off.

Ok so we have a barebones HTML document, what’s next? We need to start building the structure of our Pokeball, in Div’s.

What the heck is a Div?
The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections.

Ok so now we know that, let’s add some, in the space between your <body> tags add the following code;


<body>
	<div class="box">
		<div class="circle">
			<div class="top"></div>
			<div class="innerCicle">
				<div class="inner-black-cicle"></div>
			</div>
			<div class="bottom"></div>
		</div>
	</div>
</body>

Wait, no body said anything about classes!
the reason we give classes to our Div’s is so when we write our CSS, we know which did to target to give that did it’s own individual style.

so what we have now is our Pokeball in HTML format, so save your HTML file and give it a name, I have called mine, Pokeball.html the .html on the end is very important this makes the file readable by web browsers, but you can call the first part anything you want, just make sure you end the file name with .html

Now you have saved your file, locate it on your computer and double click it to open it up in your default web browser, and WOW! You have a screen of absolutely nothing! So where is all that lovely HTML code I wrote? Well that code is really there, but unfortunately without styling those Div’s we won’t see a thing so let’s get to it!

The CSS Bit

there are 2 ways to include styles in your HTML document they are:

  • Inline styles
  • stylesheet styles

inline styles are styles wrote within style tags in the HTML document, style sheet styles are styles located in a separate file and then linked to within the html document. To keep thing simple, we will write our styles Inline, so all our code is in one document.

to begin, below all of our HTML code we need to open and close some style tags and it as simple as this:

//this is the opening style tag, below our HTML closing tag.
<style>

</style>

Now we have our style tags ready, do you remember those classes we wrote earlier? Well now this is where we target them; Let’s start in the middle, add the following style properties to the .inner-black-circle class

<style>
	.inner-black-cicle {
		border: 5px solid #000;
		width: 63%;
		height: 63%;
		background: #fff;
		position: absolute;
		top: 14%;
		left: 14%;
		border-radius: 100%;
	}
</style>

As you can see, we first write the class name we gave the div earlier, then an open curly bracket, then we write our style properties, then we close our style class with a closing curly bracket. Easy right? Now save your document, then open the file in your browser to see the result.

Ok moving on, let’s target another class. Just underneath the .inner-black-circle class but still within the style tags, add the following code, now we are targeting the .innerCircle class. Underneath your .inner-black-circle style class add the following code.

<style>
	.innerCicle {
		border: 20px solid #000;
		width: 20%;
		height: 20%;
		background: #fff;
		position: absolute;
		top: 35%;
		left: 37%;
		border-radius: 100%;
	}
</style>

Save your document and open it up, you should have something like this.

Not much of a Pokeball yet, right, but don’t worry, the magic will happen very soon!, let’s move on. Ok let’s target another class from out HTML, let’s get the bottom half of our Pokeball started, so no we will be targeting the .bottom class. Underneath your .innerCircle style add the following code;

<style>
	.bottom {
		background-color: #fff;
		width: 100%;
		height: 50%;
		box-sizing: border-box;
		border-bottom-right-radius: 50% 100%;
		border-bottom-left-radius: 50% 100%;
		border: 40px solid #000;
		border-top: 20px solid;
	}
</style>

Save it and open it up again…. What the heck is that! I hear you say, but bare with me, one step at a time!

Ok moving on, let’s target another class, so we have targeted the bottom so let’s now target the top, add the following style class within your style tags underneath your .bottom class;

<style>
	.top {
		background-color: rgb(230, 0, 0);
		border-top-right-radius: 50% 100%;
		border-top-left-radius: 50% 100%;
		border: 40px solid #000;
		border-bottom: 20px solid;
	}
</style>

ok save your file and open it up in your browser, take a look, you should now have something that looks like an awesome flying saucer, but nothing like a Pokeball yet, but all will become clear in our next steps!

Now we are going to do something new, we are going to target 2 classes at the same time, which is very easy, all we do is write both of our class names, separated by a comma then continue our style as normal like this, we will target both our .top and .bottom classes.

<style>
	.top,
	.bottom {
		width: 100%;
		height: 50%;
		box-sizing: border-box;
	}
</style>

Now save have your document, open it up in your browser and what do you know, something that better resembles a Pokeball!

How awesome is that! But we are not quite finished because this looks like a rugby ball so let’s fix it! Let’s get this ball, into a ball! add the following style class;

<style>
	.circle {
		width: 600px;
		height: 600px;
		position: relative;
	}
</style>

 

Now save have it and open it up in your browser and you will now see you have a super awesome Pokeball! But it’s all the way over to the left of the screen? Let’s fix that! The following style will centre your Pokeball on the screen;

<style>
	.box {
		width: 600px;
		margin: 100px auto
	}
</style>


Now you will see we have a fantastic Pokeball entered on the screen, looking pretty awesome! You can stop there or you can add a background, and start building on your own Pokeball design, experiment with styles and don’t be scared to try things, I would love to see what you have created so feel free to share in the comments below and remember, just have fun!

The complete code with added background;

<meta charset="UTF-8">
<title>Pokeball CSS</title>
<div class="box">
	<div class="circle">
		<div class="top"></div>
		<div class="innerCicle">
			<div class="inner-black-cicle"></div>
		</div>
		<div class="bottom"></div>
	</div>
</div>
<style>
	//this adds the background to the design
	html {
		background: linear-gradient( to right, #fff 0%, #fff 50%, red 50%, red 100%);
	}
	
	.top-back {
		background: red;
	}
	
	.box {
		width: 600px;
		margin: 100px auto
	}
	
	.circle {
		width: 600px;
		height: 600px;
		position: relative;
	}
	
	.top,
	.bottom {
		width: 100%;
		height: 50%;
		box-sizing: border-box;
	}
	
	.top {
		background-color: rgb(230, 0, 0);
		border-top-right-radius: 50% 100%;
		border-top-left-radius: 50% 100%;
		border: 40px solid #000;
		border-bottom: 20px solid;
	}
	
	.bottom {
		background-color: #fff;
		width: 100%;
		height: 50%;
		box-sizing: border-box;
		border-bottom-right-radius: 50% 100%;
		border-bottom-left-radius: 50% 100%;
		border: 40px solid #000;
		border-top: 20px solid;
	}
	
	.innerCicle {
		border: 20px solid #000;
		width: 20%;
		height: 20%;
		background: #fff;
		position: absolute;
		top: 35%;
		left: 37%;
		border-radius: 100%;
	}
	
	.inner-black-cicle {
		border: 5px solid #000;
		width: 63%;
		height: 63%;
		background: #fff;
		position: absolute;
		top: 14%;
		left: 14%;
		border-radius: 100%;
	}
</style>
Aviato
Next Post

Leave a Reply