CSS-Tricks

Dropp

Chris Coyier — Fri, 17 Jun 2011 01:09:33 +0000

My buddies at Sense Labs just released a really cool iPhone app called Dropp. Allows you to leave location-based messages anywhere on Earth that people receive when they visit that location. Leave them privately for your friends, or publicly. Such a cool simple idea that could be used for so many things, from scavenger hunts, to marketing, to romance.

Direct Link to Article — Permalink

Advertise here with BSA

Useful :nth-child Recipes

Chris Coyier — Thu, 16 Jun 2011 11:02:21 +0000

I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have!

In these simple "recipes" (really: expressions) I'll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be fairly obvious how to alter them to get similar selections.

Select Only the Fifth Element

li:nth-child(5) {
//AN_Xml:    color: green;
//AN_Xml:}

To select the first element, you can use :first-child, or I bet you can guess how to alter the above to do it as well.

Select All But The First Five

li:nth-child(n+6) {
//AN_Xml:    color: green;
//AN_Xml:}

If there were more than 10 elements here, it would select all of them beyond 5.

Select Only The First Five

li:nth-child(-n+5) {
//AN_Xml:    color: green;
//AN_Xml:}

Select Every Fourth, Starting At The First

li:nth-child(4n-7) {  /* or 4n+1 */
//AN_Xml:    color: green;
//AN_Xml:}

Select Only Odd or Even

li:nth-child(odd) {
//AN_Xml:    color: green;
//AN_Xml:}

li:nth-child(even) {
//AN_Xml:    color: green;
//AN_Xml:}

Select The Last Element

li:last-child {
//AN_Xml:    color: green;
//AN_Xml:}

Selects the 10th because we have 10 elements here, but if there was 8 it would select the 8th, or if there were 1,290 it would select the 1,290th.

Select the Second to Last Element

li:nth-last-child(2) {
//AN_Xml:    color: green;
//AN_Xml:}

Selects the 9th because we have 10 elements here, but if there were 30 elements it would select the 29th.

Browser Support

Interestingly enough, :first-child was supported by IE 7, but it's not until IE 9 where the rest of this stuff is supported. Other than IE there isn't much browser support concern, and if you are worried about IE, then use Selectivizr. If browser support stuff is interesting or important for you, definitely check out When can I use... which tracks this stuff very well.

Advertise here with BSA

CSS Lint

Chris Coyier — Wed, 15 Jun 2011 21:10:13 +0000

New tool by Nicholas Zakas and Nicole Sullivan to analyze your CSS and tell you that you are doing a bad job. It's an amazing tool to help you understand how to write better CSS. To nitpick, I'd say that warnings like "Don't use ID selectors" is a bit harsh and biased toward Nicole's own OOCSS style, but hey, it's her creation. The project is on GitHub, so if you find errors or want to make your own version, do it up there.

Direct Link to Article — Permalink

Advertise here with BSA

Just One Of Those Things You Need To Understand About JavaScript

Chris Coyier — Wed, 15 Jun 2011 12:00:47 +0000

Ever since I've published the article Dynamic Page / Replacing Content, I've gotten quite a few emails that come in from people who are trying to use it in conjunction with some other JavaScript stuff and having trouble. Most of the time, it's some kind of lightbox effect. One of their pages has a bunch of thumbnails on it, and when they load that page in, the lightbox effect doesn't work.

The problem is that when the thumbnails are loaded onto the page (via Ajax, i.e. jQuery's .load() function) they do not have any events bound to them.

/* Your lightbox plugin */
//AN_Xml:$("photos a").ceebox();  
//AN_Xml:
//AN_Xml:/* Basics of Ajax */
//AN_Xml:$("nav a").click(function(e) {
//AN_Xml:    e.preventDefault();
//AN_Xml:    $("#main-content").load(this.href);  /* Thumbnails loaded from here */
//AN_Xml:});

The way that the lightbox plugin (probably) works is that it binds click events to the elements you passed in that selector (the thumbnails) when the page loads, and those click events do the lightbox action. Since the newly loaded thumbnails have no click event, the lightbox action does't work.

One way to fix it is to call the lightbox plugin after the content loads, in the callback function of the load function:

$("photos a").ceebox();  
//AN_Xml:
//AN_Xml:$("nav a").click(function(e) {
//AN_Xml:    e.preventDefault();
//AN_Xml:    $("#main-content").load(this.href, function() {
//AN_Xml:
//AN_Xml:              /* Callback function */
//AN_Xml:              $("photos a").ceebox();  /* Call this again */
//AN_Xml:
//AN_Xml:    });
//AN_Xml:});

A little repetitive, but that'll do the trick.

A Better Way with Delegate

While this is "just how JavaScript works" it's a known pain in the butt. Since jQuery is a library that exists to ease pains like this, of course it has a better way. That way is the .delegate() function, where instead of binding events to the individual elements, you bind an event to an element higher up the DOM tree, which isn't likely to be replaced via Ajax, which watches for those clicks.

This relies on something called event bubbling, which a neat and important concept in JavaScript. If you click on a thumbnail, it will trigger a click event on that element, then a click event on it's parent element, and a click event on it's parent's parent element, all the way up to the root element. Because of this, we can watch for clicks on deeper-down elements from higher-up elements.

Unfortunately with our lightbox example, you would have to alter the plugin itself to get it to use delegate instead of binding directly to the elements. Definitely do-able but trickier, since you probably aren't as intimately familiar with that plugin's code as you are your own.

Listen to Remy Sharp

As this article was drafting, Remy Sharp put out a video screencast about this exact topic. He's way better at explaining it than me, so please go watch that.

Advertise here with BSA

The Stats That Matter: Your Site’s Stats

Chris Coyier — Tue, 14 Jun 2011 20:42:56 +0000

Just because I thought it was interesting, I shared this on Twitter this morning:

95% of traffic to CSS-Tricks has a screen resolution of larger than 1024x768.

And I got all kinds of responses like: That's such a skewed statistic!!!

How are my own stats on my own website skewed?

OK, I know what they meant, they meant that that 95% number isn't indicative of most websites, it's only CSS-Tricks visitors. So people shouldn't quote that number out of context or use it to inform design decisions on other websites.

But that highlights an interesting point. Who cares what the global average of internet user screen size is? The only stats that matter are your own. Unless you are starting a new project from scratch and need a baseline, in which case I think you are better off finding a related website and kindly asking for their numbers than using a global average.

That said, I'm not sure that particular statistic will inform my design decisions either. As I tinker with a redesign, I plan to support all screens large and small.

Advertise here with BSA

New at Wufoo

Chris Coyier — Tue, 14 Jun 2011 14:08:05 +0000

Couple of things I wanted to share from Wufoo land.

Developers: We've released the Wufoo Form Embed Kit, which is a way you can build form embedding integration with other apps easily. As in, you don't have to learn our APIs or do custom design work. Would make for neat CMS plugins!

Designers: If you didn't know you could apply your own custom CSS to Wufoo forms and completely transform their appearance, you can, and here's a tutorial getting you up to speed. And did you know you can customize the look of radio buttons and checkboxes with just CSS?

Advertise here with BSA

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

Chris Coyier — Mon, 13 Jun 2011 18:42:39 +0000

It's pretty amazing what you can do with the pseudo elements :before and :after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will¹.

Give you multiple background canvases

Because you can absolutely position pseudo elements relative to their parent element, you can think of them as two extra layers to play with for every element. Nicolas Gallagher shows us lots of applications of this, including multiple borders, simulating CSS3 multiple backgrounds, and equal height columns.

Expand the number of shapes you can make with a single element

All of the shapes above any many more can be created with a single element, which makes them actually practical. As opposed to those "make a coffee cup with pure CSS!" things which use 1,700 divs, which are neat but not practical.

Here's an example of a six-pointed star:

#star-six {
//AN_Xml:	width: 0;
//AN_Xml:	height: 0;
//AN_Xml:	border-left: 50px solid transparent;
//AN_Xml:	border-right: 50px solid transparent;
//AN_Xml:	border-bottom: 100px solid red;
//AN_Xml:	position: relative;
//AN_Xml:}
//AN_Xml:#star-six:after {
//AN_Xml:	width: 0;
//AN_Xml:	height: 0;
//AN_Xml:	border-left: 50px solid transparent;
//AN_Xml:	border-right: 50px solid transparent;
//AN_Xml:	border-top: 100px solid red;
//AN_Xml:	position: absolute;
//AN_Xml:	content: "";
//AN_Xml:	top: 30px;
//AN_Xml:	left: -50px;
//AN_Xml:}

Show URL's of links in printed web pages

@media print {
//AN_Xml:  a[href]:after {
//AN_Xml:    content: " (" attr(href) ") ";
//AN_Xml:  }
//AN_Xml:}

Clear floats

Rather than insert extra non-semantic markup to clear the float on container elements, we can use a pseudo element to do that for us. Commonly known as the "clearfix", and more semantically titled with the class name "group".

.group:before,
//AN_Xml:.group:after {
//AN_Xml:    content:"";
//AN_Xml:    display:table;
//AN_Xml:}
//AN_Xml:.group:after {
//AN_Xml:    clear:both;
//AN_Xml:}
//AN_Xml:.group {
//AN_Xml:    zoom:1; /* For IE 6/7 (trigger hasLayout) */
//AN_Xml:}

Simulate float: center;

The float property doesn't actually have a value of center, despite how much we might want it. Float does have left and right though, and by using placeholder pseudo elements we can carve out an area between two columns and place an image there, we can simulate the effect.

Label blocks of code with the language it is in

In the current design of this very site, the blocks of code are labeled with what language of code they are with a pseudo element.

pre:after {
//AN_Xml:  content: attr(rel);
//AN_Xml:  position: absolute;
//AN_Xml:  top: 22px;
//AN_Xml:  right: 12px;
//AN_Xml:}

Create an entire icon set

Nicolas Gallagher again taking the shapes idea to another level by creating a massive set of icons created with no images, only pseudo elements on (at most) two elements each.

Use available space more efficiently

What CSS giveth, CSS can taketh away. What I mean is that pseudo element content can be applied or removed conditionally via media queries. Perhaps you apply an icon when space is limited, and replace that with a more descriptive word when there is more room.

Apply typographic flourishes

If your pseudo elements are text, they inherit the same typographic styles as their parent element. But while you are setting their content, you can style them as well. Like, say, use a different font and a different color to make your headers stand out with a flourish.

h2 {
//AN_Xml:     text-align: center;
//AN_Xml:}
//AN_Xml:h2:before, h2:after {
//AN_Xml:    font-family: "Some cool font with glyphs", serif;
//AN_Xml:    content: "\00d7";  /* Some fancy character */
//AN_Xml:    color: #c83f3f;
//AN_Xml:}
//AN_Xml:h2:before {
//AN_Xml:    margin-right: 10px;
//AN_Xml:}
//AN_Xml:h2:after {
//AN_Xml:    margin-left: 10px;
//AN_Xml:}

Create full browser width bars

When you need elements whose background stretches full width but whose content does not, you are often stuck with non-semantic internal wrapping elements or repetitive and cluttery spacing declarations. Or you can simulate the effect by limiting the content width with one element and making the header bar reach out to the edges with pseudo elements.

Create a body border

Using a regular border on the left and right, and fixed position pseudo element bars on the top and bottom, we can get a "body border" effect without any dedicated markup at all.

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:}

Make a gleaming button

If you make a pseudo element block that has a transparent to white to transparent gradient on it, position it outside of the button (which hides it with hidden overflow), and transition-move it across the button on hover, you can make a button which seems to catch a bit of light as you mouse over it. You'll have to try it in Firefox 4 or 5 for now, as that's the only browser that allows transitions on pseudo elements.

Original by Anton Trollbäck; Pseudoelementized by Nicolas Gallagher; Another version by me.

Fade out a page when a particular link is rolled over

If you don't set relative positioning on an element, absolutely positioned pseudo elements will be positioned relative to the next parent that does. If nothing else does, it will be relative to the root element. You can use that to make a full-browser-window element, stack it underneath the main element, and reveal it on hover making a "page fade out" effect on a link.

Style a header like a three dimensional ribbon

Everybody loves ribbons! Check out this snippet for the HTML and CSS for this one. It makes use of negative z-index a bit, which in some cases requires an additional wrapping element to prevent losing the element underneath a parent with an opaque background.

Style the numbers in ordered lists

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 those ways suck. Much better to utilize pseudo elements as counters.

Make data tables responsive

Large data tables are awful to browse on small screens. Either they are zoomed in and require both vertical and horizontal scrolling, or they are zoomed out and too small to read. We can combine CSS media queries with pseudo elements to make the data table responsive and reformat it to a more readable view when on small screens.

Create styled tooltips

Using an HTML5 data attribute, then pulling that attribute in and styling it as a pseudo element, we can create completely custom tooltips through CSS.

¹ Normally roundups are kinda looked down upon around here, in favor of creating more original content. But I feel like this one is beneficial in showing off and hopefully garnering more enthusiasm for the awesomeness that is pseudo elements.

Advertise here with BSA

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