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

CSS: Techniques, Tutorials, Layouts

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. Links checked: May/17 2008.

You might be willing to check out our newer articles:

CSS Diagrams, Bar Graphs, Star Rater

CSS Forms

CSS Galleries

CSS Image Maps, Image Switcher, Sliding Photograph Galleries

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
  • Leightbox
    Simon de Haan · Eight Media

CSS Lists, Navigation, Menus, Rollovers

Miscellaneous

Tips & Tricks

  • All About CSS Drop Shadows
    By: John Gallant , Holly Bergevin
  • :BefTer Drop Shadows
    Using :before and :after pseudo elements to create beautiful drop shadow on standard browsers. Use built-in drop-shadow filter for Ie.
  • Fun with Drop Shadows
    Drop Shadows are a nice way to beautify images….
  • CSS Browser Selector
    Simple trick to help you on CSS hacks!
  • CSS filters (css hacks)
    Will the browser apply the rule(s)?
  • Image Preloader
    maratz.com – Marko Dugonji
  • Link Thumbnail
    Link Thumbnail shows users that are about to leave your site exactly where they’re going
  • Pure CSS Popups
    Eric A. Meyer
  • Smart Corners
    Using lightweight images, simple markup, and a small amount of CSS, I will demonstrate a method of creating round corners on elastic or liquid boxes
  • Spanky Corners 1.1 beta
    Spanky Corners’ is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work
  • “Sliding Doors” Box– Rounded Corners for All
    A Simple, Semantically Correct CSS Box with Clean Code
  • Liquid round corners
    Adaptable rounded edges – a multifunctional flexible css-concept with transparency for creating dynamically changing not rectangular borders
  • A More Accessible Map
    Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive?
  • CSS-Schieberegler
    A Slider with CSS. Without Java, Javascript, Flash oder animated gifs
  • Playing Cards with CSS
    This example demonstrates using CSS to graphically display standard playing cards on a web page…

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

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

The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (No votes yet)
Loading ... Loading ...

Tags: , , , ,

Advertising
  1. 1
    Mrad
    October 30th, 2006 9:35 pm

    Excellent list. Love the CSS graphs. Thanks!

  2. 2
    zoel
    November 9th, 2006 3:35 pm

    wow..amazing .

  3. 3
    Rick
    November 20th, 2006 4:15 pm

    just enjoying your site, thanks

  4. 4
    Jason
    December 6th, 2006 1:16 pm

    Great collection of resources. Thanks for sharing dude.

  5. 5
    fab
    March 5th, 2007 8:26 pm

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

    And thanks for the cool links :)

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

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

  8. 8
    constance
    June 6th, 2007 11:15 pm

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

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

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

  11. 11
    游戏|小游戏
    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

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

  13. 13
    oto kiralama
    November 27th, 2008 12:33 am

    thanks..

  14. 14
    jai
    December 30th, 2008 1:50 am

    nice tutorials….its very useful for css beginers….keep it up…post more tutorials…

  15. 15
    Eddie Cheng
    February 5th, 2009 1:08 pm

    wonderful Tutorials, good training ground for css beginners.

    Bookmarked on my browser !! :)

  16. 16
    xhtml css design
    March 1st, 2009 6:21 pm

    Great collection about CSS.I like it! and thanks for your sharing.I will study it.

  17. 17
    cssclub
    March 31st, 2009 11:45 am

    Thanks for your job!

  18. 18
    joeal
    July 21st, 2009 1:30 pm

    very top of article some text that should be a link?
    # Star Rater
    Example 1
    # CSS Ratings Selector
    Using a list item to create a star rater
    # Star Rater
    Example 3

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
Post your job