Pokéballs.css, pokéballs recreated in pure CSS
- Easy Installation
- Upload the necessary files and paste one line of code at the bottom of your head tag. That’s it!
- No JavaScript Required
- Fewer compatibility concerns because this project doesn't require JavaScript.
- Infinite Scalability
- Scalable html elements means every pokéball looks awesome at any size.
- Funny
- This project was basically created for educational purposes, so I can get a deep touch with SASS.
- Clone the repo:
git clone git@github.com:bedis-elacheche/pokeballs.css.git.
Many pokéballs are already available in pokéballs.css. Check'em all!
- Normal ball:
<div class='pb'></div>:
- Captain ball:
<div class='pb pb-captain'></div>:
- Cherish ball:
<div class='pb pb-cherish'></div>:
- Dusk ball:
<div class='pb pb-dusk'></div>:
- Gold ball:
<div class='pb pb-gold'></div>:
- Great ball:
<div class='pb pb-great'></div>:
- Green ball:
<div class='pb pb-green'></div>:
- Heavy ball:
<div class='pb pb-heavy'></div>:
- Level ball:
<div class='pb pb-level'></div>:
- Love ball:
<div class='pb pb-love'></div>:
- Lure ball:
<div class='pb pb-lure'></div>:
- Luxury ball:
<div class='pb pb-luxury'></div>:
- Master ball:
<div class='pb pb-master'></div>:
- Nest ball:
<div class='pb pb-nest'></div>:
- Net ball:
<div class='pb pb-net'></div>:
- Park ball:
<div class='pb pb-park'></div>:
- Premier ball:
<div class='pb pb-premier'></div>:
- Quick ball:
<div class='pb pb-quick'></div>:
- Repeat ball:
<div class='pb pb-repeat'></div>:
- Rocket ball:
<div class='pb pb-rocket'></div>:
- Sport ball:
<div class='pb pb-sport'></div>:
- Stone ball:
<div class='pb pb-stone'></div>:
- Timer ball:
<div class='pb pb-timer'></div>:
- Typing ball:
<div class='pb pb-typing'></div>:
- Ultra ball:
<div class='pb pb-ultra'></div>:
Pokéballs come with five different sizes.
- Default size
<div class='pb pb-2x'></div>
<div class='pb pb-3x'></div>
<div class='pb pb-4x'></div>
<div class='pb pb-5x'></div>
###Animation
You can animate pokéballs as well. Adding pb-rotate class will give this rotation effect to your ball.
Pokéballs.css is an open source project released under a permisive MIT license. This means you can use it in your own personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails.
Angella Font is free for personal use. Check their website for further informations about the font.
- Documentation
- If you notice an error in the documentation, please edit the README.md page.
- Issues
- If you have an issue please make sure you document the problems in depth.
- Feature Requests
- We like feature requests. You should try and give as much examples and details about the new feature as possible.
- Fork this repo to your own git
- Make your changes
- Submit a pull request with full remarks documenting your changes
- Pull request MAY then be accepted
Hopefully you think this project is awesome. If you'd like, here are a couple of ways you can tell me thanks for all my hard work. Your support is needed!
- Tip me on Gratipay
- Bitcoin: 1PgaRL1qNRXrgkKQmBfxkuXWJaAJFSPBHw