2 Column Fluid CSS Layout

November 27th, 2007 · 5:55 pm  →  CSS  Web Design

Fluid layouts are often avoided by designers and developers because they’re deemed as being much more complex than fixed width layouts. However, hopefully this tutorial will encourage a few more designers to try their hand at fluid layouts and demonstrate that these kinds of layouts can be achieved easily by using CSS.

CSS3 Presentation

November 12th, 2007 · 12:31 pm  →  CSS  Web Design

Jina Bolton’s slides from the Future of Web Design 2007 presentation are now available online to download and are definitely worth a look if you’re interested in CSS3

CSS3 And What Could Be [PDF, 7.9MB]

Probably the most interesting areas that she covers are the sections on advanced layouts and grid positioning but have a look at [...]

CSS Rounded Corners Tutorial

October 31st, 2007 · 4:02 pm  →  CSS  Web Design

This is a simple tutorial to demonstrate how easily rounded corners can be created within a webpage using HTML, CSS and four images.

CSS Dropshadows

October 24th, 2007 · 3:37 pm  →  CSS  Web Design

I’ve not written anything about CSS3 for a while so have taken the opportunity today to write a short post on the text-shadow property, how it works and what browsers currently support it.

CSS Tabs Menu with Dropdowns

October 18th, 2007 · 9:52 am  →  CSS  Web Design

I’ve previously written a tutorial which demonstrated how to create accessible tab navigation menu’s. Within this tutorial, I’m going to explain how this menu can be expanded further to create dropdowns when the top level menu item is hovered over.

Firefox scrollbar fix

October 15th, 2007 · 2:27 pm  →  CSS  Web Design

If you’ve ever developed a site which is centrally aligned and only requires a vertical scrollbar on some pages then you’ll have experienced the problem in Firefox where the page appears to jump to allow for the appearance and disappearance between pages.
However, there is a fix which can force the scrollbar to appear all the [...]

CSS Tabs Menu

October 9th, 2007 · 3:48 pm  →  CSS  Web Design

Using an unordered list and a couple of images, we can use CSS to create effective tabbed navigational menu’s which this tutorial will demonstrate.
This demonstration uses the Sliding Doors technique which not only allows for long text but also enables the user to enlarge the text within their browser without breaking the tabs.

CSS colour tip

October 1st, 2007 · 11:38 am  →  CSS  Web Design

Whenever I’m browsing the web and come across a certain website where something is interesting or I’m curious as to how something has been done, I’ll take a look in the source code and CSS to see how the designer solved a certain problem or created part of the page.
This morning I came across an [...]

IE CSS Conditional Comments

September 18th, 2007 · 3:40 pm  →  CSS  Web Design

Consistency across browsers is obviously extremely important and Internet Explorer 6 just won’t go away so unfortunately from time to time we need to use hacks to get around certain bugs and that’s where conditional comments can come in extremely useful.

Accessible CSS Contact Form

September 17th, 2007 · 11:17 am  →  CSS  Web Design

Forms are probably the most misunderstood areas when it comes to accessibility however with a properly marked up form it isn’t difficult to create form elements which can easily be styled using CSS.