My posts on CSS

Multi Columned Layouts in CSS3

It’s been a while since my last CSS3 post/tutorial but that doesn’t mean I haven’t been following the development of CSS3. I have been looking at some of the newer features that have recently been implemented and one that’s caught my eye is the multi column layout module. You can already guess what this module can do. Thats right it creates columns! Using the new column module it allows you to create columns in the form of a newspaper style column. News websites and blogs rejoice! Lets take a look at how we can create columns with the new module.

(more…)

Creating a Tabbed Navigation menu

Here’s another navigation tutorial but this time im being a bit different, since my last navigation tut Creating A Drop Down menu I wanted to be a bit different and step away from the boring one level navigation bars. Well in this tutorial you will learn how to create a tabbed navigation menu, complete with a under tab description feature, which when you hover on a certain tab a description will appear below the navigation bar, I’ve seen a few of these around, but most of them use javascript when really you don’t need it if your looking for something simple. Im going to teach you how to create this using HTML lists and CSS styling no javascript involved.

(more…)

Creating a Drop Down Navigation Menu

Every tutorial I’ve done on navigation bars or menu’s has been the normal one level navigation bar, but when you build a website you may feel the need to create sub categories, for example my blog houses various tutorials which are stored in categories, I have a drop down navigation bar on the main link, which is tutorials which then displays sub catergories and then the specific catergory e.g. Tutorials > XHTML > Basics in that example there are three levels. You can create navigation bar levels using lists, it’s the easiest way to create a drop down menu but for styling it can get a bit tricky, but in this tutorial Im going to show you how to form a drop down navigation menu and then style it with CSS

(more…)

Creating a glowing navigation bar

Adding glow can make things look special or stand out and it can be applied to lots of different things. Glow can be used in website designs, to make something look just a little more special than the average look. In this case I’m going to use glow and apply it to a navigation bar to make look a little bit more ‘Wow’ than the average navigation bar, using nicely coloured gradients and bit of CSS magic, I’m going to show you how to achieve a real nice navigation effect, which looks smooth, sleek and with a few little extras to make it stand out.

(more…)

The Shadow effect in CSS3

Shadow in website design is something that can be achieved by using CSS and images, to achieve shadow in CSS2 you would use images and positioning, it can be achieved but it usually means that you have to create multiple divs. See my tutorial of creating shadow in CSS2 but one of the exciting new attributes in CSS3 is box-shadow which allows someone to get a nice shadow effect with just using one attribute applied to a div.

(more…)