Freebie - CSS-Tricks

Archive for the 'Freebie' Category

Multiple Remote Linking: An Example and How-To

What is remote linking?
Remote linking is a rollover that affects another object on the page. The rollover can affect itself as well. This can be done with PURE CSS, making it a very cool and lightweight technique.
In this example, you will see a row of colored circles across and a list of their names below. [...]

The Perfect Fluid Width Layout

I’ve been thinking a lot about screen resolution lately and how the use of fluid width websites is the best way to accommodate all visitors screen resolutions. The alternative, static width websites, have to make a choice. You can optimize for 800px width, the lowest common denominator, and give up the use of several hundred [...]

Subtle Animations of Page Elements Using GIFs

I really like it when pages use really subtle animation to enhance different page elements. Check out the E-Junkie site and their little flame dude in the stamp as their logo. Every once in a while he blinks and it’s a pretty cool effect. They use an animated GIF to achieve this effect, so I [...]

Submit With Style

This is how you create a super basic submit button:
<input type=”button” value=”Submit” />
All you need to do to replace this default button with an image is to change the type to image and then declare a source image like this:
<input type=”image” value=”Submit” src=”submit-1.gif” />
You are also able to add a class declaration if you wish [...]

Better Blockquotes with CSS

Blockquotes are HTML elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built-in styling for blockquotes, often just a simple left margin. If you use a lot of quotes, as bloggers often do, it is a good idea to [...]