I just completed the first build a my new website. Its online now and can be found here.
The two CSS3 features I used were rgba color and border radius. The first (rgba) allows the user to define the transparency value of the color(a) as well as the red, green and blue(rgb) values. This feature works on Safari, Chrome and Firefox but not IE! This left me with a problem! The text was unreadable when viewed on IE. IE doesn’t recognise rgba so the result is no background color at all. A quick a google led to a simple solution! This was done by using normal rgb in the CSS file before the rgba like so:
background-color: rgba(255, 255, 255, 0.4);}
So now a browser that dose support rgba will first set the rgb color, this will then be superseded by the rgba color. If the browser dose not support rgba it will display the rgb color. This means that the website looks quite different when displayed in Internet Explorer but at least the text is now readable.
The second feature is boarder radius. It allows the user to create curved edges on the boarders around different divs. It is supported by Safari and Chrome but not Firefox or Internet Explorer. As a result the boarder edges appear square in these browsers. A possible solution is to create .png images to be uses as backup backgrounds for the different divs. This is something I might get round to in the future but hopefully I wont have to if Firefox and Microsoft get there act together!!
I hope to use JQuery to add some nice effects in the coming weeks and I also going to look into linking the site up to facebook/google.