CSS Image Replacement
Quite often when designing a website we’ll want to replace a heading using an image and there are various techniques to do this but what’s the best method for using a CSS image replacement technique?
2 Column Fluid CSS Layout
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
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 [...]
CSS Rounded Corners Tutorial
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
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
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
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 [...]
CSS Tabs Menu
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
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 [...]
IE CSS Conditional Comments
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.