Grow your CSS skills. Land your dream job.

Article Archives

Poll Results: HTML5 on New Projects

Several folks pointed out that this last poll question was worded a bit strangely:

Would you start a new web project today and not use HTML5?

I worded it that way to elicit comments on why a person or organization …

December 22, 201068 comments

Body Borders without Markup

Harry Roberts  with a nice technique on using pseudo elements to create the body border effect without extraneous markup (same idea with extra markup gets you older browser support). Read the comments for some other good suggestions. …

December 21, 2010

Load More Sidebar Content When There Is Room

One classic layout conundrum is how much stuff to put in a sidebar. Ideally the height of the main content area and the sidebar are about the same, to avoid either area having a large blank area which can be …

December 21, 201044 comments

WebKit Image Wipes

It's not "spec," but WebKit browsers support image masks. If you are familiar with Photoshop, they work like that. You declare an image to use as as mask. The black parts of that image hide what it is over, …

December 18, 201041 comments

The Hacktastic Zoom Fix

Nicole Sullivan on forcing elements to create new formatting contexts with display: table-cell and a string of X's as pseudo content to force it full width. …

December 16, 2010

The lean, mean, CSS-reset machine.

There are all kinds of CSS resets, from the ever-popular Meyer reset, to the newfangled HTML5 reset. Do you know what the difference between the different ones are? It's a bit hard to picture, even when looking at and comparing …

December 14, 2010

Using CSS without HTML

Big thanks to Mathias Bynens for the guest post today! I'd call this a bonafide CSS trick!

A few days ago, Chris tweeted:

If we could stack pseudo elements (e.g. :after:after) we could build a whole website with …

December 14, 201080 comments

The Kick Awesome Show

Nate Croft and Jon Longnecker (remember Jon?) from FortySeven Media have a new video podcast they are producing called The Kick Awesome Show. CSS-Tricks was happy to sponsor Episode 13.

These guys sure look like they …

December 12, 201028 comments

CSS Transition Timing

Nice little article with visual demos on the different timing functions for CSS transitions. The progress bar is neat. Also notice the scaling transform on the table of contents. Not sure I love that exact implementation but I like the …

December 9, 2010

New Poll: Would you start a new web project today and not use HTML5?

What do you think folks? I'll hold off on any opinions until we wrap it up. Poll is over in the sidebar.…

December 8, 2010190 comments

The Fifth Position Value

Peter-Paul Koch:

If mobile browsers were to implement position: fixed exactly as the desktop browsers do, many sites with fixed elements would become unusable on mobile.

... I believe it’s time for position: device-fixed.…

December 7, 2010

Text Fade Out / Read More Link

A section of text that fades into the nothingness. But wait, a beacon. A "read more" link shines through the darkness. Click upon it and all text is revealed! CSS3 gradients are used for the text fading and jQuery is used to handle the animated reveal.
December 7, 201036 comments

Three-Sided Border

There are many ways to skin a cat. Also, there are many ways to accomplish the same thing in CSS. The three sided border is one of those things, so we'll look at four different examples that all do it. I would think this kind of thing is a bit confusing as a beginner, so hopefully seeing these different bits of code isolated will make it clearer.
December 6, 201036 comments

Poll Results: Does Your Degree Relate To Your Job?

There is a bit of an idea in our little web design world that "nobody who works on the web went to school for it." At least, I get that feeling. Especially from little stories like these:

I have …

December 2, 201039 comments

You Must Learn JavaScript

It's really unavoidable these days, and that's good because it's awesome. Here are some choice quotes from Kenny Meyers:

Not every company is a Ruby shop. Not every company is a .NET shop. It’s my belief that 99% of the …

December 2, 2010

CSS3 Walking Man

The illustrated backgrounds that slide by with faded edges are the best part.…

December 2, 2010

Design v8

I had some extra time over Thanksgiving so I decided to spend it doing some recreational designing of this site. Here's a few quick notes (I need to get back to content!):

  • Colorful! I think bold colors are fun and
December 2, 2010276 comments

Formatting CSS3

With all the vendor prefixes and all the new complex properties like animations and gradients, it's nice to format them so they are nicely readable. I agree with David DeSandro here that lining up the values makes for nice lookin' …

December 1, 2010

24 Ways 2010

Twenty four great blog posts by top industry peeps in twenty four days. This year it's going print as well.…

December 1, 2010

ImageOptim

Maybe you've heard of things like Pngcrush before which supposedly does an amazing job at optimizing png files, but then when you go check it out it turns out it's this nerdy command line tool with crappy documentation and it …

November 30, 2010

Keep Margins Out of Link Lists

When building a menu or other list of links, it's generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier …

November 29, 201056 comments

Google CDN Naming Conventions (and You)

You've seen this before:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

This is a way you can load a JavaScript library like jQuery directly from Google's CDN (Content Delivery Network). You can get quick copy/paste access to these from ScriptSrc.net.

See in that above …

November 26, 201025 comments

Photoshop-Like CSS3 Gradient Generator

If you are a designer who is used to creating gradients with Adobe Creative Suite products, you'll likely enjoy this. It's the same interface with the little color pointers that you slide around, click to add, drag to remove, and …

November 25, 2010

CSS3 Memory

All the game logic is JavaScript (very minimal), but all the fancies are CSS3 that get triggered by the application and removal of class names. …

November 25, 2010

A Journey with Vignetting (That Doesn’t Get Very Far)

Ol' Trent posted a quick tip post on using inset box-shadow for some simple yet classy effects. One of those techniques ended up with an vignette effect over top of an image. Like this:

Yeah, you could do it in …

November 23, 201039 comments

Perfect Full Page Background Image

Four techniques are explored on accomplishing a full page background image that conforms to our exceptions: no white space, scales as needed, retains aspect ratio, centered, and more.
November 20, 2010224 comments

What is Cross Site Scripting or XSS?

I think the name "cross site" is confusing. It's easy to hear that and think it involves code on one website attacking code on another website. That's not what it is. Not to mention its unfortunate "true" acronym.

It simply …

November 19, 201023 comments

20 Things I Learned about Browsers and the Web

Really neat presentation of a book by the Google Chrome Team. Everyone seems to be calling it an "HTML5" book There is certainly a bunch of HTML5 going on, but there is also loads of CSS3 and clever JavaScript at …

November 18, 2010

My Slides from the jQuery Summit

At this year's jQuery Summit I gave a mostly-totally-revised version of my talk "Solving Common Client Requests with jQuery" that I originally gave at the Bay Area jQuery Conference earlier this year.

I always think slides are a little weird …

November 18, 201020 comments

Hash Tag Links That Don’t Headbutt The Browser Window

Using hash-tag links with a fixed position header can be problematic, as the element may be hidden underneath the header as the browser will scroll until the element headbutts the top of browser viewport. There are a couple of ways we can fix this...
November 16, 201032 comments

Show Image Under Text (with Acceptable Fallback)

Updated April 2014 with more modern information.

WebKit supports the cool background-clip CSS3 property, which you can use to do some pretty neat stuff. The first time we touched on it was the iPhone Slide-to-unlock idea where we set a …

November 12, 201039 comments

Exploring Markup for Breadcrumbs

What is the most appropriate possible markup for breadcrumbs? We'll take a look at a bunch of different possibilities of various complexities and semantic success. Then also see what Google has to recommend as well as what HTML5 has in store for them.
November 9, 201045 comments

New Screencast: CSS3 Slideup Boxes

Follow along as we use a few very simple CSS3 transitions to create a "slideup" box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized …

November 8, 20100 comments

WordPress Course: Creating Custom Themes

Good news today for everyone interested in learning more about WordPress! I have a new training course available on Lynda.com: WordPress 3.0: Creating and Editing Custom Themes.

This is the most comprehensive training I have ever created, so if …

November 4, 201097 comments

CSS3 Finalize

jQuery plugin from Han Lin Yap which allows you to write CSS3 without vendor prefixes. This plugin will read through your CSS files and in-document <style> blocks, find the CSS3 stuff, then append a new <style> block to your …

November 3, 2010

Custom Vanilla Forums Work by Trademark Productions

I had some custom Vanilla Forums work done by Trademark Productions. This is my thank you to them and how my experience went down.
November 3, 201026 comments

CSS Gradients for IE9

This article by Robert Biggs goes into a solution for using SVG for gradients in Internet Explorer 9, because it doesn't support CSS3 gradients. The core benefit being that the SVG image format is XML and actually rather similar in …

November 2, 2010

Breadcrumb Navigation with CSS Triangles

Did you know you can make triangles with pure CSS? It's pretty easy. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. They …

November 1, 201069 comments

Happy Halloween

HTML, CSS, and JavaScript got invited to a halloween party. They decided they would all dress up as each other!

HTML went as JavaScript:

<div id="pumpkin" onclick="alert('Boo!');"></div>

JavaScript went as CSS:

var jackolantern = document.getElementById('pumpkin'); jackolantern.style.color = "orange"; jackolantern.style.backgroundColor =
October 31, 201041 comments

Rotating Molecules with 3D Transforms

Click-and-drag to rotate these complex objects through a pseudo three dimensional space. It's a familiar design pattern, but one that is particularly difficult to pull off. No Flash, not even canvas. Just some fancy JavaScript and CSS (WebKit 3D Transforms). …

October 30, 2010

So You Need To Fill a Dropdown Dynamically

You have one dropdown menu, and depending on the user's choice in that one, a second dropdown gets filled with choices. Let's cover three different ways you can go about that.

View Demo   Download Files

The Markup

For our …

October 29, 201048 comments

Commas Before

Marc Grabanski brought up and interesting idea on Twitter yesterday.

Commas before or after the line on json objects and multi var definitions?

Here are examples of object literals:

// commas before var vampyre = { teeth: 'sharp' , blood:
October 26, 201052 comments

Garage Door Style Menu

Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo' betta.

A garage door style menu is where an image (the "door") slides up to reveal something …

October 25, 2010109 comments

Parent Selectors in CSS

Let's be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS, not even in CSS3. It is an interesting topic to talk about though, and some fresh talk …

October 21, 201072 comments

Formalize CSS

Framework by Nathan Smith for nice looking, HTML5 ready, progressively enhanced, cross-browser forms.…

October 20, 2010

Fluid Width Equal Height Columns

Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need …

October 18, 201041 comments

Make a ‘View Source’ Button

Remy Sharp's cool site for HTML5 demos has a "View Source" button on each of the individual demo pages. Click it, and you see the entire source code for the page you are looking at. It's not a popup or …

October 8, 201045 comments

New Poll: Is Your Degree Related To Your Job?

The full question is:

If you have a degree from college and have a job, is that degree related to your current job?

It's pretty common to hear about folks who have made their way into the web worker world …

October 6, 2010181 comments

Boilerplate CSS3 Media Queries

A collection of media queries from Andy Clarke to get you started building responsive sites. Responsive is the new word for sites that react to the space they have available to restyle their content the best they can in that …

October 5, 2010

Digging Into WordPress v3 – Back in Print

Version three of my book, co-authored by Jeff Starr, has been revised from cover to cover ensuring everything is up to date and featuring a new chapter on WordPress 3. Now the print version is back in limited quantity sporting …

October 5, 2010

*May or may not contain any actual "CSS" or "Tricks".