CSS

Using Style Sheets to make your web building faster and easier.

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

11 June 2010 / 14 Comments

In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!

The aim is to make our table and photos look as realistic as possible. Here’s our desired feature list:

A wooden table background image for the photos to sit on
Each photo “floats” onto the table as it loads
Each photo is given a random position and orientation to create a “scattered” effect
The photos have a white border and drop shadow to add a 3D effect, and are ever-so-slightly transparent
Once on the table, a photo can be dragged around by using the mouse

Ready? Let’s go!

Book Review: Getting StartED with CSS

28 January 2010 / Leave a Comment

Getting StartED with CSS by David Powers is published by “friends of ED” / Apress. It was first published in late 2009. As the title implies, this is a book for CSS newbies or casual CSS coders who want to deepen their knowledge.

The timing of this book is spot on. Microsoft has finally produced a reasonably CSS-capable browser in the form of IE8, and IE6’s usage is starting to dwindle. Now is a great time to learn CSS 2.1 in depth, and discover what it can really do.

This book thoroughly explains pretty much all the features of CSS 2.1, and also touches on some of the features of the upcoming CSS 3.

Here’s my full review of the book.

Using CSS To Centre Content

23 June 2009 / 2 Comments

Centring things horizontally with CSS is straightforward once you learn a couple of techniques. In this article you learn how to centre any type of content, such as a block of text, an image, a table, a div element, or an entire page, all using CSS.

Styling Links with CSS

18 August 2008 / Leave a Comment

CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:

normal links
links that have already been visited
links that are being clicked on, and
links that are hovered over with the mouse.

You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.

Using CSS Shorthand for Fast-loading Websites

11 July 2008 / Leave a Comment

Nothing is more certain to turn away visitors than a slow-loading website, so it’s worth doing everything you can to make your site load as quickly as possible. Common techniques include compressing images and removing unnecessary markup from your pages; however, one often-overlooked aspect is your site’s CSS. With a complex page layout, a CSS file can easily run into the tens of kilobytes, adding significantly to a website’s initial load time.

Fortunately there are a number of CSS shorthand tricks you can use to dramatically reduce the size of your CSS files, and save typing at the same time! Let’s explore them.

Styling Tables with CSS

19 February 2008 / 8 Comments

In this tutorial, we’ll take a plain old HTML table:

… and transform it into something beautiful using nothing but CSS:

Techniques we’ll cover include:

Adjusting the spacing, padding and margin of table cells
Styling the borders of the table and the cells within the table
Changing text and background colours, and using background images
Creating alternately-coloured table rows to aid legibility
Adding a mouse hover effect to table rows
Styling the table caption

Making CSS Rollover Buttons

16 April 2007 / 191 Comments

Rollovers are a nice way to add visual feedback to your website’s buttons. As a visitor moves their mouse over a rollover button, it changes to indicate that it’s clickable.

In the bad old days of HTML, the only way to create a rollover was to use JavaScript to swap the two button images. While this works, it does rely on JavaScript being enabled in the browser. It also adds a fair bit of code bloat to the page, meaning longer download times, and more coding for you.

Thankfully, these days you can create a nice rollover effect using pure CSS; no JavaScript required! Roll your mouse over this button, which is created using just HTML, CSS and a single image:

So how’s it done? Well, it all centres around the :hover pseudo-class in CSS. Using this pseudo-class, you can style a link both in its normal state and in its hover (rollover) state. By making the link a block element and giving it a background image, we can turn the link into a button. We then simply jiggle the background image around to create the rollover effect.

Styling Forms with CSS

22 November 2006 / Leave a Comment

HTML forms are fantastically useful things, but by default they tend to look like something only a mother could love. Fortunately, with the aid of CSS, you can really transform the look of an HTML form, and make it much easier on the eye. This tutorial shows you how.

Internet Explorer Conditional Comments

1 August 2006 / Leave a Comment

What are conditional comments?

Conditional comments are a simple Internet-Explorer-only feature that Microsoft added to IE5 Windows and later. (Mac IE doesn’t support them.) They provide an easy way to detect that the visitor is using an IE browser (and which version they’re using). You can then serve IE users different blocks of HTML as required.

CSS Floats

17 July 2006 / 15 Comments

What are floats?

This box is floated right.

A float is simply a box (for example, a div) that is shifted to the left side or the right side of its container. We then say that the box is floated left or floated right.

One of the key benefits of floats is that they allow you to have bits of content sitting side by side, rather than one below the other (much like you can do with table columns, but better!). This allows you to do cool stuff like text columns, boxouts (like the one above), and advanced positioning of your page elements.

Floats are a bit like the align="left" and align="right" attributes in img elements.

[Read more…] about CSS Floats

CSS

What are conditional comments?

What are floats?

Footer

Contact Matt

Follow Matt