CSS is one of the most important building blocks of modern web design. Standards demand the use of CSS for formatting and styling pages, and with good reason. It’s lighter-weight and capable of much more than older methods like tables.
1. Layout and User Interface Techniques Link
CSS is now the primary language used to create page layouts on modern websites. There are almost limitless possibilities for creating page layouts and user interfaces with CSS, but below are some of the more interesting techniques.
The simplest way to horizontally and vertically center a DIV1
This article covers centering a DIV, both vertically and horizontally, using CSS. While many code snippets out there show how to do this through the use of parent and child DIVs, this particular method uses a single DIV and is much simpler.
Simple Page Peel Effect with jQuery and CSS4
This tutorial combines jQuery and CSS to create a page peel effect. Most sites using this effect are Flash-driven, so this is a nice alternative if you’re not crazy about using Flash (or don’t know how).
Adaptable view – how do they do it?7
Letting users manually change the way your site appears can greatly improve the site’s usability and the likelihood that users will have positive experience (and come back for more). This tutorial shows you how to implement adaptable viewing techniques for your site.
CSS: The All-Expandable Box9
Here’s a tutorial for creating a CSS box that will expand in all directions to fit the content contained within it, instead of just vertically. It works especially well if users increase the font size but making the entire box larger, instead of just shifting the content around and making the box longer vertically.
Four Methods to Create Equal Height Columns 10
Here’s another tutorial for creating equal-height columns in CSS, this time covering four different techniques. The techniques covered work in all major browsers (even IE6).
Vertical Centering With CSS12
This post covers a variety of the best techniques for centering CSS elements vertically on a page. It also covers how to create a simple little vertically-centered website using the techniques.
The CSS “Ah-ha!” Moment17
Here’s a post talking about the “Ah-Ha!” moment most designers have at some point in their careers, where some vital bit of design knowledge suddenly makes perfect sense. In this case, it’s the relationship of CSS boxes within a layout.
An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning 19
This article gives a comprehensive overview of CSS layers, relative and absolute positioning, and Z-Index properties.
The CSS Overflow Property 21
Here’s a complete run-down of how the different settings for the CSS overflow property work. It includes visible (the default), hidden, scroll, and auto, with illustrated examples of each.
Absolute, Relative, Fixed Positioning: How Do They Differ? 23
The differences between absolute, relative, and fixed positioning with CSS can be confusing at times. This article shows the difference between each one and when it’s appropriate to use one or another.
Here’s a cross-browser (mostly) compatible method of creating inline blocks in a variety of styles. There are some differences, though, between the vertical alignment interpretation between browsers.
2. Navigation and Menu Techniques Link
Good navigation is vital part of any website. Good navigation is both user-friendly and complements the rest of the site’s design elements. Below are some techniques and tips for creating navigation that does both.
Horizontal Sub-nav with CSS and jQuery 30
Here’s a complete tutorial on creating a horizontal navigation submenu using purely CSS (in most cases, anyway). If you want it to work in IE6, you’ll need to implement some jQuery, too.
CSS Step Menu32
Creating a stepped menu (also referred to as a “wizard menu”) can be tricky, especially when it has to change the number of steps depending on what it’s being used for. Here’s an example of one with information on how to create your own.
Apple’s Navigation bar using only CSS
This tutorial shows how to create an Apple-like navigation bar using only CSS and HTML (with no images).
Multi-level Menus with jQuery and CSS40
Here’s a collection of techniques for creating multi-level menus in pure CSS and CSS/JS. In addition to basic techniques, it also covers more advanced and creative examples.
3. Image Styles and Galleries Link
Styling of images is an oft-overlooked element of page design. The techniques and tips featured below should help you remedy that situation on any of the sites you’ve designed.
Create an Image Rotator with Description (CSS/jQuery)49
A great tutorial on how to create an image rotator/gallery using CSS and jQuery. It creates a clean UI for displaying a portfolio or general image gallery.
How to Make a Threadless Style T-Shirt Gallery53
A tutorial for creating an image gallery similar to the one on the Threadless54 website, with a caption or overlay on top of an image or thumbnail, among other features.
CSS image replacement for… images? It makes sense for print. (Ask the CSS Guy)56
Here’s a method for swapping special print- and screen-optimized images into your pages depending on the stylesheet being used.
4. Typography Techniques Link
CSS really excels at typography styling. Everything from font type to weight to color is defined using CSS. Here are a number of tutorials to help you create better web typography.
8 Definitive Web Font Stacks 68
A collection of eight CSS font stacks that are based on the format of exact font, nearest alternative, platform-wide alternative(s), universal (cross-platform) choice(s), and generic. These are grouped depending on the impression they’re likely to give visitors.
Fonts for web design: a primer72
A great guide to typography aimed specifically at web designers that includes an overview of the types of fonts, their appropriate uses, and the use of specialist typefaces for web design.
Make OL list start from number different than 1 using CSS80
A simple tutorial for starting an ordered list number from any number you want.
5. Icons, Buttons and Links Link
Icons, buttons and links are another overlooked element on many pages. But they can also make a huge impact on your overall design. Below are some resources for styling better ones.
Add Progressive Icons to Your Site Using :after pseudo-element84
This tutorial shows how to use descriptive icons for your links, mainly to show the type of file being linked to (such as a PDF or ZIP archive).
Scalable CSS Buttons Using PNG and Background Colors88
A tutorial for creating buttons scalable both horizontally and vertically using PNG images. The technique degrades gracefully, so even users in IE6 will still see the button (just without the PNG).
- 1 http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div
- 2 http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div
- 3 http://www.cssstickyfooter.com//
- 4 http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/
- 5 http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/
- 6 http://www.456bereastreet.com/lab/equal_height/
- 7 http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx
- 8 http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx
- 9 http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/
- 10 http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
- 11 http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
- 12 http://blog.themeforest.net/tutorials/vertical-centering-with-css/
- 13 http://blog.themeforest.net/tutorials/vertical-centering-with-css/
- 14 http://d-graff.de/fricca/center.html
- 15 http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
- 16 http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
- 17 http://css-tricks.com/the-css-ah-ha-moment/
- 18 http://css-tricks.com/the-css-ah-ha-moment/
- 19 http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/
- 20 http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/
- 21 http://css-tricks.com/the-css-overflow-property/
- 22 http://css-tricks.com/the-css-overflow-property/
- 23 http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
- 24 http://www.brunildo.org/test/inline-block.html
- 25 http://www.brunildo.org/test/inline-block.html
- 26 http://www.jankoatwarpspeed.com/post/2009/06/20/Create-dropdown-menus-with-CSS-only.aspx
- 27 http://www.jankoatwarpspeed.com/post/2009/06/20/Create-dropdown-menus-with-CSS-only.aspx
- 28 http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs
- 29 http://veerle.duoh.com/blog/comments/simple_scalable_css_based_breadcrumbs
- 30 http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/
- 31 http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/
- 32 http://codylindley.com/CSS/325/css-step-menu
- 33 http://codylindley.com/CSS/325/css-step-menu
- 34 http://www.teehanlax.com/blog/?p=211
- 35 http://www.teehanlax.com/blog/?p=211
- 36 http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html#now-here
- 37 http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html#now-here
- 38 http://woork.blogspot.com/2008/06/nice-css-menu-with-feed-reader-icons.html
- 39 http://woork.blogspot.com/2008/06/nice-css-menu-with-feed-reader-icons.html
- 40 http://blog.themeforest.net/resources/multilevel-menus-with-jquery-and-css/
- 41 http://blog.themeforest.net/resources/multilevel-menus-with-jquery-and-css/
- 42 http://www.devlounge.net/code/centering-images-with-css
- 45 http://www.komodomedia.com/blog/2009/03/sexy-music-album-overlays/
- 46 http://www.komodomedia.com/blog/2009/03/sexy-music-album-overlays/
- 47 http://www.jankoatwarpspeed.com/post/2009/04/19/Create-CSS-pin-balloons-with-ease.aspx
- 48 http://www.jankoatwarpspeed.com/post/2009/04/19/Create-CSS-pin-balloons-with-ease.aspx
- 49 http://designm.ag/tutorials/image-rotator-css-jquery/
- 50 http://designm.ag/tutorials/image-rotator-css-jquery/
- 51 http://www.cssjuice.com/5-popular-css-speech-bubbles/
- 52 http://www.cssjuice.com/5-popular-css-speech-bubbles/
- 53 http://buildinternet.com/2009/06/how-to-make-a-threadless-style-t-shirt-gallery/
- 54 http://threadless.com
- 55 http://buildinternet.com/2009/06/how-to-make-a-threadless-style-t-shirt-gallery/
- 56 http://www.askthecssguy.com/2009/06/css_image_replacement_for_imag.html
- 57 http://www.askthecssguy.com/2009/06/css_image_replacement_for_imag.html
- 58 http://www.peterkroener.de/schoenes-neues-css-box-shadow/
- 59 http://www.peterkroener.de/schoenes-neues-css-box-shadow/
- 60 http://www.sitepoint.com/blogs/2009/06/08/truetype-font-variants-and-antialiasing/
- 61 http://www.sitepoint.com/blogs/2009/06/08/truetype-font-variants-and-antialiasing/
- 62 http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/
- 63 http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/
- 64 http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
- 65 http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
- 66 http://rotorweb.ru/tipografika/zabytye-vozmozhnosti-first-letter.html
- 67 http://rotorweb.ru/tipografika/zabytye-vozmozhnosti-first-letter.html
- 68 http://www.sitepoint.com/article/eight-definitive-font-stacks/
- 69 http://www.sitepoint.com/article/eight-definitive-font-stacks/
- 70 http://green-beast.com/experiments/css_perspective_text.php#n30
- 71 http://green-beast.com/experiments/css_perspective_text.php#n30
- 72 http://dev.opera.com/articles/view/fonts-for-web-design-a-primer/
- 73 http://dev.opera.com/articles/view/fonts-for-web-design-a-primer/
- 74 http://www.zachstronaut.com/posts/2009/06/22/css-text-shadow-lighting-demo.html
- 75 http://www.zachstronaut.com/posts/2009/06/22/css-text-shadow-lighting-demo.html
- 76 http://monc.se/kitchen/129/rendering-quotes-with-css#respond
- 77 http://monc.se/kitchen/129/rendering-quotes-with-css#respond
- 78 http://www.cssnewbie.com/six-ways-style-blockquotes/
- 79 http://www.cssnewbie.com/six-ways-style-blockquotes/
- 80 http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html
- 81 http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html
- 82 http://css.dzone.com/news/overriding-default-text-select
- 83 http://tinsology.net/2009/06/css-drop-cap-effect/
- 84 http://www.myinkblog.com/2009/07/17/add-progressive-icons-to-your-site-using-after-pseudo-element/
- 85 http://www.myinkblog.com/2009/07/17/add-progressive-icons-to-your-site-using-after-pseudo-element/
- 86 http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
- 87 http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
- 88 http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors
- 89 http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors
- 90 http://web-kreation.com/index.php/html-css/add-file-type-icons-next-to-your-links-with-css/
- 91 http://web-kreation.com/index.php/html-css/add-file-type-icons-next-to-your-links-with-css/
- 92 http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/
- 93 http://remysharp.com/2009/01/05/css-tricks-link-nudge/
- 94 http://remysharp.com/2009/01/05/css-tricks-link-nudge/
- 95 http://somerandomdude.com/projects/sanscons/
- 96 http://somerandomdude.com/projects/sanscons/
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.