One project finishes construction, another starts.

Blog posts are getting a little r- wait a minute- oh, there haven’t been many blog posts! This of course doesn’t mean I’ve been lounging around doing nothing, but probably means I’m doing more since I’m not clearing out the random gunk that accumulates in that little hole in my brain.

Anyways, firstly the project that has recently been “finished” (well, technically I’m still waiting for a little bit here and there to fill up the rest of the pages – but the bulk is done anyway), is the grand web-portfolio of Erik Kylen. The web system is using Kohana of course, and behind the scenes there is a very simple administrator panel to CRUD portfolio items.


p align=”center”>

Also, after so many empty sentences saying I will get back to The ThoughtScore Project, I finally have. A lovely bonus is that this time the update includes both a riveting storyline update as well as pretty pictures (or I think they are pretty anyways).


p align=”center”>

More awesome in the oven. Temperature set on high. Very high.


Walkthrough of a CSS3 website design slice.

Slicing is a sign of a terrible golfer. Slicing is also the process of cutting up an image design into smaller images and writing markup code to turn it into a living, breathing website. I recently got a request from a friend to slice their portfolio website. Here is the original design he sent to me (and dumped on WIPUP as well).

It is a fixed width, fixed height website design. Technically speaking, it’s a rather simple design. Most website frontend coders would just launch right into slicing, but this time I wanted to have some fun. I wanted the freedom that any slicer and designer yearns towards – perfect separation between presentation and content, and complete disregard for browser compatibility.

Yes, if you haven’t already guessed, I built this site with CSS3. The only images I used in the end were the green background image, and the splash screen background image (oh, and the leaf icons for the navigation, but those don’t really count).

Most of the layout was straightforward using things like the new border-radius and box-shadow tags. However the lump in the navigation bar posed some complications. In the end I was able to recreate it using a three-layered solution (via the z-index tag). The first layer held the navigation strip with shadow effects. The second (above first) layer created the lump in the navigation’s shape and shadow. A third layer mimicked the second except with a slightly decreased width, slightly offset at the top and a shadow of the same colour as the background to create a "fading" effect for the shadow on the sides. With position: relative, and offsetting to place them, I managed to recreate the effect pretty darn well, if I might say so myself.

Finally, I used Google’s Font API to choose a more appropriate font, applied text-shadows (with a different colour in my a:hover tags to create a nice glow effect) and stuck it up online for my friend to see. Here’s the result (output via Gecko renderer):

This multi-tab bar is a common webdesign element, so this trick might help other CSS3-yearning developers. Here’s the code for those who are interested. The design works in Firefox, Opera, and Safari. Chrome does not render rounded shadows correctly but otherwise works fine. It fails with IE8 and below. Haven’t tested IE9.