CSS

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

Build Responsive Sites Quickly with Foundation

31 July 2012 / 5 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!

Responsive Web Design: 5 Handy Tips

17 February 2012 / 2 Comments

In my previous article Responsive Web Design Demystified, I explained the concepts behind responsive web design, and showed how to build a simple responsive layout from the ground up.

In this article, you learn five additional techniques that will help you build great responsive layouts. You’ll put each technique into practice as you build on the responsive layout created in the previous article.

Here’s what you’ll learn in this article:

How to hide non-essential content on smaller screens
Creating collapsible blocks of content to make the best use of mobile displays
Scaling images in proportion to the available screen width
How to create responsive images that are optimised for different screen sizes and network speeds, and
Resizing type according to browser width.

Ready? Let’s get started!

Responsive Web Design Demystified

30 September 2011 / 27 Comments

Responsive web design is a hot topic these days, especially as websites need to adapt to the growing number of mobile devices with their relatively small screens. Many designers and developers want to create new websites with responsive layouts, or modify their existing sites to incorporate responsive elements.

However, the whole topic can be somewhat bewildering at first glance. Responsive design is a relatively new idea, and it is rapidly evolving. It’s full of rather confusing terms, such as responsive layouts, adaptive layouts, media queries and viewports. Where to begin?

In this article, you get a gentle introduction to the world of responsive web design. You’ll:

Learn exactly what responsive design is, and why it’s useful
Look at the difference between the terms “responsive design” and “adaptive design”
Take an existing fluid layout and convert it into a responsive layout that looks good on all screens, from mobile to widescreen desktop, and
See how media queries and the viewport meta tag can help you build responsive layouts.

Ready to explore the world of responsive design? Let’s go!

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!

IE9 Is Here! 7 Cross-Browser CSS Tricks You Can Now Use

15 April 2011 / 5 Comments

Last month, the newest version of Microsoft’s Internet Explorer browser, IE9, hit the streets. Market share for IE9 is already growing rapidly at the expense of older versions of IE, including the much-maligned IE6.

While its CSS3 support still has some major omissions, IE9 has much better CSS3 support than previous versions of IE. This means that you, as a web designer or developer, can use some of the exciting and useful features of CSS3, safe in the knowledge that even IE users can now see the results! (Well, if they’re running IE9, of course.)

In this article we’ll explore some of these new CSS features that are, at last, supported by Internet Explorer, and show what these features can do for you as a web designer or coder.

Of course, most Internet Explorer users are still running earlier versions of IE. There’s still hope though, even for these older browsers! We’ll look at solutions and workarounds for older IE versions at the end of the article.

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!

How to Make a CSS3 Floating Follow Tab with Rollover Effects

22 October 2010 / 13 Comments

View Demo »

Download Code

Recently, a reader asked us how we created our floating orange “follow” tab that appears on the right-hand side of every page on elated.com. It’s quite a nice effect and it also uses some interesting new CSS3 features, so I thought it’d make a good topic for a tutorial!

In this tutorial you’ll learn how to:

Work with CSS sprites
Position stuff relative to the browser window, rather than the page
Create CSS3 rounded borders
Add CSS3 drop shadows, and
Create cross-browser translucent gradient backgrounds (using no images!)

Ready? Let’s get started!

Smooth Fading Image Captions with Pure CSS3

29 September 2010 / 2 Comments

View Demo »

Download Code

CSS3 promises to usher in a new wave of gorgeous web design, with lovely features such as drop shadows, text shadows, rounded corners, gradients, and border images.

One CSS3 feature that is really starting to gain traction now is transitions. CSS transitions allow you to smoothly animate an element’s CSS properties from one state to another, without using a single line of JavaScript.

Most modern browsers now have good support for transitions, including Firefox 4, Safari 5, Mobile Safari and Opera 10. IE sadly doesn’t (and this includes the upcoming IE9). Fortunately, transitions usually degrade gracefully in browsers that don’t support them—instead of elements slowly moving from one state to another, they simply jump instantly between states.

In this tutorial I’ll show you how to use CSS3 transitions to create a nice fading caption effect on images. View it in action — as you hover over an image with the mouse, you’ll see its caption fade in. (Assuming you’re not using IE, of course.)

Naturally, mobile browsers with touchscreens don’t have a concept of hovering. Instead, you can tap an image to see its caption.

Along the way, we’ll also use some new HTML5 elements like figure and figcaption to create nice semantic markup.

Ready? Let’s get started!

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.

CSS

Footer

Contact Matt

Follow Matt