A little while back I mentioned that I had reclaimed an old domain of mine and was looking for something to do with it. It took about two months to pull the free time together to design and build it, but I’ve just relaunched the site: Hike New Jersey.
There are already a few great sites for trail information, milage data and directions, so I stuck with the premise of the original site from back in the late 90s and hope to inspire New Jerseyans to get out and see their local parks as much as to inform.
The Technical Notes
With the rare freedom of building a site for myself I embraced the opportunity to experiment with a few CSS3 features. With fallbacks where appropriate — and without where I didn’t feel them necessary — the site uses properties like text-shadow, box-shadow, rgba() colors and a few other tricks.
But not all the tricks are targeted only at the bleeding edge. The layering of transparent background images will work in most anything you try.
Still a Work In Progress
As much as the new site is a constant work in progress, CSS3 support in browsers is as well. While working with the layout model and box-shadows I found some interesting things in all browsers in how they deal with and clip the space taken up by the shadows. Firefox 3.5 had a few extra quirks with the interaction of margins, shadows and outlines. Look for a future post coming from me after re-reading the specs and writing up some test cases.