8 useful css tips and tricks

August 2, 2009
Posted By: Jonden Jackson

We love uncovering secrets about web development. Sometimes it can be easy as 1-2-3 and sometimes…well..sometimes it can be a little more demanding to say the least. However, what we really love is uncovering new secrets about web development that are a breeze to execute. So with that being said we have created a little list or useful CSS tutorials and resources to share with you composed of some new ( and older ) tips and tricks that you may not be aware of.

So enough rambling, here is the list. Also let us know in our comments area if you use any of these techniques in your website or blog. We always like to see new and unusual development techniques.

Get Rid of Link Outlines Using CSS

Web Source:
Steve Mullen Creative

Ever notice when clicking around on a website you click your desired link and out of nowhere there is an unattractive border that surrounds the link? Yea, there is a really easy way to get rid of that with a little CSS and Javascript. Visit our good friend Steve Mullen’s blog on this quick fix.


Hide Titles with background images using CSS

Web Source:
Grind Pattern

This little tip came from our friend Scott Craig with Grind Pattern. Some of you may know solutions that are similar to this but we have found this one particularly very useful. Add a title to any background you choose simply by using the h1 tag and the em tag.

In order to do this, add the first step into your Stylesheet and the second step into your XHTML:

/* the First step displays styles the H1 tag and hides the EM tag */

h1 { background: (/example.jpg) no-repeat; width: 300px; height: 100px; }
em { display: none }

/* the Second step displays styles the H1 tag and hides the EM tag */

<h1><em>Title</em></h1>

And Voila! You got a nice tasty treat for search engines!


Create Block Hovers Using CSS

Web Source:
SmileyCat

Ok, so linked block color hovers aren’t the newest thing, BUT they still look fantastic integrated with comment areas of sites and ordered lists to name a few. Not to mention here is a super easy, sleek way of creating them!


Organize your CSS

Web Source:
Think Vitamin / Carsonified

Sometimes CSS tips and tricks aren’t always related to how you stylize and make things function in differently. Sometimes the tips are directly related to the markup itself. One thing to always remember when developing your markup is to keep it nice and clean to prevent future headaches. Carsonified has a fantastic blog post on this exact topic. Check it out!


Place text over images

Web Source:
CSS Tricks

Want to put some real text on an image that is both attractive and SEO friendly? Well look no further because CSS Tricks has a fantastic solution for an easy alternative to using graphic based text on images.


Link Hover Bubbles

Web Source:
Trent Richardson

Ever wanted to say a little more with a link without adding the description to the link itself? Well no sweat, here is a handy little trick so that you can create easy hover bubbles for your links.


Easy CSS driven tabs

Web Source:
Phrogz

Tabular driven data isn’t new. You’ve seen it, it has been around, and using it in website development is still as useful as ever. Well we found a very clean approach to creating tabs that you may not have seen yet. Even let’s you bookmark desired your tab!


CSS Text Rotation

Web Source:
Snook

This is an awesome effect that we have stumbled upon a couple of times on the web and always wondered how it was done. Well we found it. Check it out, it’s a great approach to making things just a little more interesting for otherwise hum-drum text layouts. Can’t wait to use this one!

Name:*
E-Mail:*
Website:
Message:*


  1. icetrix

    Posted on Aug 6th, 2009 at 1:36

    Very nice list. Thanks!

    Btw… greatlooking site! Like the design alot!

  2. Averie

    Posted on Aug 11th, 2009 at 1:36

    Wow this is so useful! Thank you :)

  3. Jonden Jackson

    Posted on Aug 18th, 2009 at 1:36

    Thanks for the kind words guys!

  4. René

    Posted on Sep 3rd, 2009 at 1:36

    About your #2 trick:
    it’s not good for some screen readers and other applications use display:none, beacuse the text disappear completely from the page.
    You can use with text-indent: -5000px it will still be read which is better in terms of accessibility.

  5. Garry

    Posted on Oct 13th, 2009 at 1:36

    For anyone who wants to work on CSS these details are a must go through.Many people miss out on the finer points which are explained in very simple way.A must for all CSS users,I commend the work of the writer,good job keep it going

  6. Jack Henry

    Posted on Jan 13th, 2010 at 1:36

    here is how u can do it

  7. chords

    Posted on Jan 20th, 2011 at 1:36

    whoah, just what I was looking for, appreciate it for putting up .