Articles by CSS Tricks from May 2011

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 ma...

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 us...

A border that goes all the way around the browser window and stays there when you scroll. In this article we cover a few different techniques to get it done, from the deepest browser support to the mo...

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 ...

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...

Using !important rules can be a dangerous road to start going down, but they exist for a reason. There are some good use cases which we'll cover here....

How to prevent an iframe from flashing white while the page is loading. An ugly problem when the background of your site is anything other than white....

Yet another useful thing that pseudo elements can do for us: allow us to create full browser width header bars without using internal non-semantic wrappers....

If you charge for something online, having a dedicated page on your site where you explain what the charge is on a credit card statement is a good idea. You can point people to this page via a short U...

Fix a bug. Get a prize.A site to incentivize helping out on open source JavaScript projects. Every single day there is a prize that someone earns through sheer number of bug fixes closed. Also weekly ...

My favorite blogs are personal blogs of one person. I like it when blogs "have a voice" and personal blogs can't help but have that since all the writing is by the same person. I read a bunch of them ...

I'm talking at a bunch of events coming up this year. Come to them!...

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.Super simple, super nice effect, super pract...

Adobe has put together some pretty compelling demos of "CSS Regions." Download the package and run the included "Mini Browser" to see them. You define shapes (kinda like an image map) in which content...

Simple and damn clever idea by Radu Chelariu. Use multiple columns and inline-block elements to create that "masonry" / staggered block layout that is hugely difficult to do otherwise. ...

We'll look at some jQuery code that a CSS-Tricks reader posted in the forums. We'll suggest ways to improve the code to make it more efficient and more extensible. We'll also make some guesses about t...

Using some non-standard pseudo selectors, you can change the styling of things when the browser window is inactive. The only "practical" use right now is text selection colors, which automatically do ...

Imagine a real-life tabbed folder. The tabs on those aren't only rounded at the top of the tab, but they also connect to the folder with a rounded edge. Top corners, easy, just border-radius. Bottom c...

If you ever tried to use border-radius on <img>'s, you know that, basically, it doesn't work. The root of it is that the image is content, not a container, and the container is what gets round...

With CSS animations (ala @-webkit-keyframes) it's not as easy as you might think to "restart" it. Let's say you set it to run once: .run-animation {-webkit-animation: my-fancy-animation 5s once;}and ...

The exact (pretty much) browser support levels for these style of pseudo elements. It's pretty darn deep, folks, and you can do really cool things with them while keeping your markup clean....

The Net Awards are now open for nominations. They the web industries longest running and biggest awards as far as I know. I think it's nice to have people and teams get recognized for outstanding work...

One of the problems with using "em" as font sizes is that they cascade, so you are forever writing rules that select nested elements to reset them back to 1em; CSS3 now has rem ("root em") to prevent ...

You can customize scrollbars in WebKit browsers. Here's the CSS you need to know about to get it done, with examples....