CSS Tricks!

If you want your website to dazzle with that "WOW" factor everyone strives for (but most miss) ...if you want your website to create a positively GREAT impression ...then look no further than CSS Tricks!

It's not all about looks though, some of the tricks are about making your website function better.

Of course, many of the tricks are about your site looking good . . . real good. :)

You can copy and paste code right from the book. It doesn't get any easier than that.

You'll also see how to easily make changes so you can have your own unique brand of cool.

So what are these tricks? Just take a look at the Table of Contents:

• Table of Contents 2
• Introduction 3
• Tilted Text 4
• Attention Box 7
• Shadow World 10
• Text Shadows 13
• Scale Pictures 16
• Dot Leaders 19
• Reverse Order Lists 23
• Cool Tool Tips 25
• Alternating Row Colors 29
• Alternating Column Colors 31
• Create Your Own URL Shortener 35
• Drop Caps, Word, and Phrases 40
• Web Fonts 42
• Link Alerts 45
• Form Button Text Change 48
• The Way Cool Fieldset Element 50

How About a Demonstration of Some of the Tricks!

I can add items to that list, or change the text of existing items, and the dots will adjust to fill the space between the left and right columns.

These are great for listing a table of contents as I've done here, but there are other uses as well. For example, a restaurant could use them to place their menu online with the food on the left and the price on the right.

Attention Boxes

Use an attention box where you want to make certain someone sees your message.

A few ideas for usage:

• For testimonials
• For pull quotes
• For brief instructions
• To add "side notes" to a page
• To add advertising messages (or affiliate links that get clicked!)
• For quick reminders (e.g., please double-check your email address)

That's just a few quick ideas off the top of my head. I'm sure you're smart enough to think of other uses.

Note that the green box is optional. You could just put tilted text on the page. Of course, the box properties are editable too—you can change the color, the border, whatever you need. Use this trick anywhere that you want to get your website visitor's attention.

Text Shadows

Plain Text Can Have Shadows

You can control the shadow in many ways:

• Change how dark the shadow is
• Change how "soft" the shadow is (how much it fades)
• Change the direction of the shadow
• Change how far offset the shadow is
• You can even change the shadow color

Scale Pictures

This little ol' trick makes images grow like magic right before your eyes. Just rest your cursor on the one of the thumbnails to the right to see what I mean.

The nice thing about this trick, besides being ultra cool looking, is that when the image grows it doesn't move the other stuff on the page around. I grows over the top of the other content.

This can obviously be used to make a cool image gallery, but there are many other ways to use it as well. A few quick examples:

• Display screen captures of your software or ebook cover.
• Display customer testimonials in a cool looking image without taking up much space.
• Use on Add to Cart buttons - just have it grow slightly to encourage sales (check out the buy button for this product to see it in action).
• Provide a "close up" detail of a product to show the quality.
• Provide the answer to a trivia question, riddle, or the solution to a puzzle. Have it too small to read until the user activates the answer.

Form Button Text Changes

On a contact form, they may end up submitting two emails or support tickets. Or they may add the same item twice to a shopping cart. Some will abandon their order at the first sign of difficulty.

However, if the text on the button changes, these kind of problems are greatly reduced or completely eliminated.

Below is an example. Go ahead and click it, it's been nulled so you'll stay right here.

Nice trick! This one isn't pure CSS, but it's pure magic when it comes to preventing multiple submissions. The button text can say anything you want before or after submission. Having it read "Please wait..." instead of "Thank You" is another very effective option.

Cool Tool Tips

Now that you know what a tool tip is (assuming you followed the above instructions), you may be wondering if you can change their appearance.

Yes, you can! You can use any background you want, change the size, change the font color, use HTML in them, use images in them, change the tool tip's position, and do just about anything else you might want to do.

This is our dog, Cricket. She likes to sleep on my desk as I work. My wife says Cricket is the brains behind this website.

Um . . . no comment. Place your cursor on the image to the left to see another example.

Nice, huh? Easy too. All you have to do is copy and paste the basic code and then change whatever you want, like the font color or background image.

Now you can see what I mean that CSS Tricks can help you add a serious amount of cool to your website.

Ready for the Cool?

Order today I'll include a copy of my CSS Reference Charts (PDF). These sell elsewhere on this site for $9.00 but they're yours at no additional cost.

 CSS Tricks 

Yes, this looks great! Finally an EASY way to add cool copy-and-paste "tricks" to my site.

I understand I'll get immediate access to download the product and that I also get a 30-day money-back guarantee.

Just $17.00 if you order now!

Instant Download - Paypal should redirect you to the download page upon completion of your order. If your browser prevents that, just click the "return to merchant" link to go to the download page.

Click to continue...

Important: If your browser settings prevents you from being redirected to the download page after your order goes through, just click the "return to merchant" link to go to the download page.