Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 01 2011

09:19

The ultimate responsive web design roundup

Responsive design is the new darling of the web design world. It seems that not a week goes by that there aren’t new resources for doing it, opinions about how to do it or even whether to do it at all, and new sites that make beautiful use of it.

It can quickly get overwhelming trying to keep up with it all.

Here we’ve compiled a list of more than seventy resources for creating responsive designs.

Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more.

Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas.

Articles and Publications

Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Some might include a few code snippets or other technical information, but for the most part, these are concept-level discussions.

Responsive Web Design

This is the original post by Ethan Marcotte that was posted on A List Apart. It discusses the reasoning and principles behind responsive design, as well as practical techniques for creating responsive sites.


Responsive Web Design Book

Responsive Web Design by Ethan Marcotte, published by A Book Apart, covers the state of the responsive web, flexible grids, flexible images, media queries, and how to create responsive designs.


The Practicalities of CSS Media Queries, Lessons Learned

This post, from Bloop, is a fantastic overview of how to use media queries (and their pros and cons compared to creating a dedicated mobile site), as well as some useful tips for implementing them. Some useful code snippets are included, too.


Big vs. Small: Challenges in Responsive Web Design

This article discusses some of the challenges responsive web design can present, including the unique considerations that are required as desktop screen sizes continue to grow, while at the same time many users are now accessing the web more on tablets or smartphones.


Beginner’s Guide to Responsive Web Design

This Beginner’s Guide from Think Vitamin offers a great introduction to responsive design, including information on fluid grids and media queries.


Responsive Web Design: What It Is and How To Use It

This introduction to responsive design from Smashing Magazine is a great primer on the subject. It covers the basic concept, as outlined by Ethan Marcotte, as well as practical concerns for creating responsive designs. Code examples are also included.


Responsive by Default

This article from Andy Hume discusses why the web is responsive by default, and that designers have been forcing it to be un-responsive for years. It’s an interesting idea, discussed mostly from a developer’s point of view.


Content Choreography

We often talk about responsive design strictly from the technical end of things, but the entire point of responsive design is to improve the content experience. This post from Trent Walton talks about just that, how stacking content isn’t always the best solution, and what can be done instead.


Understanding the Elements of Responsive Web Design

This post from Six Revisions covers the basics of responsive design: flexible grid, flexible images, and media queries.


A Brief Overview of Responsive Design

Here’s another great basic rundown of what responsive design is and how to achieve it, this time from 1st Web Designer.


Responsive Web Design has Created Opportunities Across the Board

This post covers some of the opportunities that responsive design presents for designers and developers.


Designing for a Responsive Web

This article from Webdesigntuts+ discusses responsive design in terms of fluid grid, fluid images, and media queries.


Experimenting with Responsive Web Design

This article from Lee Munroe gives a simple overview of responsive design, particularly media queries, as well as some examples.


CSS3 Media Queries

Web Designer Wall offers a great roundup of media query code snippets, responsive design examples, and more in this article.


20 Amazing Examples of Using Media Queries for Responsive Web Design

This post from Design Shack offers up some great examples of responsive design, as well as plenty of information how to create your own responsive sites.


Context

This post from Adactio covers some of the confusion that often surrounds responsive design, breaking it down in simple terms and offering some useful insight.


A Richer Canvas

This article from Mark Boulton discusses some of the advantages that responsive design, CSS3, and other tools give designers and content creators, specifically that we should be designing from the content out, rather than the other way around.


Some Thoughts on Responsive Web-Design and Media Queries

This post from Jon Phillips discusses some of the potential downsides to responsive design and, more importantly, offers some great solutions.


Responsive Web Design and Mobile Context

This post discusses how mobile devices are being used for browsing web content, and how that can affect your responsive design choices.


The New Front End Design Stack: The Role of Responsive Design

This post from Acquia discusses the importance of responsive design, offers some great examples, the technical elements that go into creating responsive designs, and more.


Responsive Web Design from the Future

Responsive Web Design from the Future is a presentation by Kyle Neath that discusses the future of web design in relation to responsive design principles.


To Hell With Bad Devices: Responsive Web Design and Web Standards

This is an in-depth look at responsive design, discussing device-specific design, what responsive design means for apps, and more.


The Pros and Cons of Responsive Web Design

Plenty of articles discuss how to create a responsive design, but not that many discuss the good and bad things about responsive designs. The Pam does just that, giving a fairly comprehensive list of the positives and negatives associated.


11 Reasons Why Responsive Web Design Isn’t That Cool

This post from WebDesignShock outlines some of the potential challenges and problems that responsive design can present.


Tutorials

The tutorials below will teach you about CSS media queries and other responsive design techniques.

Quick Tip: A Crash-Course in CSS Media Queries

This Nettuts+ tutorial offers some basics for working with media queries, complete with video tutorial and code snippets.


Adaptive Layouts with Media Queries

This tutorial from .Net Magazine offers a look at basic CSS3 media query techniques. It includes plenty of code snippets and practical information about crafting your own responsive layouts.


Responsive Web Design: A Visual Guide

This video tutorial from Tuts+ offers a great introduction to what responsive design looks like, with examples. It then explains how to create your own responsive design, taking into account both the visual and technical aspects.


CSS Media Queries & Using Available Space

This post from CSS-Tricks explains the concept of using media queries to take advantage of the available space in the browser viewport. It includes plenty of useful code snippets and examples.


Working with Media Queries

Here’s a short tutorial for working with media queries, with plenty of code examples. It’s basic and to-the-point, but a perfect introduction to basic media queries.


How to Use CSS3 Orientation Media Queries

Media queries are great for adjusting the way your responsive design displays on different browser sizes, but a lot of designers overlook the orientation controls. These allow you to change the way your site is displayed based on whether a device is currently oriented to portrait or landscape mode, which is useful for both smart phones and tablets.


Optimizing Your Email for Mobile Devices with the @media Query

We often overlook HTML email newsletters when thinking about responsive design, but considering the number of people who are likely to view your HTML emails on their phone, it’s a good idea to use media queries in this case. This post from Campaign Monitor explains how it’s done.


How to Use CSS3 Media Queries to Create a Mobile Version of Your Website

This post from Smashing Magazine explains how to use media queries for creating a mobile site or otherwise linking separate stylesheets.


Adaptive & Responsive Design with CSS3 Media Queries

This fantastic post from Web Designer Wall includes a responsive design template, as well as a tutorial on how the template was created. It’s a great resource for those who like to learn new techniques by dissecting finished projects.


Responsive Web Design with HTML5 and the Less Framework 3

This article from SitePoint offers thorough instructions for creating a responsive design using HTML5 and the Less Framework. It includes all the code you’ll need for the final design, as well as a good breakdown of what that code does.


Tools and Techniques

The techniques and tools below make it a lot easier to create designs that respond the way you want them to. Many are for handling images (arguably one of the more challenging aspects of responsive design), but there are others, too.

CSS Effect: Spacing Images Out to Match Text Height

Depending on your layout, you may need text to line up properly with images, regardless of how the images and text are spaced. This technique from Zomigi shows you how to do just that.


Hiding and Revealing Portions of Images

Resizing images can only take you so far with responsive designs in some cases. At times, it’s more important for a particular part of an image to be visible or readable than for the entire image to be shown. That’s where this technique from Zomigi can come in handy. It makes it possible to dynamically crop background and foreground images as your layout width changes.


Creating Sliding Composite Images

This technique, from Zomigi, lets you create what appears to be a single image but is actually multiple images layered on top of one another. In this way, you can control the exact placement of different elements of the image as your browser viewport changes size and shape.


Seamless Responsive Photo Grid

This gallery from CSS-Tricks offers up a seamless photo grid that automatically resizes your images and the overall grid to fit your browser viewport.


Responsive Data Tables

Responsive design techniques aren’t very friendly to data tables. It’s easy to end up with tables where the type is so small it’s impossible to read. Or you can specify a minimum width, but then that kind of defeats the purpose of a responsive design. This technique from CSS-Tricks offers a solution for responsively displaying tabular data on a mobile device.


Foreground Images that Scale with the Layout

So it’s easy enough to create scaling background images, but foreground images are a little trickier. This article covers a technique from Zomigi for creating foreground images in your content that will scale with your layout.


FitText

FitText is a jQuery plugin for scaling headline text in your responsive designs. Using this, your text will always fill the width of the parent element.


Sencha.io Src

Sencha.io Src is an image hosting service that sizes your images to the appropriate size for the device requesting them. Images are also optimized for efficient repeat delivery.


The Goldilocks Approach to Responsive Design

This post by Chris Armstrong talks about the “Goldilocks Approach” for creating responsive designs that are “just right” for any device.


Responsive-Images

Responsive-Images is an experiment in mobile-first images that scale responsively to fit your design. The idea is to deliver optimized, contextual image sizes in responsive layouts.


Lettering.js

Lettering.js is a jQuery plugin that gives you precise control over the way your web typography appears, which can be a big plus in maintaining readability in a responsive design.


Fluid Images

This technique from Ethan Marcotte creates fluid-width images for your fluid designs. It also works for embedded videos, and there’s a workaround for IE compatibility.


Respond

Respond is a lightweight polyfill script for min/max width CSS3 media queries, to make them work in Internet Explorer 6-8. It’s only 3kb minified, or 1kb gzipped.


Modernizr

Modernizr is a toolkit for HTML5 and CSS3 that provides JavaScript-driven feature detection combined with media queries.


Responsive Web Design Sketch Sheets

If you wireframe your designs on paper, you’ll find these Responsive Web Design Sketch Sheets to be very useful. There are a couple of different layouts you can download for free, each of which shows a handful of likely device viewports.


Frameworks and Boilerplates

Frameworks and boilerplates can greatly speed up your design process. The good news is that there are tons of boilerplates and frameworks already available for creating responsive designs.

Golden Grid System

The Golden Grid System uses a 16-column base design for widescreen monitors. On tablets, the columns will fold into an 8-column layout. And on smaller smartphone screens, the columns fold again to 4-columns, allowing the design to adapt to anything from a 2560 pixel wide screen down to a 240 pixel screen.


The Semantic Grid System

The Semantic Grid System allows for fluid layouts and responsive designs, while also using semantic markup (which is sorely lacking from most grid frameworks).


Gridless

Gridless is an HTML5 and CSS3 boilerplate for creating mobile-first responsive websites. It includes no predefined grid system and no non-semantic classes.


Less Framework 4

The Less Framework is a CSS grid system for designing responsive sites that adapt to the size of the browser viewport. It has four layouts: default (for desktops and landscape mode tablets), tablet layout, wide mobile layout, and mobile layout. This is a good option for designers who want a responsive design but don’t necessarily want fluid columns.


Responsive Twenty Ten

Responsive Twenty Ten is based on the Twenty Ten WordPress theme. There’s also a plugin available to turn your Twenty Ten child theme into a responsive design.


Columnal

Columnal is a CSS grid system that’s a “remix” of some other grids, with added custom code. The elastic grid base is taken from cssgrid.net, while other bits of code are taken from 960.gs.


1140 CSS Grid

The 1140 CSS Grid System is a flexible, fluid grid that will rearrange based on the browser viewport. It’s designed to fit perfectly in a 1280 pixel wide monitor, but becomes fluid below that.


320 and Up

320 and Up uses the mobile-first principle to prevent mobile devices from downloading desktop assets. It’s an alternative to starting with a desktop version and scaling down.


Skeleton

Skeleton is a boilterplate for responsive, mobile-friend designs. It starts with the 960 grid but scales down for smaller screens, and is designed to be both fast to get started with a style agnostic.


Fluid Grid System

The Fluid Grid System is based on a six-column grid and has 720 different layout possibilities. Because of its simplicity, it degrades well in older browsers.


Fluid 960 Grid System

The Fluid 960 Grid System is based on 960.gs, but has a fluid layout regardless of browser size.


Foldy960

Foldy960 is a responsive version of 960.gs. It consists of some extra classes and other things for turning a 960.gs design into a responsive design.


SimpleGrid

SimpleGrid is another responsive grid framework that supports infinite nesting. It’s configured for screens at four different sizes, including 1235px and 720px.


Testing Tools

These tools make it much easier to test your responsive designs without having to use a bunch of different devices.

resizeMyBrowser

resizeMyBrowser is a useful testing tool for responsive designs. Just click one of the predefined browser size buttons and your browser will resize. Each size is labeled with the name of at least one device that uses that resolution.


responsivepx

responsivepx is a browser testing tool that lets you enter a URL (local or online) and then adjust the height and width of the browser viewport to see exact break-point widths in pixels.


Responsive Design Testing

Matt Kersley has created this browser testing tool that lets you see exactly how your site displays at common browser widths, starting at 240px and going up to 1024px.


Screenfly

Screenfly shows you how a website will look on various devices, including internet-enabled TVs and mobile devices.


Adobe Device Central

A number of Adobe Creative Suite products come with Device Central, which can be a very valuable tool for testing your responsive designs. It lets you not only preview, but also test your designs on the device of your choice.


Examples

Below are 100 examples of fantastic responsive designs. There are a lot more sites out there using the technique, and new ones are launched every day. One great resource for finding new sites is Media Queries, a gallery dedicated specifically to sites using responsive design techniques.

Profi Span


Forgotten Presidents


Ben Handzo


Aaron Shekey


The Highway Hurricanes


dConstruct 2011


Merlin Ord & Media


The Happy Bit


Forefathers


Easy Readers: Adaptive Web Design


More Hazards More Heroes


Facts Regula


Hi, My Name is Andrew


Sifter


FoodDrinkEurope


The Obvious Corporation


Geek in the Park


Mapalong


JCHELBY


10K Apart


Expositio


Food Sense


New Adventures in Web Design Conference


Cisco London 2012


Team PAWS Chicago


Diablo Media


Andersson-Wise Architects


Designing with Data


Full Frontal 2011


Aaron Weyenberg


Web Design Yorkshire


Winnie Lim


Urban Svensson


Luke Williams


Upperdog


Writer


Toronto Standard


Design Professionalism


Impact Dialing


Modernizr


Johan Brook


Dust and Mold Design


Gridchin


Staffanstorp


El Sendero del Cacao


Dustin Senos


Kisko Labs



51bits


digitalHappy


Patrick Grady


Trent Walton


Headshift


Owltastic


WeeNudge


Ash Physical Training


Mark Boulton


The Modern Gentleman


Build Guild


Do Lectures


David Hughes


320 and Up


About.com


Really Simple


Splendid


Leica Explorer


Spigot Design


Cohenspire


Jason Weaver


Joni Korpi


iwantedrock.com


Converge SE


Pelican Fly


Simple Bits


Information Architects


Andy Croll


Hicks Design


8 Faces


The Sweet Hat Club


Little Pea Bakery


Sleepstreet


Andrew Revitt


Cujo.jp


Interim.it


Philip Meissner Design


Teixido


Transfinancieel


UX London


Jeremy Madrid


Brad Dielman


Thomas Prior


Clearleft


Herjen Oldenbeuving


Bureau


City Crawlers Berlin


CSS-Tricks


Robot…or Not?


Marcelino Llano


Caleb Ogden


A Flexible Grid


Simon Collison


More roundups

Here are some more great responsive design roundups from other sites.


Written exclusively for WDD by Cameron Chapman.

Are you using responsive design techniques in your projects? Know of any resources we missed? Let us know in the comments!

Source

March 10 2010

14:40

What We're Reading

It's time for another roundup of links from NYT developers and Open blog readers. This week features lots of JavaScript-oriented links (not that there's anything wrong with that).

December 16 2009

13:53

Stronger, Better, Faster Design with CSS3

Smashing-magazine-advertisement in Stronger, Better, Faster Design with CSS3
 in Stronger, Better, Faster Design with CSS3  in Stronger, Better, Faster Design with CSS3  in Stronger, Better, Faster Design with CSS3

Spacer in Stronger, Better, Faster Design with CSS3

Stronger, Better, Faster Design with CSS3 (via @smashingmag) -

In our last article about CSS3, “Pushing Your Buttons With Practical CSS3, we talked about using new CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and (in some cases) hilarious buttons.

In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts. As before, caveat coder — a lot of the CSS properties we’re going to use have limited support, if any, in IE6/7 and probably 8. Firefox 3.5+ and Safari 4 are your best bet right now to see all the cool stuff going on in CSS right now (Chrome does a pretty good job, too).

Why bother with CSS that has such limited support? It won’t always have limited support, and these articles are all about preparing for the future of web design (and just doing some really cool stuff). Apparently, if you are one of those people who is waiting until using progressive CSS is safe because all major browsers support the same CSS at the same time, you are living in a fantasy world, so it’s just the right time to get things rolling with CSS3.

Ready? Let’s roll.

Inline Form Labels

Everyone’s familiar with inline form labels — storing the label of the field in the value attribute and using some minor JavaScript to erase the text when the field gains focus. This works…okay, but the major problem is that as soon as the user clicks, they lose the label entirely. If they tabbed right into it they may not even have read the label, in which case they’re just guessing.

The first site we saw that fixed this was MobileMe from Apple, on their login screen.

Inline-1 in Stronger, Better, Faster Design with CSS3

What happens with Apple is that clicking into the field fades the label back, but doesn’t erase it. Cooler still is that the cursor stays positioned left so you can start typing, and the JavaScript making that happen is not overly complex — it’s just layout tricks. They position a label behind the input containing the name of the field.Inline-2 in Stronger, Better, Faster Design with CSS3 When you click into the field they use JavaScript to apply a class to the label that knocks it back, and another class as you start typing to make the label vanish.

We wrote a blog post about this effect some time ago, describing how you could replicate it yourself. The problem is that over time setting up the page to support this isn’t as turnkey as we’d like, so we’ve revised and rebuilt it just for you (and, of course, for us).

The New Inline Label

Our new approach is considerably easier — to use it in our own products (like Notable and Scrumptious) we simply add class="inlined" to the label and voila! Here’s how we do it.

Start with a regular label and input:

	<label for="demoForm1">Email Address</label>
	<input class="input-text" id="demoForm1" />

In previous iterations of this technique we went to the trouble of wrapping the label and input in a block-level element and used absolute positioning to put the label behind the input. Not anymore. First, we’ll add the “inlined” class to only the label:

	<label for="demoForm1" class="inlined">Email Address</label>
	<input class="input-text" id="demoForm1" />

Now we need to do a couple of things to get our labels to display correctly. First, we use negative margins to pull the input up and over the label. We’ll do this by using the CSS adjacent selector, which looks like this:

	label.inlined + input.input-text {
		margin-top: -22px;
		background-color: transparent;
		position: relative; z-index: 2;
	}

That code tells the browser to apply the style to any input.input-text which immediately follows a label.inlined — this way we can use the negative margin to pull the input up and over the label itself. We also set the background color to transparent and give the input a relative position and a z-index value.

Next we need to style the label itself. You’ll need to adapt the styling here to mirror your input text style — the goal is for the text inside the label to appear as though it is actually part of the input. Here are the critical pieces:

	label.inlined {
		padding-left: 6px;
		font: normal 12px/18px "Helvetica Neue";
		position: relative; z-index: 1;
		opacity: 0.75;
		-webkit-transition: opacity 0.15s linear;
	}

Let’s break that down. Padding and font are simply to mirror the input style. The positioning and z-index make sure the label stays behind the input — otherwise the input can’t be selected. Now the fun parts: opacity and -webkit-transition.

Our form labels work by fading back the label at different points. We start with the label faded back a little, hence the opacity: 0.75. You could also use color to drop the label back, but opacity works regardless of the font color. We add in the -webkit-transition so that whenever the opacity changes, the browser (Safari or Chrome, in this case) will change the opacity smoothly over about 1/8th of a second. So when does the opacity change?

Two times — when the user focuses on the field, and when they start typing. Let’s create two CSS classes we can apply for those states: focus and has-text.

	label.focus {
		opacity: 0.35;
	}

	label.has-text {
		opacity: 0.0;
		-webkit-transition-duration: 0s;
	}

As you can see, we reduce the opacity of the label when the user clicks in, then make it invisible when they start to type. We change the duration of our transition so that as a user starts to type, the label disappears immediately, rather than fading back as they type. Now that we have our fields structurally set up and styled the way we want, the last step is a little bit of JavaScript.

Adding the JavaScript

Even though CSS3 has added new tricks like animations and transitions, JavaScript is still king when it comes to interaction. To get our labels to behave, we need to use a few simple JavaScript functions. In these examples we’ll be writing for jQuery, but they’re easy to adapt to Prototype or straight JavaScript.

The JavaScript needs to do three things:

  1. Add the focus class to the label when the user clicks into a field
  2. Add the has-text class as soon as they start typing
  3. Bring the label back if they leave the field empty and switch to another field.
$(document).ready(function(){
	$("label.inlined + input.input-text").each(function (type) {

		$(this).focus(function () {
			$(this).prev("label.inlined").addClass("focus");
		});

		$(this).keypress(function () {
			$(this).prev("label.inlined").addClass("has-text").removeClass("focus");
		});

		$(this).blur(function () {
			if($(this).val() == "") {
				$(this).prev("label.inlined").removeClass("has-text").removeClass("focus");
			}
		});
	});
});

We won’t pore over the JavaScript much — it’s pretty self-explanatory. jQuery let’s us quickly target the inputs we want by recognizing the same selector we’re using in CSS, but otherwise it’s all cut and dried. And there it is: inline labels that appear as refined versions of standard inline labels, but have much smoother interaction. Going forward now we can make any label inline by adding class="inlined" to the label — CSS and JavaScript will take care of the rest.

Inline-form-labels in Stronger, Better, Faster Design with CSS3
See the Live Demo »

We’ve created a live demo page for these forms in our Playground, a place for us to create small side projects and examples of cool toys. We’ll be linking to the Playground examples throughout this post and the rest of the series.

Fast, Easy Drop-in Modals

Next we’ll show you how to create easy modals that you can control with just one line of JavaScript. We use modals to great effect in our feedback tool, Notable, and while in Notable we use Ajax to load modals on the fly, this example will show you how easy it is to create an on-page modal.

The basic structure of our modals is a div.modal containing whatever we want. It could be an alert triggered by your page, a sign-in or sign-up form, or other information or actions that we don’t want to trigger a full page load. We’ll use some of our new CSS3 styles to make the modals look awesome and feel…well, modal, then turn them on with a single line of JavaScript.

The Simple Modal

Our first modal example is a simpler style, with a simpler animation. We’ll style the div to resemble a padded, floating box with a standard drop shadow so it appears to hover over the page. To make it appear, we’ll fade it up from an opacity of 0, and to close it, we’ll dismiss it immediately.

Modal-1 in Stronger, Better, Faster Design with CSS3

The modal style here uses a couple new CSS3 elements: -webkit-box-shadow to create the drop shadow and -webkit-transition (which you’ll recognize from the inline labels above) to fade it in without using JavaScript animation. Below are the styles for the modal; we’ll go over the new pieces in a second.

	div#simpleModal {
		width: 560px;
		position: absolute; top: 40px; left: 170px;
		padding: 20px;
		border: solid 1px #bbb;
		background: #fff;
		-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
		-webkit-transition: -opacity 0.0s ease-out;
	}

	div#simpleModal.shown {
		opacity: 1.0;
		z-index: 100;
		-webkit-transition-duration: 0.25s;
	}

Most of the styling here is pretty standard — size and position as well as decent padding and a light grey border. The new pieces here are -webkit-box-shadow and -webkit-transition. We covered both of those new attributes in our article on CSS3 buttons so we’ll go over them quickly.

-webkit-box-shadow (or box-shadow as it will be called when the CSS3 spec is finalized and implemented) takes a few arguments. The first two properties are the offset, X and Y. In this case no X offset, 3px of Y offset. This puts the shadow just below the object. The next argument, 6px, sets the spread size: 6 pixels out from the box shape.

Finally we set a box-shadow color using RGBa, which lets us set an RGB color (black, in this case) and then set an opacity, or alpha channel. By using black with 25% opacity we can be sure it will darken whatever color it overlays; if we used something like #333 it would actually appear to glow on a black background, rather than look like a shadow.

The Fancy Modal

That modal is okay — it gets the job done and once you know it, the pieces can be put together in less than 5 minutes. We wanted to do a little more for Notable, so we cooked up a fancier style using a few other CSS tricks like -webkit-gradient and -webkit-transform.

Modal-2 in Stronger, Better, Faster Design with CSS3

This modal is a little flashier and more akin to a desktop app in terms of interaction: it slides down from the top and gets a little more chroming than the simple modal. We accomplish this through a couple of cool tricks.

	div#fancyModal {
		display: block; width: 560px;
		position: absolute; top: -310px; left: 170px;
		padding: 90px 20px 20px 20px;
		border: solid 1px #999;
		background: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255)), to(rgb(230,230,230)));
		-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
		-webkit-border-bottom-left-radius: 6px;
		-webkit-border-bottom-right-radius: 6px;
		-webkit-transition: -webkit-transform 0.25s ease-out;
		-webkit-transform: translateY(-570px);
		-moz-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
		-moz-border-radius: 0 0 6px 6px;
		-moz-transform: translateY(-570px);
	}

First we generate a gradient for the background. Obviously we could just create a tiling background image for the gradient, but where’s the fun in that? We’ll have the browser create one using -webkit-gradient, which is a CSS function that creates a gradient you can use anywhere you would use an image. As you can see above, -webkit-gradient has quite a few attributes; it’s not as bad as it seems. Let’s break it down:

  • linear means that this gradient goes from one point to another, in a straight line. You can also use radial to create a circular gradient.
  • left top, left bottom are the coordinates for starting and stopping, in this case going from top to bottom with no angle. If we used left top, right bottom the gradient would stretch diagonally across the div.
  • from(rgb(255,255,255)) is the starting color, in this case white.
  • to(rgb(230,230,230)) is the ending color. We could also put color-stop elements in between if we wanted to vary the color as we went.

That wasn’t so hard! Gradients are going to be a great way to add those flourishes to design without having to futz around with image backgrounds – these are easily created and modified in just a couple of lines. Now let’s look at the fancier part of this modal: the appearance animation.

	div#fancyModal {
		…
		-webkit-transition: -webkit-transform 0.25s ease-out;
		-webkit-transform: translateY(-570px);
	}

What we’re doing here is using a property called -webkit-transform to move the modal up and out of the viewport. Since transforms don’t impact the DOM we don’t get any weird effects or problems — the div just moves up without impacting anything else. So when the page loads, our div will be located above the page. When we add class="shown" to the div, it will get a new transform position, and the -webkit-transition will cause the transformation to be applied over a quarter of a second — this is what causes the modal to slide down from the top of the page.

As you can see, creating a fairly fancy modal style is pretty easy with these new CSS3 effects. Our last step is a simple line of JavaScript to apply a shown class to the modal. For our simple modal, it changes the opacity to 1; for our fancy modal, it changes the transform position to 0 (rather than -570px). Our transition then takes care of the actual animation.

Drop-in-modals in Stronger, Better, Faster Design with CSS3
See the Live Demo »

You can check out the live demo on the Playground. We’ve got the source code and clickable examples of the two modals (requires WebKit).

Newspaper Layouts with Columns and Image Masks

Our final example in this article will demonstrate how to use a couple of new CSS attributes and functions to create a cool newspaper layout — in this case the Super Awesome Times.

The faux-newspaper look goes in and out of style online pretty frequently, but these tricks can be used for quite a few cool applications. What we’ll talk about here is using -webkit-mask-image and -webkit-column-count.

Using Image Masks

Image masking is a way to affect the alpha channel of a block-level element by masking it with another image (or anything that can take the place of an image, like a gradient). For the Super Awesome Times we wanted to apply a subtle gradient to the masthead. We could simply render an image, but that’s no fun. Instead we masked the text (which in this case is an image, but with @font-face you could use text instead) with a generated gradient. Check it out:

	div#masthead img {
	-webkit-mask-image:
		-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(0,0,0,.75)), to(rgba(0,0,0,1)));
	}

The only property we need is -webkit-mask-image — the browser will use whatever you supply to create an alpha mask for the image or block element you’ve applied the mask to. In this case we use a gradient, which causes the masthead to fade from 75% opacity to 100%. Below is the masthead with the mask, and without — so you can see the difference:

Newspaper-1 in Stronger, Better, Faster Design with CSS3

It’s a subtle change, but some added depth can go a long way. There’s a great introduction to using masks over on Surfin’ Safari, the official WebKit blog. You can see how masks can be used for all sorts of interesting effects — even masking out an actual playing video.

Stunningly Easy Text Columns

Finally, we’ll show you how to use a new (and very poorly supported, so far) property in CSS3: text columns. Not the floated div kind, but the kind where you can simply set the number of columns and the gutter and have the browser do the rest.

Newspaper-2 in Stronger, Better, Faster Design with CSS3
3 columns, no fuss.

In the example above you can see three columns of text, but if you click through to the live example and view the source code, you’ll see that we’ve used just one div containing a number of paragraphs. Nothing tricky, no floats, no bizarre height manipulations — we’re just telling the browser to put the content of that block into 3 columns with 15px of space between them. Here’s how:

	div.three-col {
		-webkit-column-count: 3;
		-webkit-column-gap: 15px;
		-moz-column-count: 3;
		-moz-column-gap: 15px;
	}

That’s it! Simple, easy markup and styling. The catch here is that even in forward-thinking browsers this property has pretty poor support — there are a number of other properties (like dividers, breakers, etc) that haven’t been implemented or at all supported yet. This is just a taste of what’s to come — simple columns are on the way, but not here just yet.

Newspaper-layout-th in Stronger, Better, Faster Design with CSS3
See the Live Demo »

Check out the Super Awesome Times on the Playground – just creating this prototype got some cool ideas kicking for our own site and blog.

Coming Up in CSS3…

We hope you enjoyed this further foray into CSS3. You can still check out our article on CSS3 buttons (including one which, no kidding, glows radioactively). Stay tuned for the third and final article in the series, where we’ll take the CSS properties and really go to town with polaroids, an OS X dock, vinyl album music players and more.

References and Resources:


© ZURB for Smashing Magazine, 2009. | Permalink | 61 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, css3

Tags: Coding CSS css3
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl