5 Simple CSS Tricks

  1. CSS Image Replacement

    System fonts can look ugly, and appear rigid. Using CSS you can replace text with a beautifully formed anti aliased image, yet still have all the accessibility and SEO benefits of text headings.

    Inline:

    <h1>Hello World</h1>

    CSS:

    h1 {
    display:block;
    width:100px;
    height:0;
    padding:30px 0 0 0;
    background-image:url(”heading.gif”);
    overflow:hidden;
    }

    Example of fonts

    The first image is a system font in the browser, see the edges of the “S” are rigid. The second is the same font as an image, the third is a non system font with a shadow, because you can use any font and apply effects to them when using Image Replacement.

  2. Rounded Corners Without Using Images

    To create CSS objects that have rounded edges without using images you can use the following technique:

    Inline:

    <div id=”container”>
    <b class=”rtop”>
      <b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
    </b>
    <!–content goes here –>
    <b class=”rbottom”>
      <b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
    </b>
    </div>

    CSS:

    .rtop, .rbottom {
    display:block
    }
    .rtop *, .rbottom * {
    display: block; height: 1px; overflow: hidden
    }
    .r1 {
    margin: 0 5px
    }
    .r2 {
    margin: 0 3px
    }
    .r3 {margin: 0 2px
    }
    .r4 {margin: 0 1px; height: 2px
    }

  3. RSS Feed Icon Without Using an Image

    With the increasing importance of RSS, finding crafty ways to display an icon is a useful skill. This method displays a tidy RSS icon without using an image.

    Inline:

    <a href=”http://pingable.org/feed/” class=”feed”>FEED</a>

    CSS:

    .feed { border:1px solid;
    border-color:#FC9 #630 #330 #F96;
    padding:0 3px;
    font:bold 10px verdana,sans-serif;
    color:#FFF;
    background:#F60;
    text-decoration:none;
    margin:4px;
    }

  4. Size Fonts Without Using Pixel Units

    It is important to size text using a method that is not absolute, so it can be enlarged for better visibility in a browser.

    CSS:

    body {
    font-size: 80%
    }

    p {
    font-size: 1.1em;
    line-height: 1.2em;
    }

  5. Using Images For Bullets

    An easy method to create list with images as your bullet points:

    Inline:

    <div id=”navcontainer”>
    <ul id=”navlist”>
    <li id=”active”><a href=”#” id=”current”>Item one</a></li>
    <li><a href=”#”>Item two</a></li>
    <li><a href=”#”>Item three</a></li>
    <li><a href=”#”>Item four</a></li>
    <li><a href=”#”>Item five</a></li>
    </ul>
    </div>

    CSS:

    #navlist {
    list-style-image: url(images/arrow.gif);

    www.pingable.org


24 Responses to “5 Simple CSS Tricks”

  1. Jon Cardozo on November 10th, 2007 6:28 pm

    This is a great post for a new web site owner. Web design is something that I want to work on in the near future. A few simple tips like these really help to sift through all the jargon.

  2. Matt Ellsworth on November 16th, 2007 9:15 am

    great list - I will be using these on some upcoming websites.

  3. Simon on November 16th, 2007 10:25 am

    Great that you guys found these useful! Thanks for stopping by.

  4. Joy on November 16th, 2007 12:26 pm

    I’m still a beginner when it comes to programming and stuff like that..^^..thanks for posting these tips..it’s a great help.

  5. Craig on November 16th, 2007 4:52 pm

    How about some images to go with the explanations? I simply don’t get your first tip at all.

    Cheers!

  6. Simon on November 17th, 2007 3:30 am

    @ Craig, I have added an image to clear up the first example. For the other examples you will have to follow the links.

  7. jason on November 18th, 2007 11:01 am

    great tips thanks! will be using them

  8. Simon on November 29th, 2007 12:36 pm

    It seems that when ever someone writes a negitive review for this article on StumbleUpon I get a whole flood of new traffic to the blog from it! Weird, I guess I am grateful for the flamers. Pushing 16,000 page views, almost all from SU.

  9. Mike on January 9th, 2008 5:51 pm

    Trying to learn all the tricks I can….and this sure helps! THANKS!

  10. Johnnie from Auto Insurance Quotes on June 20th, 2008 3:01 pm

    Those tips are cool but the one thing that just can’t figure out with css is how to center the div tags. Now i know i could just put around them, and it works perfectly with Firefox, but for some insane reason, it doesn’t work with IE. It’s been driving me crazy and i tried searching on Google countless times but i couldn’t find any help. My site would look more “professional” if could could figure out how to center it.

  11. Bravo from Car Insurance Quotes on July 10th, 2008 4:34 pm

    A few weeks ago after i read this post i started checking out some other css websites. And by far, the best css website is css-tricks dot com. This site have tons of tutorials and anyone who is interested in learning css should definitely check this website out.

  12. chris from Deit on October 21st, 2008 6:04 am

    Great CSS tips. Images can help with Seo and alot of people do not use alt or text with them.

  13. RA from Associate Degree Nursing Schools on November 17th, 2008 12:32 am

    This is a very good site for the new comers. Thanks for the very useful and helpful site. All the tips are very useful. I was interested in the field of web site design in the future so I hope these tips helped me a lot. Thank you for sharing your thoughts.

  14. tom from Los angeles cheap dsl. on December 29th, 2008 7:27 am

    Nice tips. I have to try some of the tricks. I like the idea of images for bullets and have to try that one myself.

  15. Mathew from Hsbc online banking. on January 30th, 2009 1:50 pm

    I like the size fronts with out pxiels. Nice tips works great.

  16. jeff from T1 internet on March 14th, 2009 3:02 pm

    I like the size images without pixels idea. That works good on some sites.

  17. tammy from Datingservices on April 2nd, 2009 5:45 pm

    I like the rounded corners with out images. I think it could help speed up pages if they are slow from alot of images.

  18. jack from realestate reits on June 1st, 2009 4:44 pm

    I am going to try the size fronts withnout pixels. Sounds like a good tip and i like the rss feed without image also.

  19. jack from Uk web hosting on June 20th, 2009 7:56 pm

    Funny that you get more traffic to your website when they write bad review. I guess you can not please everyone and i think they actualy help you out if you get that much more traffic to your web site.

  20. Amy from Free Xbox 360 on June 26th, 2009 9:24 am

    That rounded edges one is brilliant! Thanks so much I’ve been messing about for ages trying to do that. Is there an easy way to do a conversion form that doesn’t require the person sending the information to send you an email? (like for a competition entry?)

Trackbacks:

  1. Pingable.org - 5 Simple CSS Tricks
  2. roScripts - Webmaster resources and websites
  3. Best of Pingable 2007 : New Internet Media from Pingable.org
  4. Links for 04-07-2008 | Velcro City Tourist Board

Leave a Reply




Comment Policy: This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage. Comments that use keywords in the name field in the incorrect format will not be approved. Links to inappropriate sites will also not be approved. Do not bother wasting my time by thanking me for a post. Add something to the discussion or your comment will be deleted