Introduction:

Sorry, I jumped the gun.  I have written some great instructions, but they are not yet ready.  However, I will give you the basics here and now.

HTML and CSS:

Everything on the web is done with code.  The most important codes on the web are HTML (an ancient code) and CSS (a newer, better code).

If you don't know squat about CSS, no problem.  Just "Google it" to find "lines of code" that you can copy and paste.

Best Colors:

Rule of thumb:  If you cannot see the animation when it is placed on your page, then you have picked a bad color.  If your words are hard to read when you write against an animated background, then you have picked a bad color.

If visitors to your website always seem to love your work, then you have picked a good color.  Never mind your own opinions. You visitors, in the ultimate sense, are the reason you made your website.

This page is brand new, and if visitors hate it, then I will delete the damned page.

Fills:

Method 1:  A "fill" is just a graphic (an animation) that is used to "fill up" something.  On the web, most "fills" are used as backgrounds.

The flashing star that you saw in our galleries is a transparent mask -- with a blinking animations behind it.  A mask is like a crack in a wall -- a crack in the shape of a duck or an airplane -- a crack that lets "the light shine through," making the light look like a duck (or airplane).

A mask is just a transparent shape or drawing.

Use a table (or  a division, I guess) and use an animation as a background for that table (or division).  Then use the mask as a background for the cell of the table in question.

(CSS people -- I don't think divisions have "cells."  But two nested divisions -- one inside of the other-- the outermost division with a "flasher" as a background -- the innermost division with with a mask as a background -- will do the job quite nicely.

For this effect to work flawlessly, the table (and cell) must be the same size (exactly) as the mask.  Same thing goes for divisions, of course.

We offer you many, many free masks at this website.  Our masks feature animals, doodads, snowflakes and such. If you want free masks (they're hard to find), Click HERE.

LINES:

Method 1:  Display an animation as a picture on your page.  Use "style" (CSS) to make your picture (your animation) look as long and as high as you like!  You can make pictures look ANY size, honest to goodness you can.  Use 10-pixel animations to make large lines.

Method 2:  Display the graphic as a background in a table or division.  To learn how to make short tables (as short as 1 pixel in height), click here.  I have written a lesson about this method, short and sweet with wonderful visual aids.  You can read it in 60 seconds, honest to God. Click here to read the lesson.

Method 3:  Pure CSS.  Use a small animation as a background -- repeat-x, no-repeat y bottom center --  to make an animated line that will match the length of table, or division, link or word.  (Yes, you can underline unlinked words, if you know how to do it.)

Dividers:

Place a series of animated PICTURES side by side on a page.  Insert some space between each picture (between each "tile," between each "animation").  Highlight the pictures if you like (to add more color to your divider).

Use a mix of colors.

Use graphics of different sizes, but make each graphic LOOK the same size (see "LINES," above, to learn how.)  Or not.  Graphics of different sizes might look great in a divider.

However, different sizes have different timings.  You get more dazzle that way.  Staccato flashes.  Rhythms that vary.  Patterns that change over time.

Rollovers:

In General:  Use CSS to create rollovers.  Use the web to acquire the codes you need.

Remember one fact when you search for codes -- there are several types of rollover, so look for the type that you need.

Rollover Type 1:  When you hover your mouse above a link, a graphic appears like magic.  That graphic may be a full-blown background, or it may be a line beneath the words, or a bullet to the left or right of the word.

Rollover Type 2:  When you hover your mouse above a link, one graphic disappears and another takes it's place.  Both graphics may be used as full backgrounds, or as lines beneath some words, or bullets to the left or right of a phrase or word.

But other effects can occur.  A line may replace a full background, for instance.  A background can replace a bullet.  A bullet can replace a line.

Rollover Type 3:  This one is the best.  An existing graphic disappears and reveals another graphic directly behind it.  The beauty of this method is that both graphics are preloaded.  There is no "waiting" for a second graphic to load.  This technique produces the smoothest rollovers.

This technique relies on nested tables or nested divisions. 

One of the graphics (the rollover graphic, the one that will "appear,") goes inside of the outermost table (or division).  The other graphic, the one that disappears, goes inside the innermost table.

If the graphic in the innermost table is a fully tiled background, then it doesn't matter where you place the graphic in the table "behind it," the outermost table, the one to the rear.

If both graphics are the same size and are non-repeating, then both graphics must be placed EXACTLY atop one another.

Rollover Type 4:  You use one graphic that has two images on it.  Careful placement of the graphic will hide half of the graphic -- will hide one of the two images -- until a hover occurs.  When a mouse hovers, image #2 replaces image 1, even though both images are, in fact, one graphic.  This effect is achieved by reposition of the graphic when a hover occurs.

This rollover type  is no better or worse than "rollover three," above.  Except, of course, you need to MAKE the graphic.  And you wouldn't be at this website if you really knew how to make graphics.  Well, maybe I'm wrong about that.

By the way -- to be a good webmaster, you need to learn how to make graphics.  No stranger can match your color scheme as well as you can do it.

Lists:

Method 1:  Use pictures (animated bullets) as accents.  Use CSS to make any picture look any size you like.  Use CSS to place each picture exactly where you want it.

Method 2:  Use standard CSS to create an unordered list.  Use an animation as your graphic (standard practice).

Method 3:  Make a list the hard way, line by line.  Believe it or not, this method is BEST, if you use graphic accents with your list.

Unordered lists with graphic accents look like hell in Firefox.  Or they look like hell in Explorer or Safari.  If you use graphic accents, forget about making an unordered list.  Make a list the old-fashioned way, or look like a fool if you don't.

Stack divisions atop one another, using an animation -- or several animations -- as backgrounds for divisions, no-repeat x left, no-repeat y center.  This method produces great results that look the same in every browser (that is worth a hoot).

Bullets:

Method 1:  Bullets have to be pictures (animations) placed on your page.  Use vertical alignment to place your pictures where you want in relation to your words -- absolute middle, text-top, bottom, etc.

Remember, use CSS to make a picture look any size you like.  You can make a picture look bigger than actual, smaller than actual, longer than actual, higher than actual.  Use tiny animations -- that loads fast as hell -- and make them look like big animations by using "style" (CSS).

Borders:

I've written a lesson about this subject, and it takes less than 60 seconds to read (honest to God).  In length, it is six sentences, with helpful (wonderful) visual aids.  Click Here.