Smashing Magazine ~ we smash you with the information that will make your life easier. really.
Smashing Magazine we smash you with the information that will make your life easier. really.

CSS: Techniques, Tutorials, Layouts

October 25th, 2006 in CSS | 39 Comments

Advertisement

Since web-development is a quite dynamic field nowadays, new techniques are being developed and updated all the time. A primary example are CSS-related techniques, which emerge almost every day and offer more possibilities for fellows web-developers. We keep an eye on the recent developments and collect new ideas and methods for our readers. A “fresh” round-up of the “fresh” CSS techniques, tutorials and layouts.

PS: You might be willing to check out the List of CSS Tools, too.

CSS Diagrams, Bar Graphs, Star Rater

CSS Forms

CSS Galleries

CSS Image Maps, Image Switcher, Sliding Photograph Galleries

  • CSS Image Maps
    Below is a sample image map that’s built entirely using CSS and XHTML…
  • Map Pop
    This experiment uses CSS to create an image map with CSS pop-ups
  • FotoNotes RolloverViewer
    FotoNotes™ RolloverViewer is an open-source PHP script which will read a FotoNote™-annotated image and create an imagemap with Javascript rollovers to display the image’s notes…
  • Simple CSS Image Switcher
    This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function…..
  • Simple(r) CSS Image Switcher
    I didn’t use nested unordered lists. Instead, I used just one unordered list…
  • A Two Step Photograph Gallery
    Stu Nicholls
  • Hoverbox Image Gallery
    …super light-weight (8kb) roll-over photo gallery that uses nothing but CSS…
  • Sliding Photograph Galleries
    Stu Nicholls Photo Galleries - vertical slide & horizontal slide

CSS Layouts Templates

Lightboxes

  • ThickBox 2.0
    Cody Lindley - ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
  • Lightbox Gone Wild!
    Particletree - Chris Campbell
  • Suckerfish HoverLightbox
    Jonathan Christopher
  • Lightbox JS v2.0
    by Lokesh Dhakar
  • Lightbox Plus
    takuya otani - Lightbox JS is very cool and useful script to display an image on the page
  • Leightbox
    Simon de Haan · Eight Media

CSS Lists, Navigation, Menus, Rollovers

Miscellaneous

  • Architecting CSS
    The first step in architecting our CSS is to devise a plan for organizing our files…..
  • CSS Organization
    Tip 1: Flags
  • Beginner’s guide from a seasoned CSS designer
    Cameron Moll - Authentic Boredom
  • CSS Advanced Guide
    The CSS Advanced Guide is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • CSS Panic Guide
    This is not a complete resource, this is a fast resource….
  • CSS & Design Galleries
    List of CSS and Design Showcases
  • CSS Table Gallery
    The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
  • Dynamic Drive CSS Library
    Practical CSS codes and examples
  • CSSplay
    Stu Nicholls - Experiments with Cascading Style Sheets
  • CSS tests and experiments
    Floats, Containers, margins, …Centering, Shrink wrapping, Images, Miscellaneous, hacks, inline-block, Layouts, Tables…
  • Stylish
    Stylish allows easy management of user styles. User styles empower your browsing experience by letting you fix ugly sites, customize the look of your browser or mail client, or just have fun
  • Professor X
    The Professor X extension for Firefox let’s you see inside a page’s head without viewing the sourcecode
  • X-Ray
    The X-Ray extension let’s you see the tags on a page without viewing the sourcecode.
  • CSSViewer
    A simple CSS property viewer.

Tips & Tricks

Slideshows

CSS Tables

CSS (and JS)Tooltips

  • Bubble Tooltips
    Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.
  • qTip
    qTip will work on all like elements that are on the page. You can specify any HTML tag as your preferred element. Since the title attribute can be applied to any HTML element, this technique is standards compliant!
  • Sweet Titles Finalized
    JavaScript Fading Tooltips
  • Tooltip.js
    …is the NEXT GENERATION in Tooltips; using the Web 2.0 approach of doing a simple thing, and doing it well.

Articles

Tutorials

  • Advanced CSS Layouts: Step by Step
    By Rogelio Vizcaino Lizaola and Andy King
  • CSS Basics.com
    Making Cascading Style Sheets Easy to Understand
  • CSS Beginner’s Guide
    CSS, or ‘Cascading Styles Sheets’ are a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
  • CSS Intermediate Guide
    Like the HTML Intermediate Guide, this CSS Intermediate Guide should not be that difficult, but rather build on the basics of the CSS Beginner’s Guide.
  • CSS Advanced Guide
    The CSS Advanced Guide is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • CSS Demonstrations and Tutorials
    CSS and HTML examples, demonstrations and tutorials
  • CSS Layout Techniques: for Fun and Profit
    A resource for web designers and developers who want to learn CSS layout techniques to replace archaic table-based web page layouts..
  • CSS Menu Tutorial
    Horizontal and Vertical CSS Menu Tutorials
  • CSS Tutorial
    CSS Tutorial von w3schools.com
  • CSS TUTORIAL
    The Complete CSS tutorial
  • Floatutorial: Step by step CSS float tutorial
    Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
  • Learn CSS Positioning in Ten Steps
    This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float
  • Listutorial: Step by step CSS list tutorial
    Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists
  • Selectutorial - CSS selectors
    Selectors are one of the most important aspects of CSS as they are used to “select” elements on an HTML page so that they can be styled.
    Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.
  • Site in an Hour
    by Andrew Krespanis - Making Simple Work of Complex CSS Layouts
  • Style master css tutorial
    hands on css tutorial - This tutorial teaches CSS using both hand-coding and Style Master for Windows.
  • Online tutorials
    The House of Style has several cascading style sheets tutorials, with explanations, excercises and worked examples to get you up and running with style sheets as quickly as possible.
  • Stylesheets
    Cascading style sheets tutorials and style guide
Advertisement
  1. 1.

    jack (October 28th, 2006, 4:40 am)

    I recently found a very interesting website:
    Link [alreadylinked.com]
    There you can purchase ad space for your Blog etc.

  2. 2.

    Mrad (October 30th, 2006, 9:35 pm)

    Excellent list. Love the CSS graphs. Thanks!

  3. 3.

    zoel (November 9th, 2006, 3:35 pm)

    wow..amazing .

  4. 4.

    Rick (November 20th, 2006, 4:15 pm)

    just enjoying your site, thanks

  5. 5.

    Jason (December 6th, 2006, 1:16 pm)

    Great collection of resources. Thanks for sharing dude.

  6. 6.

    fab (March 5th, 2007, 8:26 pm)

    Take a look at my website for only great portfolio & web deisn inspiration : Link [www.webdesign-inspiration.com]

    And thanks for the cool links :)

  7. 7.

    Rob - Web Page Tools (March 16th, 2007, 10:59 pm)

    I have a web page on choosing colors and with a color scheme tool and also the color names and numbers for use in your html and css files.

    Good selection on css resources will have to go through the list see what i can use.

    Rob

  8. 8.

    Kamaldeep (April 16th, 2007, 5:19 pm)

    hi,

    given CSS based menus (without using javascript) are not working on IE-6. please suggest.

    Regards
    Kamaldeep

  9. 9.

    恒温干燥箱-培养箱 (April 19th, 2007, 2:10 pm)

    CSS: Techniques, Tutorials, Layouts | Smashing Magazine (tags: css webdesign)

  10. 10.

    constance (June 6th, 2007, 11:15 pm)

    Simple(r) CSS Image Switcher
    Nasty site behind the link - are you promoting this via your site?

  11. 11.

    Fred Campbell (July 16th, 2007, 11:26 pm)

    Fantastic site! Only had a quick dip into the tutorials … the graph idea is brilliant - so simple. Thank you.

  12. 12.

    rzrsej (July 22nd, 2007, 9:43 pm)

    As you suggest, the world of CSS is moving so rapidly that I think roundups like this one are very important for the average designer, since they allow us to keep up. In a larger sense, though, I think the development of CSS is one of the great success stories of the web. For one, it demonstrates the creative side of programming, the opportunity to make something that is distinctive and creative. Code doesn’t often seem sexy, but CSS can certainly utilize code to make something sexy. Additionally, though, as it develops, it seems to do so through the innovations of average everyday users, who seem genuinely interested in making the web a better place rather than simply programming for money or glory. This is the kind of cooperation that Web 2.0 is meant to emulate.

  13. 13.

    游戏|小游戏 (November 8th, 2007, 4:25 pm)

    certainly utilize code to make something sexy. Additionally, though, as it develops, it seems to do so through the innovations of average everyday users, who seem genuinely interested in making the web a better place rather than simply programming for money or glory. This is the kind of cooperation that Web

  14. 14.

    Web Designer Group (February 22nd, 2008, 12:10 am)

    Great collection about CSS. Thanks. The work is also promoting your site that why your site have good PR.

Leave a Reply

Allowed Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
 

All Posts

Sideblog

Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.

Palatino

How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.

Table of Contents

A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.

Screenshot

In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.

Font Clock

One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.

Screenshot

Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.

Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.

Screenshot

Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.

Fully Personal Interface Research

  • Grab the High-Quality OpenType Free Font Anivers!
  • Grab the Dilectio WordPress Theme!
  • Grab the Smashing WordPress Theme!