Profile
[F2U - Pokémon Snippets]
Info
- These are CSS snippets which require premium.
- The sprite images are copyright to Nintendo/Creatures Inc./GAME FREAK Inc.
Terms of Use
- Please link back here if used.
- You may, of course, use with other codes. Feel free to edit as needed.
Ensure you have WYSIWYG turned OFF, and Code Editor turned ON when editing, or the code won't work! More info.
I made these while I was making a Pokémon trainer layout. The layout has a HTML-only version, but being able to insert icons using classes is more convenient for editing, and animating the icons is cute—so here are some CSS code snippets to facilitate that.
Type Badges
/* Pokémon Type Badges */ @import '0/8166/pp4wkq/type-badges';
<span class="type-badge TYPE">TYPE</span>e.g:
<span class="type-badge fire">fire</span>
=fire
Type Icons
/* Pokémon Type Icons */
@import '0/8167/Bpq2tv/type-icons';
<i class="type-icon TYPE"></i>e.g:
<i class="type-icon fire"></i>
=
Pokémon Icons
/* Pokémon Icons */
@import '0/8115/eVBUv8/pokemon-sprites';
Follows the PokéSprite naming conventions. Due to Toyhouse having a character limit on CSS stylesheets, the following Pokémon do not have their variant forms included:
- (No cosplay pikachu or hat pikachus)
- (No spiky-eared pichu)
If you need to be more specific with their forms, just use the direct image for that icon instead of the stylesheet! I wanted to shorten the stylesheet as much as possible to allow you to still use other css.
<i class="pkicon POKEMON-NAME-AND-FORM"></i>e.g:
<i class="pkicon ponyta-galar"></i>
=
Pokémon Slots
Wrapping the icon in an element with the class slot will give it a background, and animate the sprite when hovered. Giving the slot the class active will make it always slightly animated.
<span class="slot active"><i class="pkicon ponyta"></i></span><span class="slot"><i class="pkicon shiny rapidash"></i>
/* Pokémon Slots */ @import '0/8168/ZqwgAj/pokemon-slots';