Main Points

  • CSS Basics CSS techniques that no one should be without, basic yet critical.
  • CSS Background Images Turn that website from blah to Blow You Away while minding your best practices.
  • CSS Design Demos Follow the complete CSS Design process from beginning to end.

This is our section for exploring traditional website design techniques, mostly CSS, positioning (CSS-P), and work with images. The fact that these techniques are now "traditional" among designers is a tribute to www.CssZenGarden.com and those who traveled along similar paths. What started as a branch of best practices that sought to meld good coding with beautiful web design, has transformed the internet. Early adopters of these techniques have become acknowledged experts in the design field from the Zen Garden gurus Dave Shea & Molly Holzschlag to followers like www.SitePoint.com and crew: Kevin Yank, Jason Beaird, Cameron Adams, etc. They've developed amazing techniques in the holy trinity of front end development - XHTML, CSS, & Javascript. Almost more importantly they've been instrumental in consolidating this work and the work of others, identifying best practices, and championing / publicizing them to the world.

While HTML and CSS are fundamentally based on visual rectangular blocks, these designers have pioneered all manner of elegant workarounds to create gorgeous sites that craft the illusion of having transcended these limitations. While certain technologies, Flash foremost, promise the ability to shatter these walls entirely, they fail to meet important fundamentals of good web design from accessibility to SEO to web standards that the design gurus have made important cornerstones in best practices. That's why they lead the field and in large part have remolded the internet in their own image. Like the rest of the internet, we are mere padawans to the masters, and gratefully acknowledge our debt.

CSS Basics

We're creating this area for designers to share their wisdom on cascading style sheets, CSS. Some people say that design can't be taught, that you have to be born with it. To an extent I believe it, but I've seen people who were born with it, and it was a waste. Whatever your talent level, you will never get anywhere without hard work. This is where you can learn to make the most of your talents and study the work of others who've walked the same paths ahead of you.

  1. CssBasics01Tips.aspx - Handy tips for beginning CSS designers.

    [chroniclemaster1, 2009/02/28]

  2. CssBasics02BlockInline.aspx - Explanation of block vs. inline level elements.

    [chroniclemaster1, 2009/04/12]

CSS Background Images

Cascading style sheets have a secret weapon, background images. They're a tremendously powerful tool; you can do many things with them that you can't even do with an <img> tag. The trick is controlling their behavior so that they do what you want them to. The <img> tag behaves certain ways depending on it's attributes, and CSS background images can mimic most all of them, but you have to know how. Check out our work with background images using CSS.

  • CSS Images01 - Using CSS-P with background images.

    [chroniclemaster1, 2009/02/28]

  • Beginning Photoshop - Introduction to Photoshop (and thereby to virtually any other image editing package) in order to create / edit raster (pixel-based) graphics..

    [chroniclemaster1, 2009/06/07]

  • Photoshop Filters - Using Filters to achieve some of the miracles for which Photoshop is known.

    [chroniclemaster1, 2009/06/07]

  • Curves Adjustment Layer - Professional design procedures for mastering the most complicated but critical tool for image editing.

    [chroniclemaster1, 2009/08/07]

  • Beginning Illustrator - Introduction to Illustrator and creating / editing vector graphics.

    [chroniclemaster1, 2009/06/07]

  • Calligraphy - Using Illustrator to create custom calligraphy including new brushes and styles.

    [chroniclemaster1, 2009/06/07]

  • Beginning GIMP - Getting started with GIMP (GNU Image Manipulation Program), the "free Photoshop".

    [chroniclemaster1, 2009/06/07]

CSS Design Demos

These demos show off starting a layout for a design, translating it onto the web, then fleshing it out with color, fonts, textures, and images. There are those who believe that designs are created as dummies in Photoshop and that developers' usefulness is defined by their ability to use the infamous slice tool and to code CSS to replicate the dummy. However, this is an old-fashioned school which is still bound to the less-restricted world of print design. While there are some spectacular displays using this design philosophy it denies developers' experience and intelligence and renders them as footsoliders to design masters. The result is websites which are frequently useless and by definition impossible to update. These are the cut flowers of web design, trendy and beautiful in the moment until they wilt; as fashions change - they cannot. It's as unforgivable as the programmers who with no training or thought do design or user interfaces themselves. (or hire a $10/hour designer) This is the genesis of many corporate and government websites, and while it may explain them, it does not forgive them. Never fear, there are other ways.

Here are real demos of CSS layouts from idea to concept to execution based in the time tested best practices of the masters like Dave Shea, Lord of CSS Zen Garden and Jason Beaird, author of The Principles of Beautiful Web Design. We hope our walkthroughs give a good account of professional web design practice and insight for even amateur designers. Including those finishing touches that make the design or leave it with critical glaring gaffe(s).

Fluid Designs

  • Medieval Scroll - This is our first major idea for distinguishing the CSS of the Beta site from Earth Chronicle, to apply the appearance of a Medieval parchment / scroll to the Earth Chronicle page.

    [chroniclemaster1, 2009/06/07]

  • EC Productions - We need a portfolio site to show off our high-end design work.

    [chroniclemaster1, 2010/09/05]