150+ CSS Samples

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 Digg.com.
  • 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.

Block Hover Effect 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 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 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 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.




Star Rater Techniques




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 Sitemaps




Horizontal and Vertical Centering

You may also like...