css

Build Responsive Sites Quickly with Foundation

31 July 2012 / 3 Comments

Responsive design is a big topic these days. A website with a responsive layout adapts to different devices — from widescreen desktops down to mobile phones — by resizing and rearranging the content in the page, as well as showing or hiding content.

While a basic responsive layout isn’t too hard to create, things can get fiddly once your layout starts getting more complex. On top of that, there are cross-browser issues to deal with, as well as setting up nice defaults for typography, colours, buttons, forms, menus, and so on.

This is where frameworks like Foundation come in. Foundation takes care of a lot of the “grunt work” involved in setting up a new site, with a responsive grid, cross-browser CSS, and good-looking default settings for all sorts of page elements.

In this introduction to Foundation, you’ll get an overview of Foundation’s features, and see how you can use the framework to rapidly prototype and build your next website. Enjoy!

LESS Is More: Make Your CSS Coding Easier with LESS

18 May 2011 / 8 Comments

In recent years, CSS has matured into a very powerful way to style web pages. It’s now possible to create a website’s look almost entirely in CSS, with minimal use of images.

This is great, but one drawback is that CSS stylesheets are becoming longer, more complex, and harder to manage. It’s not uncommon for a typical stylesheet to run into hundreds of lines of code, with a large number of interdependent rules.

For this reason, various dynamic stylesheet languages are starting to spring up. These allow you to write your CSS rules using a more flexible, powerful language that is then turned into regular CSS for the browser to interpret.

In this article you’ll learn how to use LESS, an increasingly popular dynamic CSS language that you can use to streamline your CSS coding, saving you time and effort.

Cover Flow Remade with CSS and jQuery

6 May 2011 / 10 Comments

View Demo »

Download Code

(Requires Safari)

If you’ve used a Mac or iTunes at all, you’ve probably come across the Cover Flow view. This shows you a series of album covers, photos, or other documents in 3D, allowing you to flip between them by clicking them, dragging a scrollbar, or using the arrow keys.

It’s a nice effect, but it requires a fair bit of processing power to accomplish. I thought it’d be a fun challenge to recreate it as closely as possible in a browser using CSS and JavaScript. At the start I had no idea if this was even possible, but I’m pretty happy with the result!

Free Pretty Web Fonts in 5 Minutes with Google Font API

26 November 2010 / 7 Comments

View Demo »

Download Code

For years, us web designers and coders were stuck with a pretty poor range of fonts that we could use across all platforms: Times, Arial, Verdana, and a handful more. If you wanted anything more original then you had to create your text as an image in Photoshop.

Well, times they are a-changin’, in the form of web fonts. These are online font files that you link to from within your page. The browser downloads the font you linked to, and you can then use that font for text within your web pages, just as if it was a regular system font. Lovely!

Web fonts are really starting to take off now, with services such as Typekit, Font Squirrel and Ascender giving you access to a range of free and paid web fonts.

In this tutorial I’ll show you how to use the Google Font API to add nice-looking web fonts to your pages. This service is a relative newcomer to the scene, but it has a couple of big strengths:

All the fonts are free
It’s very easy to use

So, let’s see how we can use the Google Font API to add pretty fonts to our web pages — in less than 5 minutes!

The Top 30 Websites, Viewed in IE6

12 November 2010 / 10 Comments

Internet Explorer 6. Nine years on, it’s still a headache for web designers and developers across the globe!

Most of us would like to forget about this horrid old browser — first launched in 2001, for crying out loud — but there’s always that client or user who insists on using it (or is forced to by their employer). Even among the audience of W3Schools — a web-savvy crowd if ever there was one — there are still around 5% of visitors using IE6 at the time of writing.

The result of all this is that we are forced to spend hours of extra coding time, just to make our sites work in this outdated browser.

How many big sites these days actually bother supporting IE6?

But how many big sites these days actually bother supporting IE6? One might think that they all would, considering their huge user bases. But is this the case?

Create Smooth Rotatable Images with CSS3 and jQuery

25 August 2010 / 18 Comments

View Demo »

Download Code

With the advent of CSS3 transforms, we can do some nice tricks with elements in a web page, including rotation, scaling, and skewing. Once we start throwing jQuery into the mix too, we can start doing some really nice tricks!

In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page. You can try it out right now by clicking the “View Demo” button above. Hold down Shift, then click and drag on a photo to rotate it.

I’ve based the code on this photo light table tutorial that I wrote a couple of months ago. In that tutorial, you could drag photos around the table, and click a photo to view it in a lightbox. Now, with this latest addition, you can also Shift-drag a photo to rotate it smoothly about its centre. Nice!

I should point out that this tutorial won’t work in IE at all, since IE (as of version 8) doesn’t support CSS transforms. I suspect it might work in IE9, although I don’t have it to test with. It also won’t work in touchscreen mobile browsers (yet) due to the lack of a Shift key!

Here’s how to code this baby up. Bear in mind that we’re starting with the script from the last tutorial, so if you want to follow along then you can download that code and work from it.

Kitchen Table: Adding a Lightbox

1 July 2010 / Leave a Comment

View Demo »
Download Code

In Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery, we created a nice-looking “light table” of draggable photos. This is a fun, novel way to display a handful of images in an image gallery. However it would be nice if the user could click a photo to enlarge it.

In this tutorial you’ll learn how to enhance the light table by adding a lightbox to display a bigger version of a photo when it’s clicked. You’ll also display a caption for the image within the lightbox.

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

11 June 2010 / 14 Comments

View Demo »
Download Code

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!

How to Make a Website

7 July 2009 / Leave a Comment

So you want to know how to make a website. Where do you begin? This article walks you through the basic steps:

Making your Web pages
Designing your website, and
Getting your website online.

A JavaScript Accordion to Show and Hide HTML

19 January 2009 / 28 Comments

In this tutorial you learn how to create a JavaScript accordion script using the Document Object Model. What’s an accordion? Click the link below to find out!

See the JavaScript accordion in action

As you can see, a JavaScript accordion is a useful way to squeeze lots of page content into a small space. It consists of a list of items, of which only one is expanded at any one time. When you click on another item’s heading, the first item collapses and the second item expands.

Let’s see how the accordion is put together.

css

Footer

Contact Matt

Follow Matt