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

Article Archives

2 comments

Links of Interest

The Amazing Color Label Wheel


Holy relative percentage positioning! This was built from asking people how they would describe thousands of colors.

 

CSS News


One of those headline aggregator style sites (like POPurls) only for just CSS stuff. Hey, CSS-Tricks is on there! Cool.

 

CSS Frame Generator


Paste your markup into the box and click the button. This site will look at every tag on the page and generate an empty CSS file for you that specifically …

one comment

Poll Results: Is CSS Coding Part of Your Career?

At the time of this writing, the poll is showing that the largest percentage of you (34%) have careers in which CSS plays a huge part (75%-100% of it). I definitely fit into that category myself.

I really wasn't sure what to except with this one, so I'm not surprised that there is a pretty even split between the mid-range percentages. I am quite surprised at the top and bottom levels though! For sure, I would have though the 0% …

12 comments

CSS Off Entry

I mentioned CSS Off earlier in the week, but I wasn't sure if I was going to have time this weekend to participate. As fate would have it, I happened to be browsing my feeds late Friday night and saw the post pop up that the files were ready. I figured I'd at least download the PSD and check it out. Of course as soon as I start poking around in the file, I was hooked. I started slicing stuff …

40 comments

Designing the Digg Header: How To & Download

The design of Digg is full of smart ideas. The site identity is strong but doesn't take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It's fluid width, but it doesn't shrink too far or grow too big.

Let's design the Digg header!

VIEW THE DEMODOWNLOAD FILES

 

1. The Page…
18 comments

Multiple Backgrounds: Left Half and Right Half

Hey! This article is pretty old. We revised it here which includes much better information.

The introduction of the brand-new CSS-Tricks forums the last few days has been great! It was worried it would take a while for it to catch on, but the last few days there have been about 150 posts in lots of great topics.

One of those great topics was John Steven's background challenge:

I'm standing before a challenge and because to celebrate this new forum, …

4 comments

Links of Interest

Just how many classes can you apply to a single element?

Kilian Valkhof finds out with some javascript. Opera and Safari, 4000ish. FF and IE7, 2000ish. So the answer:

Way more than we’ll ever need.

 

Web Design Rap


This is so great. There is actually a lot of good information packed inside all this awesomeness.

Please don't use tables even tho' they work fine. When it comes to indexing they give search engines a hard time.

Word. …

10 comments

Forums, Downloads & Header – Oh My!

I rolled out a slightly different new header for the site last night, and with it came some new navigational tabs. Here is a little overview of what's going on:

Forums

There are forums now! They are brand-spankin' new, so they are a bit of a ghost town right now. But that's to be expected. What I hope is that folks will post their troubleshooting questions in there, and do my best to help out and answer those questions in …

26 comments

Learning jQuery: Revealing Photo Slider

So in my journey to to learn jQuery, I'm trying to learn to do some things that CSS can already do but that jQuery can do "sexier". Jonathan Snook has an article up "Content Overlay with CSS" in which extra content is revealed in a certain area when it is moused over. This inspired me to try to do something similar with jQuery. My first thought was a thumbnail photo gallery, where clicking a button would reveal the …

19 comments

Learning jQuery: A Roundup Roundup

I've been really getting into this jQuery phenomenon lately. jQuery is tightly tied to CSS, so if you are already comfortable with CSS and are looking for ways to expand your possibilities, jQuery is the place to be. You can achieve so many cool effects with it, and there are so many good learning resources out there for it I think it makes sense for serious web designers to start getting their hands dirty with this. In the past few …

9 comments

Javascript Page Slider Roundup

"Page Sliders" are a bit like Tabbed Boxes, only the content appears to slide by instead of be instantly replaced. This is a pretty nice effect and like tabbed boxes, it can help you get a lot of content onto a single page without risking visual clutter. There are a number of techniques and frameworks for creating these page sliders. Here is a round up of some ones that I have found and used.

Coda Slider


Niall Doherty's Coda

11 comments

Links of Interest

960 Grid System


Nathan Smith has launched a CSS framework called the 960 Grid System. The theory is that 960 pixels is a great number for a fixed width site, because it fits nicely onto a 1024px screen and is evenly divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it ideal for splitting into columns for …

6 comments

Group Interview

I recently participated in a group interview about clients, design, and freelancing in general over on Vandelay Website Design.

READ THE INTERVIEW

The rest of the participants were:
Alen Grakalic of CSS Globe
John Phillips of Freelance Folder
David Airey
Matt Griffin of Liquid Design Media
Connor Wilson
Thord Daniel Hedengren
Michael Martin of Pro Blog Design
Jacob Cass of Just Creative Design
Dejan Cancarevic of StylizedWeb

These interviews are kind of fun. I also did one on Snap2Objects recently. …

65 comments

Nine Techniques for CSS Image Replacement

CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally you'd like to show your logo, not text.

Update (March 14, 2012). I've created a new page that now covers more image replacement techniques, including the more recent Scott
12 comments

Using CSS for Image Borders

The following is a Guest Post written by Volkan Görgülü. Thanks Volkan!

The picture used in this article, The Solitude of the Fisherman, is from Daniel Cheong. I have come across with this picture in an article at Smashing Magazine.

Generally when we put borders around our images, as you can see in the example below, they make the image look more appealing. They make the image stand out from the other content on the page.…

13 comments

Site News

Registration Now Available

For those of you who like to leave comments here on CSS-Tricks (Thanks, by the way!), I wanted to make it easier for you. You can now register for an account. Then when you are logged in, you don't have to fill out that Name / Email / Website thing every single time you want to comment.

There may be benefits for registering sometime in the future, like potentially some exclusive content or exclusive screencast or …

5 comments

Links of Interest

IzzyMenu


This is another one of those automatic menu builder sites. I think this one is pretty nice though. Lots of customizable features, you can save your menus there, you can download them and they come nicely packaged up with all the files you need.

 

New TutorialBlog Writer


TutorialBlog has been sold and bought and the new owners have hired me to be the new writer. Nothing will change here at CSS-Tricks, but I'll be writing about a wider …

11 comments

New Poll: Is CSS Part of Your Career?

I am interested to know how many of you CSS-Tricks readers actually write CSS as part of their job or career.

  • 0% - You don't do anything CSS related at work
  • 1-25% - You use CSS a little bit but it's not a main focus
  • 25-50% - CSS is a part of my job, but I do a lot of other stuff too
  • 50-75% - Much of what I do is CSS based web design, but not all
  • 75% -
26 comments

How To: Create a Tabbed Box with YUI Tabs

Tabbed boxes are all the rage these days. Check out the "Explore" section on MSNBC, or the Premium News Theme to see how they can be used in a blog setting. I think it's for a good reason. It allows you to add more content to a page with less clutter while engaging visitors to interact with the site. Plus it's just kinda fun.

Note how these "tabbed boxes" work. They instantly change the content inside the box when …

36 comments

Rethinking CSS Image Replacement

When I say CSS image replacement, I mean taking a page element that isn't normally an image and turning it into an image. This is a very common trick and popular because of it's semantic meaningfulness and SEO benefits. A common place to use this is with a header tag.

The OLD Way <h1 class="main-logo"> CSS-Tricks </h1> h1.main-logo { width: 350px; height: 75px; background: url(images/header-image.jpg); text-indent: -9999px; }

PROBLEM:
If you turn CSS off, this will just …

28 comments

Starry Night: Incredible 3D Background Effect with Parallax

If you haven't seen the mysteriously cool Silverback app teaser page you should check it out. The Gorilla was designed by Jon Hicks (yep! the same site with the cool body-border technique). Make sure you resize your browser around when you visit the site to see the cool "parallax" effect of the hanging vines. The site itself was designed by Paul Annett. Paul wrote an article on Think Vitamin on how he created that parallax effect.…

4 comments

Links of Interest

Challenge: CSS Globe vs. CSS-Tricks


Someone started an XHTML Challenge between CSS-Tricks and CSS Globe. At the time it was started I was working on that new subscribe section and there was a screwed up tag causing the site not to validate (as you can see by my cries in the comments). I see they have updated the stats now though and it shows me validating. It's all in good fun, so head on over and vote. I also …

12 comments

Quick Reminder About File Paths

Whenever I have a problem with an image "not showing up" on a web page, the first thing I do is take a close look at the file path that references that image. If that file path is relative (meaning that it doesn't start with http://), I pay extra close attention to the relationship of where the file is that is referencing the image, and where that image actually is.

  • Is the image in the same directory as the file
13 comments

Trying OpenID… and My Other WordPress Plugins

I get the question from time to time what plugins I use on this blog. Since I just got through installing a brand new one (Open ID), I thought this might be a good time to run through the list.

 

RSS / Feed Related

FeedBurner Feed Smith
I "burn" my feed through FeedBurner for the purpose of gathering statistics. These statistics wouldn't be very useful if only a portion of the subscribers used the FeedBurner feed. This plugin "forces" …

13 comments

Poll Results: What CSS Reset Do You Use?

As of late yesterday here are the results:

I wasn't surprised to see the Meyer's reset in the lead. It is very popular, thoughtful, and effective. I was surprised to "What's a CSS Reset?" at a narrow second place. In a nutshell, a CSS reset removes default styling from page elements so that you are "starting fresh" with the attributes you choose to apply. This is important for two reasons. One, puts all browsers on a level playing field. Different …

15 comments

The Different Techniques for Applying the PNG Hack

Alpha-transparent PNG's, ("PNG-24" for those of you saving out of Photoshop) are an amazing thing for web designers. We can make a button with a drop shadow on it and it will multiply that shadow onto whatever happens to be underneath it, even if that background changes. This may seem like a trivial thing, but it's really not. The possibilities that alpha transparency opens up for you as a designer are many. The problem, as you are likely well aware, …

13 comments

Links of Interest

Photoshop Cryptoquote Challenge


This has nothing to do with CSS, but I thought it might be a fun little for any Photoshop gurus out there. Someone spraypainted a message on the side of one of my neighbor's houses. Before I could read what it said, the message was painted over. But you can still sorta read it, so I thought I'd snap a picture and see if I could Photoshop it and make out the message. I think I might …

18 comments

CSS-Tricks Finally Gets A Print Stylesheet

This is way past due...but it's finally here: a print stylesheet!

I'll start by showing you the entire stylesheet, then I'll explain a little bit about what I was thinking.

body { font-family: Georgia, serif; background: none; color: black; } #page { width: 100%; margin: 0; padding: 0; background: none; } #header, #menu-bar, #sidebar, h2#postcomment, form#commentform, #footer { display: none; } .entry a:after { content: " [" attr(href) "] "; } #printed-article { border: 1px solid #666; padding: 10px; }
80 comments

Equidistant Objects with CSS

Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have.

Here are the goals we are trying to achieve:

  • The left-most object is left aligned with it's parent element.
  • The right-most object
51 comments

Color Rendering Difference: Firefox vs. Safari

CSS-Tricks reader Norm writes in to ask me about a problem he is having with color on a new site he is designing:

I have a graphical question about my test site. The header and main page background are pulled from the same original graphic and in Firefox the header and body match up fairly well (I still need to do a little work to get the patterns to match up better) but in Safari the shade of brown …

5 comments

Links of Interest

CSS Rand


I was kind of confused when I first went to CSS Rand, because it just looked like some random nice website (not a gallery) then I figured it out... It's a new kind of design gallery, where you just reload your page and it loads up a new page for you to look at. Kind of a neat idea. Lots of non-English sites too if you are into/not-into that. I'd like to see some kind of voting...…

8 comments

CSS-Tricks Screencasts now on iTunes

It took a little while, but the CSS-Tricks Video Screencasts are now listed properly in the iTunes podcast directory.

Even cooler, you can just straight up search for "CSS" in the iTunes search area and it comes up as one of the ones right in the Podcasts section. Right next to "Let's Make Love and Listen to Death from Above". Perfect.

Here is the direct link:
CSS-Tricks Screencasts (iTunes Link)

34 comments

Techniques for Fighting Image Theft

There are a few.

1. Redirect links from external sites to your "DON'T STEAL" graphic

There are numerous tutorials on how to do this around the web, but I most recently read about it on David Airey's article "How to deter thieves from stealing your images and server bandwidth". The technique is an addition to your .htaccess file in the root directory of your site:

RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+\.)?yourwebsite\.com/ [NC] RewriteCond %{HTTP_REFERER} !^$ RewriteRule .*\.(jpe?g|gif|bmp|png|jpg)$
22 comments

New Poll: What Kind of CSS Reset Do You Use?

Different browsers have different default settings for page elements. In an effort to keep web pages looking as consistent as possible between browsers, many web designers use what is commonly referred to as a CSS reset to wipe away these default settings and start fresh.

Margin and padding are the most common things to reset as they commonly cause layout problems if not reset. This also gives you the opportunity to "work forwards" with your margin/padding. This means applying margin/padding …

9 comments

Links of Interest

C.S.I in XHTML and CSS coding.


Dor Dan has a nice article on keeping both your HTML and CSS clean with a consistent system of Comments, Spacing, and Indents. Now that's some beautiful code.

 

Detailed Look at Stacking in CSS


Tim Kadlec takes an in-depth look at the "stacking order" of the z-index parameter in CSS. Z-index is, unfortunately, one of those things that is not as simple as it should be. The one that …

92 comments

Using Weather Data to Change Your Website’s Appearance through PHP and CSS

This article is co-authored by David Walsh of
The David Walsh Blog :: PHP, CSS, MooTools, and Everything Else

UPDATE: This post was updated on April 30th, 2008 to account for a minor change in how Yahoo! was serving up data UPDATED DOWNLOAD

Inspiration for this idea came from a comment by Andreas.

Using a little magic and trickery (read: PHP and CSS), we can change the appearance of a website automatically based on the weather outside, in real

2 comments

Poll Results: The Responsibility of Mobile Web Design

This is has been an interesting poll! It's almost a dead-heat. Through the course of it, it has actually gone back and forth for the lead a bit.

The winner by a nose: It is the MOBILE DEVICES job to make sure websites look and function well.

I have no doubt that the iPhone had some influence this. I am an iPhone user myself and it has changed my opinion on mobile browsing. Technology is sufficiently advanced now that if …

9 comments

Designing the DZone Cross-Promotional Footer

DZone has recently rolled out a footer on their new "Zones" that I designed/coded for them. If you want to check it out live, you can see it at any of the zones like the CSS Zone. I thought I would share some of the thought process we went through and the code.

 

We looked at other cross-promotional footers.

A good first step is always to take a look around and see what other's have done before you. …

12 comments

CSS-Tricks Sporting a Freshened Up Design

Did a little pre-spring-cleaning around here today

  • Lightened up the whole feel with the lighter textured background.
  • Added a link to the new videos section.
  • Make the subscribe section more obvious, and included the new video feed.

Really, it's not that different. It's just the background that makes it seem that way. My goal in the near future is to add a section (maybe in the sidebar) of links to my favorite examples.

Hopefully ya'll like it, but let me …

4 comments

Links of Interest

Arial or Helvetica?


Once there was a typeface called Helvetica. It was extremely popular. Later came a software company called Microsoft. Can you tell the difference between the original and the rip-off in these ten examples?

 

Blind Text Generator

In my option way nicer than lipsum.com. I HATE how you have to tell lipsum.com "how many paragraphs you need" before it gives you any text to copy. Seems like a cheap attempt to get two page views per visitor …

11 comments

How To Set Up and Host A Publicly-Accessible File on Amazon S3 (Simple Storage Service)

One of the many good suggestions I got for hosting these video files was to use the Amazon S3 (Simple Storage Service). I had heard about this before, but didn't know much about it. Nothing like trial by fire to figure something out quickly...

 

Step 1: Sign up for Amazon Web Services

Simple enough. Go here to do this. There are other different web services Amazon offers. The one we are using here is the Simple Storage Service). You …

23 comments

CSS-Tricks Video Screencasts Now Available

Alright I'm just gonna publish the link and see how it goes...
CSS-Tricks Video Screencasts

DISCLAIMER: These are my very first screencasts ever, so the quality is sort of rough, folks. I am going to keep at it though and I'm sure they will get better and more focused with time.

Also, I call them "podcasts" in the video, but it's not really a podcast yet since I haven't really figured out what I'm going to do about that. …

14 comments

Prevent Menu “Stepdown”

If you are familiar with the concepts of "floats", you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have you ever seen your floated elements "stepdown"?

This is a fairly common problem you can run into when creating a horizontal menu. Like most menus, you create an unordered list:

<ul id="menu"> <li><a href="#">My</a></li> <li><a href="#">Little</a></li> <li><a href="#">Menu</a></li> </ul>

You …

15 comments

Advice on Videos Needed

That's just a little teaser graphic there for ya'll =)

Here is the scoop. I'm all set up to start doing some Video Screencasts for CSS-Tricks. I actually already sort of shot the first one. I am on a Mac, so I used iShowU to record the video at 1280x800 with the Apple Animation codec at as high of quality as I could. I also have a pretty decent condenser mic so the audio quality is pretty good. Actually, the …

4 comments

Links of Interest

The Funkiest Ampersand's You Have Ever Seen


Spoon Graphics has an awesome roundup of funky ampersands. I mentioned in the comments a cool thing to "use the best ampersand available" is to wrap the ampersands in an unique class and then list your 10 favorite in your font-family declaration. Chances are, most visitors won't have your crazy fonts, but there is decent change that some of them will have at least one of them. And if not, they'll …

9 comments

A Few Quick Weekend Notes

Hide an image in your text!

Reader Erik left a comment linking to an amazing example of what can be done with the CSS3 selection color technique I just posted about. You have to see it to believe it.

A New Poll!


If you haven't noticed, there is a new pole in the Sidebar. I am asking what you feel the web designers role is in mobile website design. The way I see it there are two schools of thought. …

47 comments

Overriding The Default Text Selection Color With CSS

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways. Fortunately, this can be thought of as one of those "forward-enhancement" techniques. It's a nice touch for those using modern browsers, but it just gets ignored in other browsers and it's not …

22 comments

Resizeable Images (At Full Resolution!)

Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don't bork when text is resized. But did you know you can make images grow and shrink along with the text?

The trick is to give your images a unique class and set their widths with an em value.

HTML:

<img
3 comments

Links of Interest

Sub Pixel Problems in CSS


John Resig has an interesting writeup of how different browsers deal with sub-pixel problems. By sub pixel problems he is referring to the rounding of pixels when widths are defined with percentages and the parent with is a non evenly divisible number. Such as a parent with 50px with and four children each with a width of 25%. Opera rounds down, IE rounds up (dumb, dumb dumb), and Firefox splits it up.

 

Design…
10 comments

Links Inside of Larger Clickable Areas

Imagine the common scenario of a large header containing a horizontal menu. You want the entire header area to be clickable as a "home" button, but obviously you need your menu items to be clickable as well.

Let's write the HTML for this in this super-standard way:

<ul id="header"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul>

Because the Unordered List has a unique ID and is by nature a block-level element, we can stretch …