Stantzouris Thanos Industrial Engineer & Web Developer

Hello all! This is another post about CSS Design! It's not that I am an expert on the matter but I have recently been playing around with some CSS3 animations for a passion project! (You will be informed once it's done! :) ), spoiler alert! It is Pokemon related!  

Pokemon has been my passion ever since I realized that I should stop drinking milk from a bottle! I can still remember my first Pokemon!!! (Charmander Master Race).

Charmander Pixelated

But I can also remember my first pokemon fight, my first level-up, my first evolution, and my first loss. Oh! also! My first f*ing mental breakdown when I realized that Pokemon Red had lagged right in front of my eyes, I hadn't saved my progress and there was NOTHING I could do about it but to flip the switch off, pull out the cartridge, blow that sucker until my lungs scream for help, put it back in, and start again from where I was 10HOURS AGO! (Real Story).

So you understand that I am not going to let that Poke-Passion go! Thus the decision was made: I will create a CSS animation of a Wiggly low catch rate Pokeball.

 

Step | One

First of let's set our canvas! For that, I will be using The Bulma CSS Framework in combination with some Custom CSS.

In my Visual Studio configuration, I have included a Bulma Snippets Extension,

Bulma Extension

and with that extension, I just type bul:html and it expands to a perfect Bulma Html starting page. But if you don't have that you can just copy and paste the Starter Template from the Bulma Website.

 

Step | Two

Sprinkle some flexy CSS on the main body of your .html file :

body{
 height:100vh;
 background-color:red;
 display: flex;
 justify-content: center;
 align-items: center;
}
What does that snippet do?
  • Sets the height of the body to your current Screen Size. 10vh corresponds to 10% of your screen. 100vh to? Yeap! The whole thing!
  • Literally does what it says. Sets the background color to red!
  • This defines your body as a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
  • Items are centered along the line .
  • Items are positioned at the center of the container.

Now we are ready to create the class that when assigned to a div will center it both horizontally AND vertically on the parent container, in our case the body. This is a big deal people! I have lost count on how many times I searched: "How to vertically align div to parent container".
To the CSS:

.child-to-body{
 width: 300px;
 height: 400px;
 flex-shrink: 0;
}
Now the only line that you might not now is the flex-shrink, this line pretty much tells our div to NOT Shrink! You can play around with other non-negative numbers to see what happens. I am cool with that! Who am I to disagree with you?

Ok, cool! These two CSS rules are the main ingredients for a perfectly center-aligned child div to its parent div.

<body>

 <div class="child-to-body box"></div

</body>
I have also included the box Bulma class to make things look a bit more materialized, it adds some background color and shade to our div. And our progress so far is this:

Simple CSS box with Bulma

Very good! This beautiful piece of art is the box that will house our Pokeball.

That was the easy part but it's still awesome to know how to center a div inside another div! I feel like it's a must Interview question! I would ask that question immediately!

 

Step | Three

The time has come for our inner Picasso to take over!

#1 Creating the poke box

The poke box is going to be the container of our Pokeball and will set the placement of where the Pokeball is going to be. Since we want our ball to be in a perfect position let's center our poke box.

.poke_box{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

Now the poke_box is centered inside our already centered Bulma box, both Horizontally AND Vertically but in absolute positioning. Everything is going smoothly and we are ready to draw the outline of the Pokeball. 

#2 All about the Outline

Nothing difficult with this as well. The main logic is that we create a circle out of a box with border: & border-radius: CSS style properties and then inside our circle, we include a shadow to make it look like a ball.

.pokeball{
    position: relative;
    width: 150px;
    height: 150px;
    background: #fff;
    border: 5px solid #000;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: inset -10px 10px 0 10px #ccc;
    animation: shake 1.25s cubic-bezier(.36,.07,.19,.97) infinite;
    animation-play-state: paused;
}

A bit of CSS Explanation: The first six lines create a ball! The overflow property could have been :

overflow: visible | hidden | scroll | auto | inherit

We choose hidden because we want to overflow content to be hidden. Then, box-shadow gives the ball a shadow...
And finally, animation creates the shake CSS animation where wiggles our ball left and right. But you also need to write the rules for the shake animation and then let the animation play infinite times, or do what I did and run the animation on mouse hover :).

.pokeball:hover{
    animation-play-state: running;
}

@keyframes shake {
    0 { transform: translate(0, 0) rotate(0); }
    20% { transform: translate(-10px, 0) rotate(-20deg); }
    30% { transform: translate(10px, 0) rotate(20deg); }
    50% { transform: translate(-10px, 0) rotate(-10deg); }
    60% { transform: translate(10px, 0) rotate(10deg); }
    100% { transform: translate(0, 0) rotate(0); }
  }

Output so far : 

A css ball with Shadow

I'd suggest that you play around with the CSS rules I have given you to better understand the concept. Change the border color, make the ball bigger, even change the overflow and see what happens.

#3 The :before and :after of a Pokeball

The :before and :after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this :

<div>  
    before
        <!-- Rest of stuff inside the div -->
    after
</div>

In the following CSS snippet, we set both :before and :after pseudo-elements content to nothing to create the upper red half of the Pokeball by setting :before pseudo-element to 50% of the size of our Pokeball and giving it a background of red! After that, we draw the middle line of our Pokeball with a simple calculation trick in the :after pseudo-element.

.pokeball::before,
.pokeball::after {
  content:"";
  position: absolute;
}

.pokeball::before {
    background: red;
    width: 100%;
    height: 50%;
  }

.pokeball::after {
    top: calc(50% - 5px);
    width: 100%;
    height: 10px;
    background: #000;
  }

If you have followed everything to the letter you should be looking at a Pokeball without the middle button!  

Note: the ::before and ::after are not supported by IE8, but the :before and :after are! Do whatever you want! Unless you are on IE8... :)

 

#4 The Pokeball Button

As the subtitle says the time has come to finish our Pokeball! The last piece of this long poke-puzzle is nothing more than a div with a class of .pokeball_button and by adding it you should be looking at this HTML structure inside your main body of-course: 

<div class="box child-to-body">

 <div class="poke_box">

   <div class="pokeball">

      <div class="pokeball__button"></div>

   </div>   

 </div>
           
</div>

For our middle button we need to first make it a box, then make it a circle, then center it, then give it a shadow to make it look like a Pokeball button! Oh!!! And the make it blink on mouse hover!

.pokeball__button {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 4px solid #7f8c8d;
    border-radius: 50%;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    box-shadow: 0 0 0 7px black;
    background: #fff;
    z-index: 10;
    animation: blink .5s alternate infinite;
    animation-play-state: paused;
  }

  .pokeball:hover .pokeball__button{
      animation-play-state: running;
  }

  @keyframes blink {
    from { background: #eee;}
    to { background: #e74c3c; }
  }

On that snippet, you see some new things, maybe! Except for the creation of the Pokeball button I have included a very cool animation that makes the button blink like when a pokemon is inside the Pokeball and you are waiting to see if it will get caught or not! That animation capability from CSS3 fascinates the shit out of me! 

wiggly pokeball css animation

That's what we made!!!

If for some reason you messed up anywhere:
https://github.com/athanstan/css-pokeball.git <--Clone this to CatchEmAll

That was it! A totally functional CSS Pokeball for you to import on any project you like! I really hope that you have gained some knowledge and learned a few new tricks to include in your trickster belt (That was a WoW reference)!

If you liked the post, go to my ko-fi page and Comment on what you think! If you can make it better, comment on your ideas! If you hate it, tell me I suck and I 'll try to suck better at what I do in my free time DUDE!!! 

But if you looooved it! You know how to show support man!

Cool Links : 

GitHub Profile
Duthcode on Facebook
LinkedIn

IdonthaveInstagramorTwitter <3


Man that post was quite a big one, even Charmander evolved

Charmander evolution gif

Till the next nerdy post. See you Guys and Gals!  And don't forget to follow me on my Ko-fi page.