HTML/CSS

Looking for tips and tutorials on making the most of your web site?  We take you through some useful techniques, explain some myths, and equip you to make your own web sites better.

Articles

Sprucing up images with CSS borders

Just floating an image in your text isn't enough to make it look good. However, CSS borders can be used to create attractive, stylish and effective border effects. Matthew Dawkins shows you how to make your photos look fantastic.

Sliding doors rollover effects

Ever since the 90s, when web sites became enormously popular and had garish animated GIFs in every conceievable position, web designers have been using rollover effects to create the feel of interactivity. However, the 'sliding doors' approach is faster and more efficient, and has enormous potential in a wide range of situations. It's not difficult either.

Add a shortcut icon

We all know how useful it is to have little icons next to our bookmarks so that we can quickly and easily see what the web sites are without having to read the bookmark text. But did you know how easy it is to add a favicon to your own web site? In fact all you need is a small .GIF image and an extra line in your html header. Yes, that’s right, it doesn’t have to be an .ICO or anything special, it doesn’t even have to be a specific size. You can even use an animated GIF, although that isn’t guaranteed to work with every browser.

Better headers

When it comes to the design of your web site, the site header is a fundamental section for consideration, as it will no doubt appear on all pages and set the tone and style throughout. A poorly planned or shoddily designed header will put off your visitors before they even see your content. However, it is more than just horizontal container for your company logo, and if you use an image on its own then you’re losing out.

Fixed or fluid?

When it comes to designing a web site, one of the decisions you have to make is how wide your design is: does it expand to whatever the width of the browser window is, or is it fixed at a specified width, and if so how wide should that be? Looking at other web sites there are good and bad examples of each, which leads us to conclude that it’s not so much which option you choose as how well you make use of it. In this tutorial we are going to look at the options, show you how to create each version, and point out some pros and cons for each.

Ultimate edges

In a previous post I explained a quick and easy way of adding rounded corners to a box that used background masking. This is fine if all you want is a simple rounded corner, but what if you’re after something more complex, like shadows and a bubble effect in addition to the rounded corners? This means dealing not only with the corners but also each side of the box, and if you still want to be able to make that box any size, you going to need a pretty kick-ass solution. And that’s what we’ve got here.

Creating rounded corners with PNGs and CSS

With all the hype about Web 2.0, many sites have started sporting rounded corners. I am going to demonstrate a method that I have developed that uses a few small PNG images and some handy CSS.

Mac-specific tweaks for gorgeous web sites

Mac users have long enjoyed visual superiority over their more populous PC rivals. Web sites can be made to take advantage of those Mac perks, by adding in a few bonus features; these will not adversely affect sites viewed on PCs, but will rather enhance the user experience for lucky Mac users.

Showing 1 - 8 of 8 Articles | Page 1 of 1

1