In about a weeks time I will have been living and working in Portsmouth for two whole months and even though you could say it’s still early days: it’s been awesome.
There’s a new link in the intra-site bar above ‘CompSci Portfolio’. This is technically coursework for my Web Authoring and Design module and even though only the WEBAUD section needs to function, I hope to keep it current for the duration of my course.
At present it is targeted purely at Google Chrome. I do not expect it to work in other browsers and right now it isn’t worth my time to maximize compatibility. Having said that, it is (supposed to be) valid HTML 5 and CSS 3 and will work wonderfully in Chrome.
It’s built on a custom PHP framework using both Markdown and raw HTML for writing pages. More interesting is the setup I have using Git in conjunction with multiple development servers. I can develop new features in their own branches and merge them into master and pull them onto the production server when they are finished. It’s quite awesome.
In other news: expect much Python awesomeness. Enough number crunching: time to make some games!
CSS 3 can to many awesome things with its new features (this blog uses many of them) and I’ve seen a number of examples demonstrating the power of the new standard.
I found myself in a situation recently where I wanted to prototype a theoretical application with a custom chrome which I couldn’t create easily using Inkscape or the Gimp because of all the gradients, rounded corners, shadows, etc I wanted to use. However, CSS3 can do all of these quite easily so I decided to prototype the application as a webpage.
Anyway, this is what I came up with after about an hours work:
The following CSS 3 features are being used here:
- Rounded corners (the window)
- Box shadow (the window)
- Text shadow (h1 title elements)
- Gradients (h1 title elements and on top of the image)
- rgba color (section divs)
I’m also using a custom font (Cantarell) for headers as provided by Google’s font library.
At current only Chrome (and I guess Safari) render this correctly. I’ve tested Firefox but I need to add the correct gradient syntax for it to be 100% correct. I have not been able to test Internet Explorer but I would expect it to explode.
You can find the demo here.