JavaScript is required for this site to function properly. Please enable it in your browser settings.

attributionalternate_emailPokeDax

They
Them

The Pokédex of my fakemon - and Pokemon fanart

person

All Journals

unfold_more

settings_account_box

Journals Archive

expand_more

personAll Journals

calendar_monthMarch 2025 calendar_monthFebruary 2025

Dax's Sprite Dex posted 8 months ago by attributionalternate_emailPokeDax

---- 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.

Cheemzy

Sheemish

Shemyokai

Rollcotta

Chonkmesa

Bumbara

Click sprite to view shiny variant

constantlyupdatingdaxpcfakemonpixelartpokedaxpokedaxpcpokedexpokemonpokemonprofessorprofessorspritespriteartwip

handymanCreatingso many fakemon

Image Toggle [ HTML TEMPLATE ]posted 8 months ago by attributionalternate_emailPokeDax

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.

decorguidehmtltemplatehtmlimagespokemonprofileprofiledecortemplate

local_cafeDrinkingtea, just tea :)

Pokémon Stats [ HTML Template ]posted 8 months ago, edited 8 months ago by attributionalternate_emailPokeDax

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

codecsshtmlhtmltemplatepokemonstatbarstatstemplate

theater_comedyFeelinglike a huge nerd

Journal meme (TEMPLATE) - Fave Pokemon by Gen and Type posted 8 months ago, edited 8 months ago by attributionalternate_emailPokeDax

TEMPLATE

Images are optional - I know they take a while to add in :3

I used this website to easily help me pick and sort through my choices: https://cajunavenger.github.io/

Tell me what your favourite Pokémon is in each Generation in this order:

Normal - Fire - Water - Grass - Electric - Ice - Fighting - Poison - Ground - Flying - Psychic - Bug - Rock - Ghost - Dragon - Dark - Steel - Fairy