web counter
LAST UPDATED SEPTEMBER 30TH

Blinkies, stamps, buttons, and more!

HOW TO USE:

copy and paste drop box links to apply your desired font. make sure [font name] is replaced with the name provided below.

Viare

font-family: xxii goregrinder;
https://dl.dropbox.com/s/7f5jww4c174hcxu/XXII%20GoreGrinder.otf


Viare

font-family: p5hatty regular;
https://dl.dropbox.com/s/jcauzerj0kii3g0/P5HATTY.TTF


VIARE

font-family: curse of the zombie regular;
https://dl.dropbox.com/s/llk0dugwjzevfho/CURSE%20OF%20THE%20ZOMBIE.TTF

*this font should be used in all-caps only, else it will not work properly


Lucifer

font-family: infected regular;
https://dl.dropbox.com/s/a3pydleq8sxn3x9/INFECTED.TTF


Viare

font-family: this is sparta regular;
https://dl.dropbox.com/s/fdikun2zjshrag4/SPARTA.TTF


Viare

font-family: distort me regular;
https://dl.dropbox.com/s/mjkqhek7lbatz0q/DISTORT%20ME.OTF


Viare

font-family: cocaine sans regular;
https://dl.dropbox.com/s/j23fwm5viwt5nss/COCAINE%20SANS.TTF


Viare

font-family: girlypunk;
https://dl.dropbox.com/s/98yokd48vypxney/GIRLYPUNK-WPEZ.TTF


Viare

font-family: beyond wonderland;
https://dl.dropbox.com/s/d7gbg21f90m2nfj/beyond%20wonderland.ttf


Violet

font-family: deadly killers;
https://dl.dropbox.com/s/oq57ofnafk2l1pu/DEADLY%20KILLERS.ttf


Viare

font-family: creature feature;
https://www.dropbox.com/s/isicc55t62srlhj/creature%20feature.ttf?dl=0

SELECT A CODING TUTORIAL:

Each link will lead to a section about how to do each thing listed. Pastebin will be linked as well.

IMAGE VIGNETTE:

The following tutorial will create a customizable vignette around an image. Example below.

Something you must note when using this code is that it can not be applied to <img> tags, as it renders behind content, and <img> tags are considered to BE content. On the otherhand, <div> tags allow this to work, so I will be showing this using them.

[CLICK FOR EASY-ACCESS CODE]


1. Define an image's properties using a style tag (ex.#imgname { height: 100px; width: 100px; etc.. })

2. Add the following code to the image's definition:
background-image: url(link of the image);
background-size: contain;
This will link the image you want to use to the div you are going to be making, and [background-size: contain] specifies that the image will be contained in the size specified.

3. Add the following code to the image's definition:
box-shadow: inset 0 0 20px 10px colorname;
Replace "colorname" with the name or hexcode of your choice, and change the last two numbers according to your desired vignette. The first two numbers change the horizontal and vertical center of the vignette.

4. In another embed, create a div tag using the id you've created, and close the div tags without anything in between.
Ex. <div id="imgname"></div>

That's all!

KEYFRAME ANIMATIONS:

The following tutorial will provide both an in-depth explanation of keyframes and guide to creating your own! Example below.

Below, I will provide the code to the example, a basic explanation of how to use keyframes, and link a site with more in-depth customization.

[CLICK FOR EASY-ACCESS CODE] + [MORE INFO]


Adding animations to text, images, and other elements is extremely easy, believe it or not. Here's the basic css format.

Using keyframes, you can specify when in your animation you'd like specific events to occur. For example, you can make it so your text turns blue specifically 25% through the animation.

*A general rule of thumb, though, when specifying events through percentage, is to ALWAYS label 0% (the beginning position) and 100% (the end position).

Where it says [command], any css style works (color, font-family, font-size, transform, etc.)

Now, once you've completed writing what you'd like to animate, there are two main things about your animation to consider—how long of a duration you want it to have and how many times you'd like it to repeat, if at all.

To link your keyframe animation to a particular element, specify the animation's name with animation-name: [what you named your animation];

Animation Duration determines how long your animation will last.

Animation Iteration Count determines how many times, if at all, you'd like your animation to repeat! It can also repeat infinitely!
This can be left out if you don't want it to repeat.

Animation Delay adds a delay to your animation, causing it to start after a specified amount of time.
If a negative number is specified, then it will start that amount of time into the animation, skipping what occurs before that timeframe.