NEW Super Easy Delta Preview Method
Forum Index > PokéFarm > Guides >
So, after tinkering with some CSS for a while, I've figured out a to preview deltas with just the image code for the Pokemon's sprite (regular, shiny, or albino, whichever one of them you want to preview) and some CSS.
(Note: It won't look exactly like the Delta, but it looks close.)
With this simple line of code, you can turn this:
....into this.
...or this!
...or any other delta you want. Without having to have the image link to any deltas of that Pokemon!
All you have to do is put the image code for the Pokemon's sprite where it says "link" and then change [sc=type] to the name of the type of delta you want to see. (for example, [sc=poison])
And that's it! Enjoy! :D
....into this.
click for code
[sc=type][img]link[/img][/sc]
[style].normal, .fire .water, .grass, .electric, .ice, .psychic, .dragon, .dark, .fairy, .fighting, .flying, .poison, .ground, .rock, .bug, .ghost, .steel {display: inline-block;}
.normal img {filter:
drop-shadow(-1px -1px 1px #a8a878)
drop-shadow(1px 1px 1px #a8a878);}
.fire img {filter:
drop-shadow(-1px -1px 1px #f08030)
drop-shadow(1px 1px 1px #f08030);}
.water img {filter:
drop-shadow(-1px -1px 1px #6890f0)
drop-shadow(1px 1px 1px #6890f0);}
.grass img {filter:
drop-shadow(-1px -1px 1px #78c850)
drop-shadow(1px 1px 1px #78c850);}
.electric img {filter:
drop-shadow(-1px -1px 1px #f8d030)
drop-shadow(1px 1px 1px #f8d030);}
.ice img {filter:
drop-shadow(-1px -1px 1px #98d8d8)
drop-shadow(1px 1px 1px #98d8d8);}
.psychic img {filter:
drop-shadow(-1px -1px 1px #f85888)
drop-shadow(1px 1px 1px #f85888);}
.dragon img {filter:
drop-shadow(-1px -1px 1px #7038f8)
drop-shadow(1px 1px 1px #7038f8);}
.dark img {filter:
drop-shadow(-1px -1px 1px #705848)
drop-shadow(1px 1px 1px #705848);}
.fairy img {filter:
drop-shadow(-1px -1px 1px #ff65d5)
drop-shadow(1px 1px 1px #ff65d5);}
.fighting img {filter:
drop-shadow(-1px -1px 1px #c03028)
drop-shadow(1px 1px 1px #c03028);}
.flying img {filter:
drop-shadow(-1px -1px 1px #a890f0)
drop-shadow(1px 1px 1px #a890f0);}
.poison img {filter:
drop-shadow(-1px -1px 1px #a040a0)
drop-shadow(1px 1px 1px #a040a0);}
.ground img {filter:
drop-shadow(-1px -1px 1px #e0c068)
drop-shadow(1px 1px 1px #e0c068);}
.rock img {filter:
drop-shadow(-1px -1px 1px #b8a038)
drop-shadow(1px 1px 1px #b8a038);}
.bug img {filter:
drop-shadow(-1px -1px 1px #a8b820)
drop-shadow(1px 1px 1px #a8b820);}
.ghost img {filter:
drop-shadow(-1px -1px 1px #705898)
drop-shadow(1px 1px 1px #705898);}
.steel img {filter:
drop-shadow(-1px -1px 1px #b8b8d0)
drop-shadow(1px 1px 1px #b8b8d0);}[/style]
thats such a creative solution, cheers! :D
scott | adult | extra silly
free templates
pkmn adoptables
love yourself or else i'll love you
creditsbackground: animation by Da Dou
coding: by me
thank you so much for making this code <33333 it makes looking for specific delta types so much easier
[ icon is from black butler manga ]
MAXtype race score ;; 0
Everstone
Special Evolution Item
(
: 0)
A peculiar stone that prevents a Pokémon from evolving when held.
Sells for 
250
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Dry food
MAXQuiet nature
Hi, im brand new at CSS and having trouble implementing this code. Could you post a screenshot of what the finished code looks like as an example? Thank you so much for your time :)
Edit: My husband figured it out for me!! Thank you so much for this awesome tool :D
I only just saw this, but a few months ago I was also fiddling with CSS delta previews. Since the delta shadow kind of "rises" from the base image, I found that adding a couple more shadow settings helped:
drop-shadow(1px 0px 0px @color)
drop-shadow(1px -1px 0px @color)
drop-shadow(-1px 1px 0px @color)
drop-shadow(-1px -2px 1px @color);
So basically small sharp shadows left, right, and beneath, and a softer, larger shadow above.
You can also use LESS functions to make the code more compact, so you don't have to copy/paste the 4 drop shadows for each type. Uhhhh I don't really want to like waltz in and try to change everything but if you want me to talk more or give examples I can. I have some more complete codes in my journal, including a way to view all 18 types at once while only pasting the image link once...
(I just don't really want to maintain a guide thread myself orz)
Would there possibly be a way to make it easier to have all 18 types without having to copy and paste that 18 times and put each type in separately?
(Sorry for the line of Albino Cubchoo, I wanted to see the line of a Cubchoo a friend sold me and got curious on how the others would look)
Without having to do this(BIG CODE, DONT OPEN IF YOUR DEVICE CANT HANDLE IT)
- Home
- My Shop+ Shops
- Nature Collector/What I'm collecting
- Credits
Hello! Hope you have a nice day!
.~*Casper's(Mine) Journal*~.
Feel free to check my collecting tab in my About Me!
Background image of Signature- Credits
Signature Code- MossDragon
Profile Picture- Drawing I based off of a sunset I watched
My shop Banner- Kingtotodile
Hey wolf, I don't think you have to put the style code more than once. the style applies to everything, so you can just change the type in the first part?
like this:
Chris - he/him - 22
Trade shop - Art shop - Journal
TYPE RACE SCORE: 0 | Icon official card art (edited by me)
TYPE RACE SCORE: 0 | Icon official card art (edited by me)QUOTE originally posted by JUSTICEBEETLE
Hey wolf, I don't think you have to put the style code more than once. the style applies to everything, so you can just change the type in the first part?
like this:
Cannot post: Please log in to post