HTML5 and CSS3

I’m interested in what HTML5/CSS3 are bringing to the Web. A simple thing like using CSS to drop shadow an image is  quite nice. Beats having to use Photoshop…

Based on the drop shadow alone, I thought it would be good to begin using these two new web standards, So I changed my photography site Stills from one using a Lightroom HTML template to one of my own implemented with HTML5 and CSS3.

For now it is quite rudimentary, it shows photos in a classic gallery style with little changes from a conventional HTML/CSS 2.1 site. As I have more time, I will use tools like Modernizer to help ensure viewers have a good experience regardless of browser.

I’ll also incorporate the database approach I used for my film site. Currently, I have a “hand-crafted” site which requires a new html page for every new photo. After a few photos, the overhead gets to be quite a pain.

I love it!

So I wanted to add a picture to my header… not a problem. BUT! Now the picture and my blog title were in conflict. Because the header photo was half dark and half light, any title color would look great on one side but not the other. Sigh.

Here’s where it got fun!

Using Safari 4’s Develop menu (enable using the Advanced Tab in Preferences), I used the Web Inspector to see if I could drop the title to just under the photo, oops, move it to the right, and make sure the Search widget lines up at the bottom, change the color, FINIS!

I love it! Update the CSS file with my desired changes and life is but dream!

Well except now I see I have to make just one more tweak…