Designing within a grid system involves defining the material you are going to work with, defining the page size, making a proportional grid onto the space and then fitting your design into the grid. Having a good grid system will speed up the work process so it’s always wise to spend a little time on the grid first.
Learn how to make grids that you can use to create mock ups in Adobe Illustrator…
Direct link: Grid Systems – Making grids in Adobe Illustrator
Really useful HTML page that you can download and use to test that your CSS file covers all the common HTML tags….
Direct link: HTML Test Page for CSS Style Guide
Learn how to create a modern, css colorable progress bar/meter out of a couple divs and an image…
Direct link: Simple CSS shiny progress bar technique
Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall…
Direct link: jQuery Masonry – The flip side of CSS floats
An overlooked aspect of websites is the formatting of HTML and CSS documents. This affects validation, SEO, and visual ease of use. Visual ease of use is the last thing most authors tend to keep in mind, but it’s still very important. …
Direct link: Examples and Tips for Great HTML and CSS Formatting
Tutorial that shows how to take a Photoshop watercolor design, slice it and code the XHTML and CSS to turn it into a working menu…
Direct link: Advanced CSS Navigation Menu
As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme…
Direct link: 15 CSS Tricks That Must be Learned
Usually HTML pages can be considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. There is a single rendering flow, and all elements are aware of the space taken by others.
In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a “z-axis” and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. Learn how to control z-index in your CSS files…
Direct link: Understanding CSS z-index
There are many differences between web design and print design. Some of the priniciples of print design are also applicable to web design. One of the most useful is the Principle of Optimal Line Length. It states that, for any given font-size of a multiple-line block of type (like a paragraph), there is a range of line lengths and line-heights that most people consider easily readable…
Direct link: The Optimal Line Length Principle Applied to Web Design
CSS is a great tool for styling web pages and keeping the style code in it’s own place, instead of mucking up the HTML. Unfortunately, CSS is not a programming language, and does not have the tools that come with a server side language like PHP. However, we can use Server-side languages to generate style sheets, and get the best of both worlds…
Direct link: Trick Out Your CSS With Server Side Code