CSS-Tricks

Art and the Web

Chris Coyier — Wed, 08 Jun 2011 16:21:31 +0000

My buddy Nick Pettit is writing a book called Art and the Web which is going to cover the fundamentals of art (well some of the big ones anyway: Line, Shape, and Form) and how they relate to the web. I've long preached that learning art fundamentals will take you farther than learning the technology du jour, so I'm happy to see this be written. This is the first of three parts, all of which will be free.

Direct Link to Article — Permalink

Advertise here with BSA

Fluid Width YouTube Videos

Chris Coyier — Wed, 08 Jun 2011 13:00:33 +0000

This article was originally written on September 2, 2010 and is now being updated to be mo' better. It now handles YouTube videos of different aspect ratios, the new iframe embed method, and with more efficient scripts.

The code that YouTube gives you to embed a video is now a very simple iframe. Here's an example:

iFrames, including the example YouTube code above, contain external content which cannot really be measured from the parent page. The width and height settings are necessary to define the size of the iframe, as the content inside will not help shape it (like an image would). But setting a static width and height on an element poses a problem for any type of fluid/flexible design. If the parent area shrinks in width to be narrower than the video, the video will break out, not shrink to fit.

Web Designer Wall recently published an article on how to deal with fluid width video. The idea originally came from Thierry Koblentz who wrote about it on his site and A List Apart.

I love the ideas presented there. They are pure CSS (yay), clever, and do their job super well. But the solution they have for YouTube videos has two inherit shortcomings:

The aspect ratio for the videos is pre-defined. The clever padding-bottom: 56.25% thing makes for an aspect ratio of 16:9 which is great for some videos but certainly not all.
You have to use additional markup. Each video needs to be wrapped in another HTML element. I wouldn't call it non-semantic since it may make sense to use a
or something but it's certainly more work.

If you don't care about either of those things, by all means use that, it's a much cleaner solution. If that does matter, we're going to need to employ some JavaScript.

Doing it with jQuery

The cool part about this JavaScript solution is that you just copy-and-paste YouTube embed code onto your page and don't think about it. Whatever aspect ratio you want to set it to is fine. And no extra markup.

The basics are:

Figure out and save the aspect ratio for all videos on the page.
When the window is resized, figure out the new width of the content area and resize all videos to match that width with their original aspect ratio.

Here's the full script with comments:

// By Chris Coyier & tweaked by Mathias Bynens
//AN_Xml:
//AN_Xml:$(function() {
//AN_Xml:
//AN_Xml:	// Find all YouTube videos
//AN_Xml:	var $allVideos = $("iframe[src^='http://www.youtube.com']"),
//AN_Xml:
//AN_Xml:	    // The element that is fluid width
//AN_Xml:	    $fluidEl = $("body");
//AN_Xml:
//AN_Xml:	// Figure out and save aspect ratio for each video
//AN_Xml:	$allVideos.each(function() {
//AN_Xml:
//AN_Xml:		$(this)
//AN_Xml:			.data('aspectRatio', this.height / this.width)
//AN_Xml:
//AN_Xml:			// and remove the hard coded width/height
//AN_Xml:			.removeAttr('height')
//AN_Xml:			.removeAttr('width');
//AN_Xml:
//AN_Xml:	});
//AN_Xml:
//AN_Xml:	// When the window is resized
//AN_Xml:	// (You'll probably want to debounce this)
//AN_Xml:	$(window).resize(function() {
//AN_Xml:
//AN_Xml:		var newWidth = $fluidEl.width();
//AN_Xml:
//AN_Xml:		// Resize all videos according to their own aspect ratio
//AN_Xml:		$allVideos.each(function() {
//AN_Xml:
//AN_Xml:			var $el = $(this);
//AN_Xml:			$el
//AN_Xml:				.width(newWidth)
//AN_Xml:				.height(newWidth * $el.data('aspectRatio'));
//AN_Xml:
//AN_Xml:		});
//AN_Xml:
//AN_Xml:	// Kick off one resize to fix all videos on page load
//AN_Xml:	}).resize();
//AN_Xml:
//AN_Xml:});

To use this on your own site the only thing you'd need to change is the line $fluidEl = $("body");. You'd change the selector ("body"), to whatever element on your page is the fluid width parent of the content. Perhaps that's "#main-content" or something, if the element was

A quick word on window.resize: Anytime you see functions running on the window resize event, you should have some alarm bells go off in your head. Browsers fire that particular event with different frequency. WebKit can fire it eleventybillion times during a quick little resizing, so if you do much heavy computational stuff you can see some adverse page performance. Here's a plugin from Paul Irish on "debouncing" resize to deal with that problem, which I heavily recommend.

View Demo Download Files

I'm going to leave the "old version" inside the download too (before this article was updated) as it handles the "old" types of YouTube embeds (object/embed elements).

Advertise here with BSA

Color Animate Any Shape with a Knockout PNG

Chris Coyier — Wed, 08 Jun 2011 02:07:05 +0000

You normally don't think of as having a background color, but they certain can have that property. It might come up if say, you wanted two borders around your images. You could use border for one and simulate the other by giving the image a background-color and padding. Or maybe you set the background to a bright red color so that missing images are bold and obvious.

There is another reason you might want to declare a background color on an image, and that's to show the color through the transparent parts of the image. In fact, with that idea, you can create any shape you want as a "knockout" and set the color behind it. That means you can control the color of that unique shape through CSS and do any of the neat stuff CSS can do. Like say, animate it's color!

First we make an image where the solid parts match the solid color of the background of the site we are working with. For sake of example, white. The "shape" is the transparent part. Here's what that would look like in Photoshop:

We put it in the markup:

And we color it:

img { background: red; }

Then we make an animation to cycle through some colors. Two syntaxes for this now (grunt):

@-webkit-keyframes super-rainbow {
//AN_Xml:    0%   { background: red; }
//AN_Xml:    20%  { background: orange; }
//AN_Xml:    40%  { background: yellow; }
//AN_Xml:    60%  { background: green; }
//AN_Xml:    80%  { background: blue; }
//AN_Xml:    100% { background: violet; }
//AN_Xml:}
//AN_Xml:
//AN_Xml:@-moz-keyframes super-rainbow {
//AN_Xml:    0%   { background: red; }
//AN_Xml:    20%  { background: orange; }
//AN_Xml:    40%  { background: yellow; }
//AN_Xml:    60%  { background: green; }
//AN_Xml:    80%  { background: blue; }
//AN_Xml:    100% { background: violet; }
//AN_Xml:}

Then we apply that animation to the image:

img {
//AN_Xml:     background: red;
//AN_Xml:     -webkit-animation: super-rainbow 15s infinite alternate linear;
//AN_Xml:     -moz-animation: super-rainbow 15s infinite alternate linear;
//AN_Xml:}

That'll do 'er. Check out the demo for this example and other quick fun one of rainbow gradient on a bicycle shape that moves on hover.

View Demo Download Files

Images snagged off of Vecteezy.

Advertise here with BSA

Online Conference: CSS Summit

Chris Coyier — Tue, 07 Jun 2011 15:01:35 +0000

Tuesday/Wednesday July 26/27, 2011 is the CSS Summit, an online conference all about CSS. I'll be talking the second day. Super hot lineup! Use the code 20COYIER to save 20% on any type of ticket.

Direct Link to Article — Permalink

Advertise here with BSA

Recent Bits

Chris Coyier — Tue, 07 Jun 2011 01:27:15 +0000

I was out last week getting my bluegrass festival thing on. I'm just catching up with the ol' internet and thought I'd recap the interesting bits:

Modernizr 2 is out and it has new stuff like vendor prefix testing, media query support, and better docs.
Theoretically, you can kern text by adding spans and tweaking margin. But that's a huge pain in the ass. Now you can use Kern.js (plus Lettering.js actually on your page) to click-and-drag tweak a headlines kerning then snag the CSS. So it's not just a theory anymore, it's pretty easy.
Dan Mall redesigned his site and it's great.
Apple had their big WWDC thing and Safari (the oldest of all the modern browsers) will be updated finally and has some new CSS and font-related stuff. I hope it uses a pretty recent version of WebKit so we can get stuff like HTML5 form features back.
Also pointed out in the keynote that mobile browsing is friggin huge and getting huger, especially now that Apple devices are no longer going to require having a computer.
Google has little +1 buttons you can stick on sites now that I'm tempted to use but probably won't.
Adaptive Web Design (the book) is now out and apparently Responsive Web Design is coming out tomorrow on A Book Apart.

What else did I miss?

Regular content will resume shortly.

Advertise here with BSA

In IE, iFrames on Pages in Quirks Mode Also in Quirks Mode

Chris Coyier — Thu, 26 May 2011 22:28:06 +0000

Just wanted to make sure that this was documented. Here's what I think the most important lesson is:

If you are creating a page using HTML5 and you think there is some reasonable chance that someone may embed this page on another via iframe, you should use the HTML5 shim on it for all version of IE.

Here's the scoop. Let's say you are using HTML5 to be building your pages as you should be. You use the HTML5 shim on it as you should be, and your conditional comment is for IE 8 and down, which makes sense, because IE 9+ supports HTML5. Then someone embeds that page via an iframe onto another page which is in quirks mode (like if they forget or screw up the ). Your page will render on that page in quirks mode, and all your CSS that applies to HTML5 elements won't work, and your page will look like crap.

The shim won't fix the quirks mode, but at least it will make sure all your CSS works.

Here is a test page. Load in IE 9 or 10 to see the issue.

But Chris‽

Why would you have a page in quirks mode? Well me and you wouldn't. But you can't control every page on the internet.

At Wufoo, we allow forms to be embedded on third party sites in iframes as well as use HTML5. We recently just had to make the change to load the shim on all versions of IE because of this very issue.

This is relevant to literally any page that could be embedded via iframe. Off the top of my head: a calendar like how you can embed Google Calendars. Campfire chats. Embeddable widgets in general. Flickr slideshows. Other forms like Dispatch or polls like Polldaddy. Twitter and Facebook buttons come over in iframes. Tip of the iceberg.

For the IE team

Can this please be fixed? It's like this in IE 10 platform preview too. It's unsettling to know that people can iframe your content and have it look totally bungled through no fault of your own.

Advertise here with BSA

Styling List Markers

Chris Coyier — Thu, 26 May 2011 02:40:53 +0000

Have you ever tried to style the numbers in an ordered list? You end up doing dumb stuff like wrapping the insides in spans, styling the list items, then removing that styling with the span. Or using background images in crazy ways. Or removing the list styling and putting in your own numbers.

All of those ways suck. Roger Johansson has a good way with pseudo element counters.

P.S. The spec for lists has been updated with some new super nice stuff. (First time in 8.5 years)

P.S.S. IS THERE FRIGGIN ANYTHING PSEUDO ELEMENTS CAN'T DO?

Direct Link to Article — Permalink

Advertise here with BSA

Creating a Body Border

Chris Coyier — Wed, 25 May 2011 19:00:31 +0000

This article as originally published on February 25, 2008, but is now being completely re-written to be more comprehensive and show modern techniques.

Jon Hick's site Hicksdesign is where I first saw the concept of a "body border." In this case, it's a very subtle and lovely effect.

Characteristics of a body border:

Go around entire browser window, stuck to the edge regardless of screen size
All edges stay in place as page scrolls
Content goes beneath borders as page scrolls

View Demo

Technique #1: Four Divs

The way to do this with the deepest cross browser compatibility is to use four elements to do it. Hicksdesign does it this way, using four elements and has this to say in an HTML comment:

I use the b tag borders because it's just visual stuff with no meaning so I may as well use the smallest tag I can find.

No matter what, this is presentational markup which is not ideal. We'll use a div here:


//AN_Xml:
//AN_Xml:
//AN_Xml:

Then we style with CSS. Some properties are shared by all of the elements, some by only the top/bottom and left/right, and some unique to themselves. Here is a clean way to code that, without unnecessary repeated properties.

#top, #bottom, #left, #right {
//AN_Xml:	background: #a5ebff;
//AN_Xml:	position: fixed;
//AN_Xml:	}
//AN_Xml:	#left, #right {
//AN_Xml:		top: 0; bottom: 0;
//AN_Xml:		width: 15px;
//AN_Xml:		}
//AN_Xml:		#left { left: 0; }
//AN_Xml:		#right { right: 0; }
//AN_Xml:
//AN_Xml:	#top, #bottom {
//AN_Xml:		left: 0; right: 0;
//AN_Xml:		height: 15px;
//AN_Xml:		}
//AN_Xml:		#top { top: 0; }
//AN_Xml:		#bottom { bottom: 0; }

This should work fine in IE 7 and up and just about any other good desktop browser. For IE 6, which doesn't support fixed positioning, we'll just get rid of it (no harm no foul) by using a conditional comment in the head:

We also should ditch it on small screens (likely to be mobile) which also don't handle fixed positioning:

@media 
//AN_Xml:
//AN_Xml:/* Fairly small screens including iphones */
//AN_Xml:only screen and (max-width: 500px),
//AN_Xml:
//AN_Xml:/* iPads */
//AN_Xml:only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
//AN_Xml:
//AN_Xml:{
//AN_Xml:	#top, #bottom, #left, #right { display: none; }
//AN_Xml:}

So now we get the effect where we want it and not where we don't:

Technique #2: Pseudo Elements

In the above example, we needed four unique elements to get the job done. But that's four more elements than are appropriate semantically in our document. Ideally we would use zero. Well wouldn't ya know it, there are two elements that are the size of the browser window already, the and elements. Using the :before and :after pseudo elements on those, we get four!

We would use the same properties and values as above, only we would use:

html:before, html:after, body:before, body:after {
//AN_Xml:    content: "";
//AN_Xml:    position: fixed;
//AN_Xml:    background: #a5ebff;
//AN_Xml:
//AN_Xml:    /* etc. */
//AN_Xml:}

Harry Roberts had this idea as well and published it on CSS Wizardy.

While the browser support for pseudo elements is pretty good, it's not as good as Technique #1. A bigger problem is that there is an WebKit bug which the background on an html-element pseudo element bleed over the entire viewport. This makes using pseudo elements on the html-element a no-go for the time being.

But there is a solution! While saying semantic!

We don't really need four unique elements, we really only need two. The top and the bottom need to be unique, so they can be of fixed position and not scroll. For the left and the right, we can literally just use a border on the .

body:before, body:after {
//AN_Xml:    content: "";
//AN_Xml:    position: fixed;
//AN_Xml:    background: #900;
//AN_Xml:    left: 0;
//AN_Xml:    right: 0;
//AN_Xml:    height: 10px;
//AN_Xml:}
//AN_Xml:body:before {
//AN_Xml:    top: 0;
//AN_Xml:}
//AN_Xml:body:after {
//AN_Xml:    bottom: 0;
//AN_Xml:}
//AN_Xml:body {
//AN_Xml:    border-left: 10px solid #900;
//AN_Xml:    border-right: 10px solid #900;
//AN_Xml:}

Same exact effect, slightly less browser support, way more semantic.

View Demo

For Funzies: Kottke.org body border

Jason Kottke's Kottke.org has a pretty cool body-border effect.

It takes Jason eight different elements and eight different images (!) to pull this off. Because this border style doesn't stay fixed to the top and bottom of the viewport (just the top and bottom of content) this is actually really easy to pull off with CSS3.

We'll use box-shadow on the element, and it's neat ability to comma-separate multiple shadows. Here it is in it's entirety with

body {
//AN_Xml:	padding: 40px;
//AN_Xml:	overflow-x: hidden; /* For Opera */
//AN_Xml:	-webkit-box-shadow:
//AN_Xml:		inset #19d4ff 0 0 0 5px,
//AN_Xml:		inset #18cdf7 0 0 0 1px,
//AN_Xml:		inset #53dfff 0 0 0 10px,
//AN_Xml:		inset #50d8f7 0 0 0 11px,
//AN_Xml:		inset #8ce9ff 0 0 0 16px,
//AN_Xml:		inset #88e2f7 0 0 0 17px,
//AN_Xml:		inset #c5f4ff 0 0 0 22px,
//AN_Xml:		inset #bfecf7 0 0 0 23px;
//AN_Xml:	-moz-box-shadow:
//AN_Xml:		inset #19d4ff 0 0 0 5px,
//AN_Xml:		inset #18cdf7 0 0 0 1px,
//AN_Xml:		inset #53dfff 0 0 0 10px,
//AN_Xml:		inset #50d8f7 0 0 0 11px,
//AN_Xml:		inset #8ce9ff 0 0 0 16px,
//AN_Xml:		inset #88e2f7 0 0 0 17px,
//AN_Xml:		inset #c5f4ff 0 0 0 22px,
//AN_Xml:		inset #bfecf7 0 0 0 23px;
//AN_Xml:	box-shadow:
//AN_Xml:		inset #19d4ff 0 0 0 5px,
//AN_Xml:		inset #18cdf7 0 0 0 1px,
//AN_Xml:		inset #53dfff 0 0 0 10px,
//AN_Xml:		inset #50d8f7 0 0 0 11px,
//AN_Xml:		inset #8ce9ff 0 0 0 16px,
//AN_Xml:		inset #88e2f7 0 0 0 17px,
//AN_Xml:		inset #c5f4ff 0 0 0 22px,
//AN_Xml:		inset #bfecf7 0 0 0 23px;
//AN_Xml:}

Bug Note: Opera (Mac, 11.10) has a weird bug where it expands the size of the element to accommodate for the shadows on the outside (even thought the shadows are inset). This triggers unwanted scrollbars, since we're using it on a full-width body element. Horizontal scrollbars can be hidden by hiding overflow-x. But unfortunately there will still be a bit of space at bottom of screen.

While this has the least browser support of all the stuff covered, it's not bad: IE 9+, Fx 3.5+, Opera 10.5+, Chrome any, Safari 3+

View Demo

Advertise here with BSA

Animated 3D Objects Without SVG or Canvas

Chris Coyier — Wed, 25 May 2011 01:58:14 +0000

One of the ways you can make a triangle with CSS is by using a 45-degree angle gradient on an element that goes from from colored to transparent with an hard split at the half-way point. Then you can use CSS3 stuff like translate, rotate and skew on them to alter their shape. And if you are really fracking good at it like James Long, you can make an entire animated 3D shape out of a whole bunch of them.
Direct Link to Article — Permalink

Advertise here with BSA

Choice & Value Pair

Chris Coyier — Tue, 24 May 2011 14:18:53 +0000

Let's say in a form you need to allow the user to select a single unique choice. That's the territory of either a select dropdown menu or a group of radio buttons. Now let's say there is direct follow-up question to each particular choice. For example, an order form for some kind of scientific liquid. It comes in Ounces, Cups, or Pints, and once that's selected, the number of Ounces, Cups, or Pints to be ordered needs to be specified. That's an interesting design pattern that could be accomplished in a number of ways.
For deep browser compatibility, you'd probably use some JavaScript to hide/show particular form elements. But for fun, let's do it with just CSS.
Radio button and number input both within label
For each unique choice, we'll have a label wrap both the radio button, the text for the label itself, and the number input for quantity.
//AN_Xml: //AN_Xml: //AN_Xml: Ounces //AN_Xml: //AN_Xml: //AN_Xml:
Hide number input by default
Because the radio button and number input are now adjacent siblings, we can use the adjacent sibling selector to target those input specifically and hide then by default.
input[type='radio'] + input[type='number'] { //AN_Xml: display: none; //AN_Xml:}
Show input when radio button selected
We can show the number input when the radio button is selected with nearly the same selector, just by appending the pseudo class selector :checked to the radio button. We'll then position it off to the right.
input[type='radio']:checked + input[type='number'] { //AN_Xml: display: inline; /* unhide */ //AN_Xml: float: right; //AN_Xml: margin-right: 20px; /* space for "label" */ //AN_Xml: width: 100px; //AN_Xml:}
"Label" the number inputs
To be a bit more specific about what we are asking for with those number inputs, we can apply text near that input. Note the "data-label" attribute on the radio buttons, we'll snag that and drop in pseudo element text.
input[type='radio']:after { //AN_Xml: position: absolute; //AN_Xml: right: 9px; //AN_Xml: top: 9px; //AN_Xml:} //AN_Xml:input[data-label]:checked:after { //AN_Xml: content: attr(data-label); //AN_Xml:}
Highlighting entire selected choice/value
To make it very visually clear which option we have selected and that that selection goes hand-in-hand with the quantity value, we'll apply a highlighted row to cover both areas.
input[type='radio']:checked:before { //AN_Xml: background: #ebdcad; //AN_Xml: content: ""; //AN_Xml: position: absolute; //AN_Xml: top: 0; right: 0; bottom: 0; left: 0; //AN_Xml: border-radius: 8px; //AN_Xml: z-index: -1; //AN_Xml:}
Accessibility? Browser compatibility?
An order form is one of those important things where you would want as much accessibility and as deep of browser compatibility as possible. This was just a fun CSS exercise that might work great someday, but is probably a bit ahead of it's time.
Accessibility wise, it might be OK. Display: none on the unused inputs is fine, since we literally want them hidden until a selection is made, but I'm not sure how obvious the un-hiding of them is. If someone wants to speak on behalf of the accessibility folks in the comments, I'd love to hear it.
Browser compatibility is a bit trickier. To make it work at all, the browser needs to support the adjacent sibling selector, which we're talking only IE 8+. Although if that selector fails, all the number inputs are shown which wouldn't be a show-stopper. You'd have to move the styling to a selector in which doesn't use the "+" though. The field highlighting and pseudo-labeling require pseudo elements, so that has it's own set of compatibility as well. Last but not least, it's slightly unusual that pseudo elements are allowed on radio input elements at all. Inputs are "no content" style elements (they self-close, like an img element). Opera and WebKit happen to support it, but it's not clear whether or not they should. Firefox does not, so you won't see highlighting or labels in that browser.
If you need a 100% bulletproof solution, you could use a Wufoo form, and use Field Rules to hide/show additional fields.
Done
View Demo
Thanks to Bradley Staples for emailing in about the idea.

Advertise here with BSA