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

Article Archives

36 comments

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.
36 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.
39 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 a BS in Botany, but after designing my first website on the university servers, I was hooked. Did a couple of sites for friends while working in a plant lab, and now I’m a full time web programmer and designer.…

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 time both of these companies will need someone who knows JavaScript, and knows it well.

When people talk about HTML5, they are talking mostly about JavaScript.

And regarding frameworks and Chicken/Eggery:

CodeIgniter certainly helped me understand PHP better. jQuery gave …

CSS3 Walking Man

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

276 comments

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

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' CSS. It would be cool if one of the "CSS prettifier" services could incorporate this.…

24 Ways 2010

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

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 just doesn't look like it's worth the hassle. Enter ImageOptim, which is a Mac app with a super simple user interface for using Pngcrush as well as a bunch of other similar awesome compression tools. Literally just drag and drop …

56 comments

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 for people to click and lead to better user experience.…

25 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 URL how it is pointing to 1.4.4 specifically? That little part of the URL can be tweaked. Perhaps you've seen it used that way before.

/1.4.4/ Loads this very specific version of jQuery which will never change.
/1.4/ Today,

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 double-click to edit the color. This makes it way easier to create gradients that are more complex than a fade from one color to another. I do wish it used the more solid property list / syntax re: CSS3Please though.…

224 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.
23 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 means: executing abritrary JavaScript code on the page.

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 work. Read a few pages then close the tab and then go back to it to check out a fun bookmarking idea.

Of particular interest is how they are using window.history.pushState() and window.history.replaceState() to change the URL in the browser …

20 comments

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 outside of the context of the talk, but I also know some folks like to see them. These also happen to contain some JS Bin URL's which might be of some use.…

32 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...
39 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 gradient to animate through the background of the text. Then we touched on it again for the transparent borders idea.

Let's take a look at using it to have an image be visibile only through the letters of the text. …

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

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 box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected.


View

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 page with the appropriate vendor extensions for the browser you are in.

This solves one of the most common complaints about using CSS3, that is bloats your stylesheet with loads of repetitive properties.

Worked great in my limited testing. I …

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 structure to how you create a -webkit-gradient. Thus you get the benefit of programatic declaration of colors and ease of updating.

Earlier in the article, Biggs also makes a good point about transitions and why doing them through CSS …

69 comments

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 are fun for all kinds of things, like little arrow sticking out from speech bubbles, navigation pointers, and more. Often times these are just visual flourishes, undeserving of dedicated markup. Fortunately, pseduo elements are often a perfect fit. That is, …

41 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 = "black";

CSS went as HTML:

#pumpkin:before { content: "Happy Halloween!"; }

Happy Halloween everyone!…

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). And it works on Mobile Safari with touch events as well!…

48 comments

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

52 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?…

109 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 behind it. We'll do this in two ways, with CSS3, and with jQuery. Then we'll combine them into a progressive enhancement way to handle it. …

72 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 has surfaced.

Back in 2008, Shaun Inman suggested the syntax:

a < img { border: none; }

[Corrected the following sentence]: In this example, it would select a tags but only if they contained an img tag. (Aside: this would …

Formalize CSS

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

41 comments

Fluid Width Equal Height Columns

Last updated in February 2015 by Marie Mosley.

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 to have their own background, it becomes very important to the visual integrity of the design.


THE PROBLEM: Three columns with different amounts of content only grow as tall as they…
45 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 a new tab, it just shows the source right there on the page. I thought that was cool so I set out to recreate it my own way.…

181 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 from some completely unrelated field. Hear enough stories like that and you might start thinking nobody who works on the web actually went to school for it. But is it true? How will real poll numbers look?

To clarify a …

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

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 a new fancy black glossy cover and black spiral bind (lays flat!).

It's not cheap at $70.00 (+S&H), but that's what it took to create this full-color beauty. Of course that comes with the PDF and free lifetime updates to …

30 comments

Poll Results: Multiple JavaScript Libraries

The question was:

Do you ever use two JavaScript libraries on the same page?

My thinking in creating this poll was around two ideas:

  1. An excuse to educate people that using multiple libraries on the same page is generally a bad idea and not necessary.
  2. Uncover interesting scenarios where using multiple libraries on the same page was useful/required.

I was specifically talking about the big libraries that are general-purpose helper libraries for making working with JavaScript easier: jQuery, MooTools, Dojo, …

104 comments

AnythingSlider 1.4

Since the AnythingSlider has been on GitHub, a number of people have pushed the project forward. Big props to ProLoser, Mottie, meancode, betzster, and kalasoft for committing code to make it more feature rich, smarter, and more optimized. …

WebP Image Format

Google has released a new image compression format called WebP (pronounced "weppy"). It is for photographic style images (like JPG) and also lossy (like JPG). Their example gallery has side by side comparisons where the WebP version is equal to in quality or better with smaller size. The download they offer though, has strangely different results... I've heard some murmors that the quality of WebP is worse, but also like JPG, there are quality settings so I'm not sure if …

40 comments

Drawing Table

I made a thing, in which you can use your mouse cursor to draw on a grid with different colors. You can then copy-and-paste the HTML from the design you made.…

26 comments

10 Mouthwatering Tips on Can Achieve Mega Blogging Success!!

That's what I titled a quick presentation I put together for this past Barcamp Tampa Bay. I thought I'd publish the slides here.

I'll also summarize:

  • Never title things like that. It's sensationalist, poor English, and doesn't say much about what lies ahead.
  • Of course you have to be passionate about what you blog about it. In other words, your life should already be about what you are blogging about, and the blog is an extension of that.
  • Don't
34 comments

UI Pattern Ideas: List with Functions

Last week I asked people to participate in a group design project on a specific design pattern: a list with functions. The premise was:

The design pattern we are going to tackle is a list with functions. Think of a list of five names. The primary function of this list is to click the names. The secondary function of the list is that the list needs to be manageable. There needs to be some kind of functionality to edit and …

Promote JS

Finding correct, current, and well written documentation on JavaScript can sometimes be rather difficult. The web has a lot of misinformation on it (can you believe it?!). This is an attempt to get Mozilla's high quality documentation at the top of search engine results by having folks put specially crafted links on their site that link to specific sections of their JavaScript documentation.

These JavaScript kids are also so clever. Here is mine:

Dealing with Content Scrapers

Jeff Starr's response to my article on doing nothing about content scrapers. Among other ideas:

Sprinkling a few internal links throughout your posts benefits you in some fantastic ways: Provides links back to your site from stolen/scraped content, helps your readers find new and related pages/content on your site, makes it easy for search engines to crawl deeply into your site.…

Vendor Prefix Equivalents

Ever wonder what the Gecko equivalent to WebKit's -webkit-transition-timing-function is? This chart has got you covered. But more importantly, if the other rendering engines have those properties implemented at all.…

jQuery Summit

I'm speaking at the jQuery Summit, the 2nd Annual Online, Live jQuery Conference November 16 & 17th, 2010.

If you are interested, use coupon code JQUERY2CHRIS for 20% off!…