search engine optimization articles do it yourself seo hiring search engine experts html and search engine optimization web site analysis and submission service

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!

CSS Tricks Cover This 56-page how-to PDF book is jam-packed with 16 CSS Tricks that will help your website sparkle with cool.

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!

See the "dots" in the table of contents above that connect the "trick" on the left to the page number on the right? Those are called dot leaders. If you look at the source code of this page you won't see them. That's because they're added with CSS.

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

Your Attention Please

This is the Attention Box, Tilted Text, and Drop Shadow all rolled in to one example.

No images were used to create this. You can copy and paste the text to prove to yourself it's not an image.

Most people will read the text in that box to the right, sometimes even before they read this text that comes before it. That's why I call it an "attention box" ...it gets attention! :)

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

How about making your headlines and titles look like this:

Plain Text Can Have Shadows

If you're not using an outdated browser the text above should have a soft shadow. Again, no images are used, that's just HTML and CSS. It's very easy to implement!

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

horses flower
alison frog

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.
I'm sure you can think of other nifty uses for this dandy trick.

Form Button Text Changes

Sometimes when a form is submitted, it doesn't take right away. Impatient users often click the button again, which can result in a double submission.

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

Rest your curser on this phrase: What is a Tool TipThis is a tooltip. You can add these to links to describe the content the link leads to.

You can add them to plain text. For example, you could provide the definition of a word most people wouldn't understand.

You can add them to images to provide a description of the image scene or to provide other image info like the camera used, lens info, etc.
?

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.

The boss of CSS TricksleafThis 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?

You've just seen a generous sample of the CSS tricks in this PDF book. If you'd like to start applying these and the other cool CSS tricks to your website, just order below and you can download the PDF with all these cool techniques and more just moments from now.

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 
Guarantee 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.

P.S. You get all the cool CSS "tricks" demonstrated on this page, plus all the others that weren't demonstrated. Most people don't know these tricks—that means your site is going to have some "cool" that others don't have—be one of the cool people! You deserve it.

Best regards, Signature of the Author of Digital Photo Sales Mastery

Back | Products Index
See my fancy bottom! :)