---- Dax's PC ----
Collection of all the fakemon sprites I have in Pokédex order.
I will be updating this the more fakemon I make, even if their full dex entry isn't done yet.
NOTE: Best viewed on PC.
Click sprite to view shiny variant
I wanna try make a habit of writing these when I learn about code that can be useful or fun for others to use!
I like using this persona for this cause Pokémon professors are supposed to be nerds
This code lets you toggle between 2 images when clicked. Like the example my amazing Chonkmesa is giving.
This is the style code, you will need access to style tags for this to work.
<style>
#pkdex{
display: inline-block;
cursor: pointer;
}#pkdex input,
#pkdex input:checked + img,
#pkdex input:not(:checked) + img + img {
display: none;
}
</style>
And here is the element that holds the images, you can edit its placement by wrapping it in a <div> and messing with margins and such or add a "style=" to the label tag
<label id="pkdex" class="m-0">
<input type="checkbox" />
<img src="1st IMAGE URL HERE" style="height:200px;"/>
<img src="2nd IMAGE URL HERE" style="height:200px;"/></label>
You can move this label element essentially the same way you´d move an <img>, and to my knowledge you can only toggle between 2 images this way, and not more. (feel free to correct me if I'm wrong)
Lore about this code:
I wanted a way to swap between Normal and Shiny sprites for my Pokédex entries, so naturaly I set out to the internet to see if it was possible with basic HTML and CSS.
I learned that "Yes. Sorta" was the answer, and got dragged down the checkbox rabbit-hole
After struggling for an hour(s) to get what I had (which was only kinda working) in a better state and failing... I reached out and @Ry ended up fixing it so it works and looks nice the end, so shoutout to him for being a nerd.
I got bored so I wrote this up
This template is mostly for myself but feel free to use if you want :)
it's simple code the bulk of which is stolen of the internet somewhere and modified.
HP
[046]
ATK
[053]
DEF
[045]
Spc.ATK
[069]
Spc.DEF
[042]
SPEED
[060]
This is where you can change the border and the colour of the progress bar - I have it in a somewhat rounded style but you don't have to.
<style>
progress {
flex-shrink:1;
border-radius: 50px;
width: 60%;
height: 10px;}
progress::-webkit-progress-bar {
background-color: black;
border-radius: 50px;
}progress::-webkit-progress-value {
background-color: #78678a ;
border-radius: 50px;}
</style>
Each section devided by the "--" is a single progress bar, here is were you can change the stat it represents and the "value".
The max (currently set to the Pokémon stat max) is how it calculates how far the value will be coloured on the bar, so if the max is 100 and you say the value="50" then thats the same as 50%
Example
[50%]
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:86px;"> HP </p>
<progress class="m-0" value="46" max="255"> </progress>
<p class="m-0">[046] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:71px;"> ATK </p>
<progress class="m-0" value="53" max="255"> </progress>
<p class="m-0">[053] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:71px;"> DEF </p>
<progress class="m-0" value="45" max="255"> </progress>
<p class="m-0">[045] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:10px;"> Spc.ATK </p>
<progress class="m-0" value="69" max="255"> </progress>
<p class="m-0">[069] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:10px;"> Spc.DEF </p>
<progress class="m-0" value="42" max="255"> </progress>
<p class="m-0">[042] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:41px;"> SPEED </p>
<progress class="m-0" value="60" max="255"> </progress>
<p class="m-0">[060] </p>
</div>
If you want to have multiple colours or styles then you will need to add a "." to "progress" and add a number.
You will need to insert <class="progress(number you changed it to)> to the bar element.
Style Ex
[50]
Style Ex
[50]
<style>
.progress2 {
flex-shrink:1;
border-radius: 50px;
width: 60%;
height: 10px;}
.progress2::-webkit-progress-bar {
background-color: black;
border-radius: 50px;}
.progress2::-webkit-progress-value {
background-color: yellow ;
box-shadow: 1px 1px 5px 3px rgba( 255, 214, 110, 0.8 );
border-radius: 50px;
}--
.progress3 {
flex-shrink:1;
border-radius: 0px;
width: 60%;
height: 20px;}
.progress3::-webkit-progress-bar {
background-color: #001640;
border-radius: 0px;}
.progress3::-webkit-progress-value {
background-color: turquoise ;
border-radius: 0px;}
</style>
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:72px;"> Glow Ex </p>
<progress class="progress2" class="m-0" value="50" max="100">
<p class="m-0">[50] </p>
</div>--
<div class="flex flex-nowrap justify-center" style="align-items:center;">
<p class="m-0" style=" margin-right:41px;"> Colour Ex </p>
<progress class="progress3" class="m-0" value="50" max="100"> </progress>
<p class="m-0">[50] </p>
</div>
As a final note, if you want it to have this font for the maximum Pokémon feel and vibes then just include this:
<style>
@font-face { font-family: pokefont; src: url('https://file.garden/ZnGZOv7aF21WeO00/Fakemon/Pokemon GB.ttf'); }p {
font-family: pokefont;
font-size: 12px;
}</style>
Careful though, it will turn all of your text to this font unless specified otherwise.
And thats everything, I'm not the smartest with HTML and I'm still learning, but I thought this was a fun thing people can use to decorate their profile with.
This can be placed anywhere HTML is allowed, including literature pieces,example here