8 CSS Techniques for Charting Data

Sep 20 2008 by Jacob Gube | 42 Comments

There are many ways you can present numerical, chartable data by styling elements using CSS. Using CSS to style your data prevents you from relying on static images and increases your content’s accessibility.

Below, you’ll read about 8 excellent techniques for styling elements into beautiful, accessible charts and graphs.

1. CSS for Bar Graphs

CSS for Bar GraphsView Demo

continue reading »

20 Websites To Help You Learn and Master CSS

Aug 29 2008 by Jacob Gube | 63 Comments

CSS can be both a tricky and easy to learn. The syntax itself is easy, but some concepts can be difficult to understand.

This article features 20 excellent websites to help you "grok" CSS. There’s a wide range of websites included – from blogs to directory-style lists and websites that focus on one particular topic related to CSS.

1. A List Apart CSS Topics

A List Apart CSS Topics - screen shot.

continue reading »

Web-Based Tools for Optimizing, Formatting and Checking CSS

Jul 12 2008 by Jacob Gube | 26 Comments

Stylesheets can get large real quickly, both in terms of length and file size. To ensure that your web pages render correctly and quickly, here’s a compilation of some of the best free, web-based CSS optimizers/compressors, code formatters, and validation services. Check them out and pick the ones that work best for you.

Optimizing and Compression

CSS Optimizer

CSS Optimizer - screen shot.

continue reading »

30 Exceptional CSS Techniques and Examples

Apr 25 2008 by Jacob Gube | 83 Comments

In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more – all using only CSS and HTML.

Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation.

1. Hoverbox Image Gallery

A pure css-based gallery; hovering over an image enlarges it.

Hoverbox Image Gallery

continue reading »

10 More Worthwhile Web Developer Websites to Check Out

Mar 15 2008 by Jacob Gube | 4 Comments

Lead-in image: an architectural structure with the words More. Photo by  Gaetan Lee.A recent article of mine entitled “20 Websites That Made Me A Better Web Developer” attained a large amount of popularity and I was pleased to find out that many people found a link or two that they’ve bookmarked.

The list started out as a massive collection of 100 websites (after going through my massive-huge bookmark collection) , but I then decided that, instead of overwhelming readers with 100 links that will be skimmed and forgotten the next day, that I would filter it down to only 20 quality websites that have been truly helpful and rich with information. A few things on the list were there for sentimental reasons, such as Web Monkey and SitePoint, which did help at the beginning, but now I’ve outgrown.

I received plenty of feedback regarding sites that should have been on the list. Here, I’d like to make amends and list down websites that have helped you (and me) further our understanding of web development and design.

continue reading »