Pushing CSS - Disco:Gangsta Fever
Blogged into web design & css on 08/12/2005 | comment
Rob Mientjes’ Pushing CSS Contest was a wonderful challenge, not to mention a great deal of fun. And I really must thank Rob and the three judges – John Oxton, Jeff Croft, and Jina Bolton, as well as everyone who entered for making it such a positive experience.
Indeed, there were some great entries, and it’s great to see so much interest out there in showing how far CSS can go (without Javascript, Flash, and all the rest of it). I am also very honored to have been chosen as the winner. As the rules stated, it is up to me to tell everyone how I came up with my design, as well as how I implemented the CSS. So here I go…
When I set out to design a website, before I even begin thinking about what the markup will look like, I first generate some ideas for the overall “look and feel” – the ‘theme’ of the site. My ideas for the theme often come from several different sources, including:
- the client
- the company
- the audience
- the purpose and goals of the site
- existing print collateral and/or visual identity materials
- the name or reputation of the site
I also consider any possible restrictions, guidelines or other particulars. For the Pushing CSS Contest, of course, there were these restrictions:
- the three image limit
- the inability to alter the HTML
- the recommendation to draw on CSS3 specs to “push the limits” of CSS a bit.
Notably, the HTML was also very lean, and there were very few style hooks (classes and ids), and minimal extra markup elements (e.g. a very limited number of divs) to latch on to.
How did I come up with my design?
Rather than sketch anything out first, I went straight into Photoshop. For me, this method works well when I have a loose idea in my head that I am shooting for, particularly for ‘recreational’ web design projects like this one.
My vision
My vision was to design something that would somehow tie into the content Rob provided (as ridiculous as most of it was), just to give myself some sort of direction. For me, the h1 title of the page “Funkin’ with CSS. Using CSS to the max” immediately sent me into “disco” mode, as the word “funkin’ triggered the image of some dude dancing about, and busting out all the best moves on the dance floor – or in this case, the code; after all, CSS is not just for geeks – CSS Web design is the cat’s ass! So off I went to come up with some graphics and typography which would bring that theme to life.
The mockup
As I mocked up my design in Photoshop, I had to keep reminding my self that I could only use three images. That was tough, because for each element I added to the design I had to assess if- or, rather, how I would be able to achieve it using CSS and only 3 images. As a result, I constantly referred to the HTML file and kept my “CSS” brain on at all times.
Deciding on the illustration of the Funky Dude really helped set the tone for me. Thanks to www.magurno.com, there’s a great set of funk-style brushes available. So I played around with that brush until I was happy with the result, and then I brought him into the layout.
To cut or not to cut (the corner)
Although it’s entirely possible to create some very elaborate images, space them out massively inside three image files, and use CSS background positioning to place them accordingly, I also did not want to bog down the page with huge images; I also wanted to see if I could meet the challenge without cutting that corner. Of course, it’s perfectly justifiable to have cut the corner, as several entries successfully did, I just chose not to. So what I ended up with is the fairly minimalistic (i.e. not compromised!) funky, disco-style design.
Once the mockup graphic was done, and ready for slicing, I moved on to the CSS.
How did I make my design work?
Here’s how I implemented the CSS
First thing I did was use the * selector hack to reset all margins and padding to zero, just to make my life easier.
I then set the properties for the global html elements – fonts colors, sizing, etc.., borders, background colors, and margins. Basically all the aspects of the presentation that could be done without images.
I then positioned the main containing blocks and the navigation divs to suit my design, using float:left for the content blocks, and fixed positioning for the navigation div in order to keep it in one spot, a feature I find particularly useful, yet frustratingly unsupported by you know which browser, ahem, Internet Expl0der.
Cross-browser support
At this stage, my main goal was to ensure everything was positioned properly in FireFox (PC & MAC) and Safari, both standards compliant browsers, obvious choices for a contest that requires support for CSS3. I tested my layout by assigning each div a random background color, just to help me see how they lined up. I then held my breath, and moved on to IE.
The Internet Expl’0’der factor
As this contest took place a while ago, I can’t really remember what the result of testing in that crappy browser was, and I can’t be bothered to fire it up right now. If my memory servers me correctly, though, I believe the 3 pixel jog bug appeared (because both content divs were floated to the same side), but I chose to ignore it. Anyways, as long as the two content divs were side by side, I was happy. IE was not gonna eat up my time for pixel perfection on this one.
Slice N’ dice
I then sliced up my mockup, removed the random background colors, and added my 3 images. I replaced the h1 with my header background image (head.gif), and moved its text out of the way using “text-indent:-9999px;”. Then, I applied a background to the content area (bg.gif) – the three white vertical lines (i.e. my addidas gansta footwear nod), by assigning “bg.gif” to the body tag repeating along the Y-axis of the page. Finally, I used my third image for the footer to visually “close up” the container.
The layout was really starting to take shape, though it was certainly not done. It was time to push the limits a bit, by putting the finishing touches on my design.
The finishing touches: pushing CSS boundaries
My third image – the footer gif – became a tool to for tying together and styling up the navigation and paragraphs with the rest of the design. By setting each paragraph and list item in the navigation to “display:block”, and assigning the same background image to each one, I was able to use the CSS “background-position” property to manipulate what parts of that image would be displayed where.
My design was now effectively done – as far as browsers like IE are concerned. But for the browsers “that can” as John Oxton says, the fun was just beginning!
Safari
For Safari (my favourite browser next to FireFox), the first thing I did was add a text shadow to the h2 element. Just to spice it up a bit, and to see if Safari could actually do it, I used the hover pseudo class to change the direction of the shadow of that element on-hover, and it worked.
FireFox
For FireFox, instead of text shadow, I rounded the corners of the background area of the primary content h2 element in order to tie it into the funky rounded corners of the rest of my design, particularly the afro of the funky dude.
Interactivity
In keeping with the theme of my design, and to add some interactivity, I then pulled some ‘funky moves’ with the positioning of the background image used on the content paragraphs on-hover, depending on which content div you hover over, as well as on the text and border colors of each individual paragraph on-hover, again using the hover pseudo class. I did this not just because it was cool, but also to demonstrate that these properties are not just eye candy. They add real functionality to a page in ways that assist readers. Moreover, if you’re focusing on column A, paragraph 3, you can use your mouse to point to that paragraph and the designer’s visual clues are there to help emphasize to you that, that is what you are indeed reading. If that makes sense great, if not no harm done. Onwards…
The visual clues I chose to use in styling up the :hover effects on the paragraphs and content divs were indeed subtle, and that was the whole point. Help readers, but don’t get in their way.
Finally…
Finally, in order to spice up Rob’s content and make this design stand out on its own, I added some presentational text to both the footer paragraph and the secondary content h2 element. To do this I used the before and after pseudo classes along with content generation to add some presentational text.
And that’s about it. If you have any questions please feel free to post them, and I’ll do my best to respond.
keep on pushin’