Tag Archives: css

University: The Ultimate Distraction

Posted on by
Reply

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!

Example of CSS 3 Awesomeness

Posted on by
Reply

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.