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

• Creating a graph
  Russ Weakley - Creating a graph using percentage background images
• CSS FOR BAR GRAPHS
  Basic CSS Bar Graph, Complex CSS Bar Graph, Vertical CSS Bar Graph
• Super simple CSS bars
  Tobias Lütke
• Dynamic Pie Chart with CSS
  This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries
• CSS Diagrams
  Things to Do With CSS When You’re Bored at Work
• Star Rater
  Creating a Star Rater using CSS
• CSS Star Rating
  CSS Star Rating Part Deux
• Star Rater
  Example 1
• CSS Ratings Selector
  Using a list item to create a star rater
• Star Rater
  Example 3

CSS Forms

• Form layout
  Richard Rutter - clagnut blog
• Prettier Accessible Forms
  It can be time consuming to make web forms both pretty and accessible….
• Styling form controls
  Roger Johansson - 456 Berea Street
• Styling even more form controls
  Roger Johansson - 456 Berea Street
• Table-less Forms
  Most of the CSS-only, table-less forms available suck. So, not wanting to stoop to mediocrity, I decided to take on the task of coming up with something better. This is the result of my efforts…
• The Form Garden
  A CSS Stylesheet Collection for Web Forms

CSS Galleries

• CSS Reboot
  CSS Reboot is a community event for web professionals……
• CSS Table Gallery
  Data Tables and Cascading Style Sheets Gallery
• Data Tables and Cascading Style Sheets Gallery
  The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
• Design Melt Down
  Design elements, trends, and problems in web design, examples and resources
• Layout Gala
  a collection of 40 CSS layouts based on the same markup and ready for download!
• Liquid Designs
  Liquid Designs is a gallery of websites designed with liquid layouts using XHTML and CSS
• netzfruehling - CSS Showcase Blog
  German Showcase Blog
• oswd - Open Source Web Design
  Download and upload free web designs
• screenspire.com | full( )screen inspiration
  screenspire.com is a no-embellishment, no-comments, no-technology-favored source for recent website-designs collected from various portals and handcrafted by thomas marban
• showcase GR
  The best of Greek CSS web design.
• tom.ma | screenblog
  A handpicked and growing collection of fine screendesigns.
• The Weekly Standards - CSS Web Design Showcase
  Standards/CSS-based Web Design in the Corporate World
• Unmatched Style
  Get inspiration from the CSS Gallery archives
• Web Creme
  Web design inspiration
• Webdesign reference book
  Webdesign reference book - We are releasing a book with about 150 of the greatest webdesigns. Come and submit your own work for the book!
• Web Standards Awards
  Awarding web sites that successfully combine form and function
• Well-Designed Weblogs
  Well-Designed Weblogs series is a subjective and non-scientific selection of usable and readable weblogs that are defined as having: An aesthetically pleasing design that has been accomplished through the use of stylesheets rather than layout tables, font tags, and inline images.
• Well-Designed Weblogs Volume 2

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

• CSS Layouts
  Stu Nicholls - Three columns, CSS frame, “Fixed”, Cross browser….
• CSS TEMPLATES
  All templates are XHTML 1.0 and CSS2
• css Zen Garden
  list of all Zen Garden designs added to date..980+ layouts
• Flexi-Floats
  3 Column CSS Layout - Fluid, Multi-Column Stretch - Header, Footer, Fluid Center - Fixed or Fluid widths
• Layout Gala
  by Alessandro Fulciniti - a collection of 40 CSS layouts based on the same markup and ready for download!
• Look Ma, No Tables.
  CSS Layout Techniques: for Fun and Profit
• ThreeColumnLayouts
  css-discuss - Bob Easton
• Open Source Web Design
  Download and upload free web designs
• Open Web Design
  Download and upload free web designs
• Sample CSS Page Layouts
  Here are a range of CSS page layouts, including 2 column and 3 column layouts - free to use and abuse as needed
• Yet Another Multicolumn Layout
  A multi-column layout

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

• Turning a list into a navigation bar
  How to use CSS to create a horizontal navigation bar out of a simple ordered list
• Turning Lists into Trees
  by Michal Wojciechowski
• CSS Based Navigation
  Didier Hilhorst
• CSS menus gallery
  Here is a gallery of CSS web menus created with CSS style sheets and without tables
• Flexible navigation example
  The navigation bar shown here is achieved via 3 images, a bit of CSS and some JavaScript.
• Free CSS Navigation Menu Designs
  Free CSS Navigation Menu Designs at ExplodingBoy - Familiar to dozens
• Free Menu Designs
  Free Menu Designs - e-lusion.com
• FreeStyle Menus v1.0 RC9
  This is an XHTML compliant, CSS-formatted menu script, designed to work with the current generation of standards-based websites….
• More Free CSS Navigation Menu Designs
  More Free CSS Navigation Menu Designs at ExplodingBoy - Familiar to dozens.
• Navigation Magnification
  The idea behind this experiment is to create an unordered list of links scale according to your hover position, like the icons work in the Mac OS X Dock, using the magnification effect.
• 14 Free Vertical CSS Menus
  14 Free Vertical CSS Menu at ExplodingBoy - Familiar to dozens
• CSS Menu Generator
  Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.
• CSS Tab Designer
  CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
• Tabs
  BrainJar - “In this example, we’ll look at using CSS to build a tabbed display…”
• Mini Slide Navigation
  Sandbox - Stephen Clark
• Nested lists used to create a simple folder metaphore
  Here’s a rough and ready example showing how to make a folder analalogy using a nested list.
• Accessible Image-Tab Rollovers
  SimpleBits - Dan Cederholm - Accessible Image-Tab Rollovers
• Suckerfish Dropdowns
  example page for Suckerfish Dropdowns
• Fast Rollovers Without Preload
  When using CSS image rollovers, two, three, or more images must be loaded….
• Variations on a drop-down theme
  Stu Nicholls - CSSplay

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

• 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

• S5: An Introduction
  Eric A. Meyer - What Is S5? - It’s a Simple Standards-based Slide Show System
• HTML Slidy
  Dave Raggett - Slide Shows in XHTML
• S5Easy: Create S5 Slideshows Easy Online
  Create your slideshow in only 3 steps

CSS Tables

• CSS Table Gallery
  Data Tables and Cascading Style Sheets Gallery
• Better Zebra Tables
  Zebra Tables is a script that applies different background colors to odd or even table–rows…
• Pure CSS Scrollable Table with Fixed Header
  Using CSS to allow scrolling within a single HTML table

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

• CSS Standards
  Written by Christian Heilmann 01/2004
• CSS Frames v2, full-height
  Roger Johansson - 456 Berea Street -Create the visual effect of HTML frames with CSS and make the scrolling area stretch to 100 % height regardless of the amount of content.”
• CSS Hacks and IE7
  Position Is Everything - A discussion of the theory of CSS floating
• Creating Liquid Faux Columns
  By: Zoe Gillenwater
• Div Mania
  More and more web documents are appearing that consist of nothing more than a collection of div elements. In most cases, better use of CSS selectors could be used to avoid overusing the div element.
• Effective Style with em
  Jonathan Christopher
• Exploring Footers
  by Bobby van der Sluis
• footerStickAlt: A more robust method of positioning a footer
  Cameron Adams - The Man in Blue
• In search of the One True Layout
  Position Is Everything
• Is image replacement really worth it?
  Robert Nyman
• Make better Web pages by understanding the CSS box model
  by Contributor Melonfire
• Ten more CSS tricks you may not know
  Trenton Moss - Follow up to the popular article, Ten CSS tricks you may not know…..
• The Most Common CSS Markup Errors
  Sean Fraser - The Elementary Group Standards
• Vertical Centering in CSS
  Yuhu’s Definitive Solution with Unknown Height

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

• Published in CSS, October 25th, 2006
• Tags: layouts, menus, tools, tooltips, tutorials

• 1983 » 2006-10-25 Daily Catch (October 25th, 2006 at 9:27 pm )
• links for 2006-10-26 « Richard@Home (October 26th, 2006 at 1:19 pm )
• links for 2006-10-26 « retrofit. (October 26th, 2006 at 4:52 pm )
• �?男人的简�?�心情 (October 26th, 2006 at 6:02 pm )
• The Ultimate CSS List » RAMsey Web Design, CSS, Technology snippets (October 27th, 2006 at 10:32 am )
• CSS: Techniques, Tutorials, Layouts « My Blog (October 28th, 2006 at 12:03 am )
• OpenWebDesign.it - » CSS: tecniche, tutorials e layouts (October 31st, 2006 at 1:50 am )
• links for 2006-11-01 (November 1st, 2006 at 8:28 am )
• smolinari.com: blogs and articles collection » CSS Techniques, Tutorials and Layouts (November 2nd, 2006 at 6:35 pm )
• ckaucke.de - Blog » Blog Archiv » CSS: Techniken, Tutorials, Pläne (November 2nd, 2006 at 9:32 pm )
• CSS: Techniques, Tutorials, Layouts « hyper-ballad’s blog (November 3rd, 2006 at 11:30 pm )
• » CSS: Techniques, Tutorials, Layouts » Smashing Magazine | modern magazine for web-designers and developers : Popular Bookmarks : eConsultant (December 8th, 2006 at 11:56 pm )
• JEDI » Blog Archive » links for 2007-01-06 (January 6th, 2007 at 6:18 pm )
• Slimme en mooie website - maak gebruik van CSS at Enthousiasmeren (January 22nd, 2007 at 5:02 pm )
• CNET.ro - » Diverse resurse pentru CSS (March 16th, 2007 at 3:06 am )
• Paginas de error 404 « frogx.three (July 25th, 2007 at 6:44 am )
• WebAdictos - Una dosis diaria de web@ » Archivo del Blog » Paginas de error 404 personalizadas (July 25th, 2007 at 11:49 pm )
• Actualidad, Entretenimiento y Humor » Paginas de error 404 personalizadas (July 26th, 2007 at 12:48 am )
• Jason Bartholme’s SEO Blog » Blog Archive » 101 Resources to Help You Build a Better Web Form (July 31st, 2007 at 4:56 am )
• Kiwihaus - Matias Etchevane - » links for 2006-10-27 (September 6th, 2007 at 5:06 am )
• CSS utilidades « Marlenziux (October 24th, 2007 at 10:55 pm )
• 在线CSS工具及相关资源收集 - 小新随行 (January 28th, 2008 at 7:20 am )
• website of the week : smashing magazine : brantheory (February 29th, 2008 at 2:36 pm )
• 网站设计相关在线服务列表 | windpurple (March 16th, 2008 at 11:53 pm )
• CSS-Listen – The Reaction (April 22nd, 2008 at 5:29 am )

Leave a Reply