CSS (11 articles)
Create a CSS image sprite based feature box
Inspired by some of the excellent feature boxes I've seen on countless sites, I thought it about time I made my own but only using CSS and the excellent image sprite technique. Not familiar with image sprites? Here's a quick primer. Note that this feature box would still work perfectly fine if you were to have each image separate, but less images means less HTTP requests and a less 'laggy' resp...
Read full article | 9 comments , most recent by Josiah
A few good practices for optimising your CSS
Like any programming language, CSS can be used in many ways while still achieving the same result. And although sometimes there isn't necessarily just a single 'correct' way to achieve a certain goal, one thing we can all agree on is that clean optimal code is always better than bloated code. With this in mind I thought I'd share some of the techniques that if you aren't already practising them...
Read full article | 2 comments , most recent by That Web Guy
Demystifying Google's text-indent mystery
Once upon a .com boom time, back when search engines predominantly ranked sites based on keywords alone, there was a common practice in SEO carried out by every web designer and his dog - something called 'cloaking', a form of keyword spamming. This practice at the time was allegedly the Holy Grail of ranking highly in search engines, and usually consisted of spamming your page with keywords th...
Read full article | 8 comments , most recent by ScottFoley
CSS3 features you can start using now
Although CSS3 isn't mainstream enough that we can adopt it wholly without regard, we can however start using it knowing that it will degrade gracefully enough with minimal impact on our designs. Aside from beginning your familiarisation process with CSS3, another advantage is that as more browsers start to support it, users with supported browsers (Firefox and Webkit based browsers at time of t...
Read full article | 12 comments , most recent by That Web Guy
Absolute positions are absolutely your friend
In an ideal world, we shouldn't need absolute positioning for anything, but sometimes relative positions don't get us any closer to solving some design issues or have unexpected results in different browsers. During the olden days of web design when many designs were justified left of the browser, so using absolute positions was an exercise in no-brainery: simply position all elements to a top...
Read full article | 9 comments , most recent by That Web Guy
CSS 101 - Using images in headings
Today I stumbled on a blog with a gorgeous design and what appeared to be some nice code. I won't mention the site name in the interest of not upsetting anyone, but looking closer I noticed something I've often seen used for headings. Considering the job done on that site was excellent otherwise, this was very surprising. Using images for headings often provides the nice extra bling that standa...
Read full article | 3 comments , most recent by That Web Guy
Resetting your CSS and your sanity
Did you ever notice how browsers seems to have slightly different ideas on how certain HTML elements are displayed? If you're like me then you once lost the same amount of time it takes for breakfast cereal to go soggy before you figured out what was going on. The image below perfectly demonstrates the small inconsistencies between elements in different browsers, yet these are often more than e...
Read full article | 9 comments , most recent by Josiah
Making the transition from px to em
Like it or not, there are times when your readers will want to resize the on-screen text for what ever reason. I find myself doing it often because I run a high resolution monitor and some web designers still believe in tiny fonts. But that's another story. So what should you be using to display your fonts? Em or Px? That depends who you ask, but first a brief lesson on the differences. Em,...
Read full article | 15 comments , most recent by Teegee
CSS rollover buttons, sans JavaScript
While scoping for a new designer I recently read through over 50 resumes and consequently looked at over 50 online portfolios. What struck me as frankly surprising (shocking) was the high number of designers who still use oodles of JavaScript to create a simple image hover effect, usually in the navigation. I have a simple rule: If it can be accomplished with CSS, then do it with CSS. Unless it...
Read full article | 5 comments , most recent by Edwardo
Give your clients style-ability with FCK Editor
Something that used to annoy me immensely was deploying a beautiful web standards compliant harmony of XHTML and CSS, only to have a client deface it by adding all sorts of nastiness to the content in the CMS. Pink fonts with yellow backgrounds? Seriously, what are they thinking? It's not the clients fault though. They don't have a clue about design and will idly edit the content of a web page ...
Read full article | 6 comments , most recent by Json
Quick and dirty rounded corners on an image
I got to a certain stage during the development of this blog when I realised I was going to want rounded corners on the article images. I was first reminded of a complex div/gif arrangement, and then my mind shifted to just simply Photoshopping them when needed. Neither are desirable so I came up with this quick and dirty solution. Before you get too excited bear in mind this method is only goo...
Read full article | 15 comments , most recent by Carlo