Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

‘space’ and ’round’ values

Louis Lazaris shows us how space and round give us some more possibilities with how repeating backgrounds are dealt with in CSS3.…

54 comments

Persistent Headers

This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you've scrolled past that relevant section.…

Design v9

Fun fun fun, the new site design is live!

The details and summary elements

Tom Leadbetter from HTML5 doctor shows us all about the summary and details element. I think this will be a particularly useful pair of elements, especially as browser support grows, with its baked in hide/show functionality.…

Making Video Fluid Width

Me:

In a world of responsive and fluid layouts on the web one media type stands in the way of perfect harmony: video.

I wrote an article for Net Magazine where I tackle making video (from any source) work in fluid width environments. …

48 comments

Indeterminate Checkboxes

While checkboxes can only either submit their value (checked state) or not (unchecked state), they have a third visual-only state: indeterminate. This is only settable via JavaScript and does not affect the value, only the appearance. We'll cover how it works and a simple use case.
49 comments

New Poll: Site Title Structure

The new poll is up in the sidebar of the site. This time it's about the structure of page titles. Literally, the <title></title> tag in the head of a site that gives the browser window/tab its title. I'm just asking for your "favorite", as in, personal preference. Take that how you will, we can discuss the reasonings in the comments and in the poll wrap-up post. …

Prefixr

Jeffrey Way has created an app which looks through your CSS and adds all the missing CSS3 vendor prefixes. It's smart enough to do it right no matter which ones you've added or forgotten. Cooler, it has an API which allows you to it without ever leaving your favorite text editor.…

109 comments

What Makes For a Semantic Class Name?

Semantics in HTML is always a hot topic. Some people strive for it at all times. Some people critisize a dogmatic adherence to it. Some people don't know what the heck it is. …

The Future of CSS Layouts

Peter Gasston shows us: columns, flexbox, grid, template, positioned floats, exclusions, and regions. This stuff is going to be a big deal in a couple of years and it will be very interesting to see which of these get popular and which ones die off.…

67 comments

Seriously, Just Make a JSFiddle

Has anyone ever asked you for help troubleshooting some combination of HTML, CSS, and JavaScript, and they copy and paste the entirety of all the files into an email or forum post? It's super common, and so consider this an intervention. When you are having trouble figuring something out:…

Chosen

Super hot jQuery and Prototype plugin by the Harvest team that seriously improves the UI of <select> elements. …

CSSFrag

Shaun Inman with a Safari extension (and Firefox port) that impliments the (not real) fragment identifiers proposal. Essentially: same-page document links that don't need the ID/hash-tag thing. Alternatively, you target with a CSS selector:…

3D Cube with One Element

Pseudo elements make the two other sides needed (you can only see three sides of a cube at once). I Love the idea of making shapes without loads of extra divs (obviously) and extra love the idea of extending that idea to 3D.

I forgot how I got to this page and there is no information on the site about who wrote it =/.…

57 comments

Seamless Responsive Photo Grid

Let's say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. You don't care if they are resized, but they should maintain their aspect ratio. …

Web IQ Quiz

Pretty fun, well designed, interesting quiz. You gotta cough up an email and stuff to play any of the quizzes beyond the first one so you might get some random Windows Phone emails or something, but hey it's fun.…

Classy Text Shadows

Tim Brown from Typekit shares some pretty classy CSS text shadows and drops some painter's terminology.

The Typekit blog exemplifies an idea I've been telling any company I've been involved with for years and years. Publish lots of interesting articles freely sharing information about your field. Especially if it's useful beyond the narrow scope of your business. It establishes you as an expert and is great for traffic. I guarantee this blog post alone will sell a bunch of Typekit …

Everything About Radial Gradients

John Allsopp with a comprehensive article and updated tool for creating them. Funny how the vast majority of radial gradient examples are super in-your-face eye-seizure colors. I think it's because the "real world" uses for them are few. Subtle lighting effects are about all I can think of.…

119 comments

Little CSS Stuff Newcomers Get Confused About

Nobody was born understanding CSS. We all struggled our way through the confusion. Good times, good times. Let's think back on those confusing moments, that are probably confusing people as we speak. I'll list some that I remember and you list yours.
62 comments

Convert a Menu to a Dropdown for Small Screens

Create a menu that, on smaller screens, changes into a dropdown menu. A dropdown takes up much less screen real estate and can be easier to use. This tutorial shows you how and discusses the ups and downs.

Identity at Mozilla

New project from Mozilla team to tackle the long-standing issue of single-signon (not needing a unique login/pass for every single app in the world). I love it when apps have "Sign in with Twitter", but I'm not sure Twitter should be the hub of all login activity, I'd rather it be some project solely dedicated to it. I hope it takes off. Seems easier than Open ID which always eluded me. …

28 comments

The Actual Browser Problems with Unquoted Attributes

There are rules when it comes to leaving your attribute values unquoted in HTML. Then there are the actual problems that are caused by breaking them. Then there are problems that can happen outside of those rules. Yeah it's kinda complicated but I've tried to document it here.
33 comments

IE 8 Thinks All Table Cells Have a Colspan

IE 8 (only) thinks that all table cells have a colspan attribute, whether they do or not. So if you are looking to style table cells uniquely that have that attribute, it's a bit tough.
128 comments

New Poll: Large file on CDN or small file local?

The new poll is up (in the sidebar on the actual site, RSS folks) and it reads:

Would you rather host a 200k file on a major CDN or a 20k file self-hosted?

This requires a little explanation. …

Progress Element in Firefox

The <progress> element has landed in the Firefox nighties, one of the new HTML5 forms related elements. Of particular note is that they exposed the ability to style it via pseudo elements right away. Mounir Lamouri fills us in:

... the progress element is two div's. You can access to the outer div by styling progress and to the inner one with ::-moz-progress-bar

I wish all "widgets" were this easy and straightforward to style. …

23 comments

Poll Results: Where Do You Work From?

Nearly a third of CSS-Tricks readers work from home! Isn't that crazy? Well I was surprised, anyway. I know working from home is becoming more and more prevalent at companies. I bet a bunch of you are the freelancer types as well. But wow, a third, I never would have guessed that.

Next up at 20% is an "open office" where you have a bunch of tables with computers and multiple people sit at them and work. That's what the …

Mobile WebKit Overflow Scrolling

Two of the CSS properties most lamented by mobile website developers is fixed positioning and scrolling overflow. These are absent for a reason. Poorly implemented, they might single-handedly render a website unusable on a small screen. (Imagine a giant fixed position header that hides all the content, or being zoomed into a small scrollable area and now you can't scroll the rest of the site.)

Johan Brook notes that these are now present in Mobile Safari in iOS 5 Beta …

21 comments

Quick Thoughts on RSS Advertising Effectiveness

I've recently been trying RSS advertising here on CSS-Tricks through BuySellAds. Three or four advertisers have tried it and none have stuck around. Not a total loss from my perspective, but certainly not great. …

37 comments

Pseudo Spriting

CSS sprites are almost always the way to go when it comes to applying background images with CSS efficiently. One hurdle you may come across is when you want to apply an image that's a part of a sprite to an element with an unknown height and width. We can hurdle that hurdle with CSS pseudo elements.
39 comments

The Fourth Fourth

It's CSS-Tricks fourth birthday. Yay! Time for the traditional mid-year mini state of the site.
117 comments

One Page Apps I Actually Use

There is a zillion one-page apps focused on making some little aspect of front end development easier. I think they are great. They exemplify the wonderful culture of sharing and ingenuity that our industry is known for. Each of us has slightly different jobs and slightly different skill sets. That means a little helper app that is useful to you might not be to me and vice versa. So of the probably-hundreds of these one-page apps that I've seen over …

37 comments

Techniques for Context Specific Images

One of the shortfalls of using CSS media queries as the only ingredient of a mobile solution is that the same content gets served to both desktop browsers and mobile devices (which theoretically are slower and have less network speed).

Serving the same HTML to both... not as big of a deal. Serving up images that are many times bigger than they need to be on mobile, that's more of a problem. A number of smart people have tried to …

29 comments

Learning Canvas: Making a Snake Game

In this tutorial we'll learn the basics of the canvas element. How to draw to it, create loops which redraw it allowing animation, and in the end, wind up with a basic playable "Snake" game.

Sprite Cow

Making a really good CSS sprite image usually isn't trivial work. There are all kinds of tools to help with it. My favorite of them has been SpriteMe. I describe my typical workflow for using that here. Sprite Cow might be my new favorite though, can't wait to try it. With it, you design your own sprite (♥) and you use the sweet Sprite cow interface to get precise CSS background positions for the different parts of it.…

59 comments

Screen Resolution ≠ Browser Window

The only statistic you get in most web analytics software is screen resolution. But there is a pretty good chance you just read this sentence in a browser that isn't open to the full size of your monitor. If you are looking at size analytics for you website, browser size is far more relevant. In this article we figure out how to get that data, and then look at some of the results gathered from css-tricks.com.

Dropp

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

CSS Lint

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, …

27 comments

Just One Of Those Things You Need To Understand About JavaScript

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 …

35 comments

The Stats That Matter: Your Site’s Stats

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 …

4 comments

New at Wufoo

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

54 comments

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

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.

Art and the Web

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

56 comments

Fluid Width YouTube Videos

YouTube now gives you iframe code for embedding videos hosted there onto your own page. This article offers a jQuery JavaScript based solution for making them work in fluid width environments, which they inherently do not.
23 comments

Color Animate Any Shape with a Knockout PNG

Using a graphic where the solid parts match the background of a site and the transparent parts make the shape, we can let a background color bleed through. This allows us to set that color through CSS, and do any fancy thing CSS can do, like say animate that color.

Online Conference: CSS Summit

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

15 comments

Recent Bits

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