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

45 thoughts on “5 Simple CSS Tricks”

  1. Pingback: Pingable.org - 5 Simple CSS Tricks
  2. 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.

  3. Pingback: roScripts - Webmaster resources and websites
  4. Pingback: roScripts - Webmaster resources and websites
  5. 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.

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

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

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

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

  10. 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?)

  11. Good ideas. I like not using images alot it makes site faster. Sometimes you have too many images and any that you can do with out makes a difference.

  12. Pingback: tripwire magazine | tripwire magazine
  13. I like this type of CSS feed. I think the new ones well defiantly have greater benefits from its uses. I all time appreciate the new methodology you use and so i feel to give a thankful comment.

    I even have the example of baton rouge web design. His work made the new beginners to think in different method. Just have look.

  14. I like this type of CSS feed. I think the new ones well defiantly have greater benefits from its uses. I all time appreciate the new methodology you use and so i feel to give a thankful comment.

    I even have the example of baton rouge web design. His work made the new beginners to think in different method. Just have look.

  15. The rounded corners using only CSS and not images is great.

    I still see a lot of designers slicing stuff up in photoshop and making complicated tables to do rounded corners.

    I wish more people would find these CSS tricks and start using them. The web would be better as a result.

  16. Pingback: 185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat Sheets | World Wide Web
  17. CSS gave me headaches for year. I was doing it all wrong and then i quit for a while. I went into insurance field mostly i worked for car insurance companies.

    But with such a bad financial 2009 i had a lot of time on my hand and i started to learn CSS again and now i’m doing it the right way.

    I tink i’ll quit insurances and start a small webdesign company. Your blog is an inspiration to me.

  18. Pingback: 185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat Sheets « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
  19. Very cool, the system font as an image looks a million times better. I will be using this very soon. Do the rounded corners work in any IE browsers?

  20. CSS is really confusing especially to those who do not have any background in this area. Thanks for sharing, your article will surely help a lot of people like me.

  21. Those CSS tricks will help those newbie web designers a lot. I like how the rounded corner edge css trick. It doesn’t make use of image. Nice contribution.

  22. The tips that you share was so effectively. Now i know i could just put around them, and it works perfectly. Thank you for your tips that you shared on us.

  23. Some of the tricks that were given may work for some while for others, this will not work. Nice and interesting post anyway.

  24. Love that third font. Thanks for introducing me to image Replacement. I’m hooked! I feel like kid enrolled in finger painting classes! 😉

  25. I was just looking for a better way to include an RSS image without finding an image to use. Your way is simple and elegant. Thanks for saving me from another CSS headache!

Leave a Reply

Your email address will not be published. Required fields are marked *