PixelFont

You should totally use our font

Why you ask? Pixelfont can create great improvements, such as

- Increased loading times
- Client side rendering
- No hassle with font files (what even are those anyway)
- Seriously, there is a reason I made this in a folder called "This should be illegal"

How does it work?

Essentially, box shadows. We made alot of classes, 1 for every character to be precies. Every class has it's own box-shadow, making it a letter. With some javascript we scan the page for which elements to pixelfy, and pixelfy them by changing it into div's upon div's with different box-shadows.

For example


                        <p class="pixelated small black">Hello</p>

will be changed into


                        <p class="pixelated small black">
                        <span class="word">
                        <div class="letter-container h"><div class="h letter"></div></div>
                        <div class="letter-container e"><div class="e letter"></div></div>
                        <div class="letter-container l"><div class="l letter"></div></div>
                        <div class="letter-container l"><div class="l letter"></div></div>
                        <div class="letter-container o"><div class="o letter"></div></div>
                        </span>
                        </p>

How do I use it?

It's really simple. Just give your element class pixelated, a color and a size.

Possible colors	Possible Sizes
black	xsmall
white	small
red	medium
green	large
blue	xlarge

Example code:


                        <p class="pixelated small black">Hello World!</p>

Output:

Hello World!

What if I don't want to play by your naming rules? >:(

You can manually trigger the transition with a built in javascript function. This function requires the ID and animation speed(in ms). Example:


                    <p id="pixelMe" class="small red">Pixelate me!</p> 

                    <script>

                        renderPixelArtById("pixelMe", 100);
                    </script>

Result:

Pixelate me!

Where can I find the monstrosity of code that you call CSS?

On my github page, with this site as example page, and a complementary template page!