101 CSS Techniques Of All Time- Part2

January 21st, 2008

Part 2 of our 101 CSS Techniques series takes a look at more handy css techniques that you can incorporate into your web designs. If you haven’t read Part I yet, you should read it here.

Block Hover Effect Links

block links

Style an A to Z Index


Typography Techniques

  • CSS StyleFun– How to achieve various effects using css, including typography (kerning, drop caps, big 1st letter), styled block-quotes, hover opacity… nice tutorial because it gives sample code/style sheets for each thing.
  • CSS Fonts, CSS Typography– Included are tutorials on how to size fonts with CSS, such as using CSS relative units, such as font size keywords, em, or % (percentage) units, along with cross-browser, cross-platform CSS font considerations.


CSS Pagination

Pagination is a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Can be referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

  • CSS Pagination Links– Inspired by the pagination interface you see at the footer of
  • Pagination 101– Pagination 101, that will give you some clues as to what makes good pagination.
  • Some styles for your pagination– Styles for WP-Digg style pagination plugin, Digg Style pagination Class, the modular version, and the original programed bye strangerstudios.

CSS pagination

CSS Tabs

Tabs-based interfaces allow multiple documents to be contained within a single window and tabs can be used to navigate between them. Using CSS, information is loaded instantly with Ajax-based techniques. Some of the most interesting techniques we’ve found in the Web are listed below.

  • Glowing Tabs Menu– uses a background image that accentuates the outline of the tabs. And to jazz it up, the selected tab “glows”, by using the “Sliding Doors” technique to shift the original background image upwards to reveal the glowing version of the tab design. An exquisite yet professional looking horizontal menu.
  • DOMTab– is a unobtrusive JavaScript CSS navigation tabs that turns a list of links connected to content sections into a tab interface.
  • Control.Tabs– Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.
  • Tabifier– Automatically create an HTML tab interface using plug-and-play JavaScript.

CSS Tabs

CSS Pullquotes

Pull quotes are commonly used in print publications to draw emphasis to a particular quote or excerpt from a document. They are quite common in magazines and newspapers and are usually short extracts from the article.

  • Simple CSS Blockquotes and Pullquotes– Blogsolid shows us how to get some sweet blockquotes and saucy pullquotes?
  • Automatic pullquotes– Using JavaScript based technique to add pullquotes without having to duplicate text in the markup.
  • CSS Pull Quotes– In this tutorial you will place the pullquote text in the title attribute of a paragraph or page division, and use the :before pseudo element’s ability to generate content to display the pullquote on the page.

CSS Pull Quotes

CSS Blockquote

A blockquote is used when quoting text from another source, usually another blog or website. Blockquotes are intended to accommodate a larger amount of text, so as a rule of thumb, use blockquotes when you are quoting more than one or two sentences.

CSS Block Quotes

Star Rater Techniques

CSS Star Rating

CSS Image Pop-Up

  • Cool CSS Image Pop-up– This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click but THIS ONE uses ONLY CSS!
  • CSS Popup Image Viewer– With the help of CSS’s “:hover” pseudo class, combined with relative and absolute positioning, the enlarged images are simply included on the page as normal HTML, “popping” up on demand.
  • Pop-up images on inline links– When you hover over the link the image is then given its correct size and it pops-up, in this case beneath the link, but you can place it anywhere you like relative to the link.
  • Hoverbox Image Gallery– A super light-weight (8kb) roll-over photo gallery that uses nothing but CSS. View Example.

CSS Image Pop-Up

CSS Sitemaps

CSS sitemaps

Horizontal and Vertical Centering

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.


25 comments for „101 CSS Techniques Of All Time- Part2
  1. Kai Chan Vong on January 22nd, 2008 at 6:39 am

    I’d really like to see more talked about CSS diagnostics.. I think Eric Meyer talked about them in a few of his posts but I’d like to see if anyone else has taken the concept any further.

    Also I’d be interested in seeing if anyone has a JS free method of doing alternate colours on elements which are odd and even from one another…

    Really nice post still! :)

  2. Tedel on January 22nd, 2008 at 7:57 am

    Great so far… I wonder if there will be any part three. =)

  3. Damjan Mozeti? on January 23rd, 2008 at 3:45 am

    Nice collection of tips!

  4. Sebastian on January 25th, 2008 at 7:36 pm

    Amazing collection!

  5. Chris on January 26th, 2008 at 1:30 am

    Amazing List!!!

  6. Noupe on January 26th, 2008 at 1:49 am

    Kai Chan Vong
    There Several tools out there that help troubleshooting CSS, like Fiebug or web developer extension.
    John Allsopp got two bookmarklets XRAY and MRI.
    These 2 bookmarklets work in all contemporary browsers, not just Firefox.

  7. Noupe on January 26th, 2008 at 1:55 am

    I didn’t forget about “Block Hover Effect Links”, its the first point in this post.
    As for Outlining text with js, this is not related to this post as we are only concentrating on CSS techniques. And i will add it to my next Javascript code snippet post, good job Dejan:)

  8. Noupe on January 26th, 2008 at 1:56 am

    Thanks Tedel, Part3 is coming soon:)

  9. Kai Chan Vong on January 28th, 2008 at 7:52 am

    I use both of them – my open question was more to see if anyone has done anything interesting. We’ve seen the file type and the %if missing alt/title% tag – so I was simply asking if anyone had seen anything else cool.

  10. Kai Chan Vong on January 28th, 2008 at 8:09 am

    Also mean’t to say thank you for the other two bookmarklets – they’re really great! Thanks.

  11. Troy on February 15th, 2008 at 2:00 pm

    Wow, you’ve found some very simple yet very nice effects here, something to think about with my blog redesign :)

    BTW: you NEED to delete that last spam post!

  12. Alphabetix on February 28th, 2008 at 5:13 pm

    Thanks for sharing. Great info! I hadn’t thought of using pull quotes on web pages. Now I will.

  13. Carter Creative Design on March 26th, 2008 at 4:59 pm

    Okay, I have to say these pages rock.
    I’m doing a web design in melbourne for a small company and they insisted the site aligned vertically within the browser… I wanted to make sure the site was W3C Standards and finally tracked down the CSS link here.

    Thanks, awesome stuff.


  14. Denker on April 1st, 2008 at 9:30 pm

    excellent, this very complete.

  15. Thomas Godoj on June 2nd, 2008 at 5:37 am

    I like your Amazing Lists. Thanks for this css Part.

  16. Matt on August 21st, 2008 at 12:40 pm

    Hey thanks for the great tips. I’m actually implementing some of these as we speak.

    Take care

  17. Pika on August 31st, 2008 at 6:16 am

    Thanks thanks :=)

  18. said on November 8th, 2009 at 3:22 am

    Excellent stuff!!! Thank you very much for sharing!

  19. yoxx on March 15th, 2010 at 7:56 pm

    awesome! thank you very very much…

  20. Michael Schwartz on September 30th, 2010 at 1:44 am

    Some really great CSS techniques on this list. I always try to integrate them into my sites.

  21. ilham ali on October 2nd, 2010 at 7:45 pm

    Great collection of nice css works, thanks for makes things easier for me :)

  22. Chrissy Compiseno on January 17th, 2011 at 9:58 pm

    can I link to your post?

  23. Myfishing on January 24th, 2011 at 6:39 am

    This is so great that I had to comment.Can I apparatus a allocation of your column to my blog?Thanks for sharing.

  24. marchal on April 2nd, 2013 at 4:25 pm

    awesome collection of css, thanks for share it