|Home | Web Design Tutorials | Free Graphics | Custom Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Benefits | Login | View Cart|
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!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:
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.
Your Attention PleaseThis 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.
Use an attention box where you want to make certain someone sees your message.
A few ideas for usage:
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 ShadowsHow about making your headlines and titles look like this:
Plain Text Can Have ShadowsIf 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:
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:
Form Button Text ChangesSometimes 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 TipsRest 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.
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.
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.
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.
Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Press Room