Article Archives

The following post is a guest post by authored by Jermayn Parker of GermWorks, a web and multimedia blog.

Headers are an important factor in web design, they can either make or break a design. Since web 2.0, we …

Jared Schwager has an interesting idea on compressing CSS on-the-fly using PHP. Works pretty well. The end result is slightly quicker downloads and slightly quicker render times with a slightly higher burden on the server.

Fadtastic has a nice roundup …

The typical technique for making a fluid width layout is to have your main content have a minimum and maximum width and then make sure it is working in all browsers with various techniques.

Another way is to give elements …

I’ve been thinking a lot about screen resolution lately and how the use of fluid width websites is the best way to accommodate all visitors screen resolutions. The alternative, static width websites, have to make a choice. You can optimize …

Polishing your website. Nice overview about the subtleties and details of web design and how those details are what makes great websites.

Honeypot Captcha. It’s like the Un-Captcha. Basically you hide the captcha with CSS. Bots see it, Humans …

I really like it when pages use really subtle animation to enhance different page elements. Check out the E-Junkie site and their little flame dude in the stamp as their logo. Every once in a while he blinks and it’s …

There is discussion about making rotation part of the CSS3. Here are some important points:

There are two types of rotation: rotation that happens during layout (and pushes aside content below it), and rotation that happens after layout.

width: auto…

There is some very nice software out there for creating and editing CSS files. Since I’m mostly a Mac guy, this review is Mac focused, but I would love to hear about Windows CSS editors if anyone has anything to …

Amazon.com has been flogged a few times for it’s weird use of “tabs” in it’s design that don’t really act like tabs. Well now we can start flogging it for all new reasons. They have gone with a really busy, …

I found this hilarious IE Voodoo Doll over on Deviant Art. What an awesome way to take out your aggression! You can’t buy them of course (copyrights…), but there is talk of a tutorial. Hopefully this will help some …

Recently I posted about a little trick about remembering the css anchor selectors. Now I have another little trick that is even more useful, using the word TROUBLE to remember the order of padding/margin amounts in CSS shorthand. The …

Like many of you, I spend a fair bit of time saving out graphics for use on the web. So when I’m browsing around the web, just by second nature I spot optimization mistakes. Kind of like how a typesetter …

Defining colors in CSS is all about Hex Codes. You know, those alphanumeric six-digit things like #990000. You might have a handful of them memorized. Like that one I just mentioned is a nice dark red. #cccccc is a …

For many people, their introduction to web design and the wonderful world of CSS is through blogging. They start off blogging because it’s so easy and you don’t need to know anything at all about design. Soon after, the desire …

Often times “tag clouds” use variations in font-size and font-weight to distinguish between heavy use and light use tags. Here is another approach: use rollover boxes of different sizes through varied amounts of padding.

You can set the different sizes …

This is how you create a super basic submit button:

<input type="button" value="Submit" />

All you need to do to replace this default button with an image is to change the type to image and then declare a source image …

Blockquotes are HTML elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built-in styling for blockquotes, often just a simple left margin. If you …

One the techniques I have advocated using for a long time is this:

* {
margin: 0;
padding: 0;
}

This is part of the “CSS Reset” theory which helps keep your designs consistent across browsers, a very good thing. …

Sometimes the best way to get inspired to design is to look at other great designs. These designs showcase beauty and function over flashiness. There are some amazing and flashy designs out there where I love the design but …

A “deprecated” element is an element the W3C has designated as outdated. These elements should not be used and are generally considered to be “bad code”. If you use a STRICT DOCTYPE, deprecated elements will not pass validation.

The thing …

Check out the statistics for the screen resolutions of all you hip kids who read CSS-Tricks:

On this site, 800×600 doesn’t even make the top ten. Knowing that, I designed this site to make use of that extra pixel …

I read a comment the other day over on CSS Drive from someone named Slackerbabe that I thought was worth repeating.

Heres a cool way to remember the order of the four selectors, “LVHA (link visited hover active)”,….

Just think …

A textarea is an element on a webpage that you can type into. These are commonly used as commenting areas, contact forms or address entry areas. All browsers have defaults styles for textareas which vary. You can take control of …

Reader Delang was having trouble with the CSS Page Loader concept I posted a while ago. So I went and made up an example page. It’s very simple, and it just “fakes” actually loading something. As in, it’s not …

Someone over at Digital Inspiration asked the question:

“How can I send a YouTube Video so that when the person receives it there will not be any other videos in the sidebars that can be opened.”

There is an awesome …

New minimalism in web interface design

You.. and me… and CSS simultaneous
Edit CSS code in Firefox and IE at the same time. Windows only.

Quick web typography tip: Give your <p> elements bottom margin.

ModalBox: easily the nicest download-modify-use …

Grunge is a popular style these days. I thought I’d throw out there a fairly simple “grungy” menu for free download. Feel free to download, alter, and use however you want.

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]…

Welcome to the new look for CSS-Tricks. I decided it was time to get down to it and give CSS-Tricks a brand new look. I hope you like it. I think it’s far nicer in both form and function than …

As you may know, you can define a style for a:visited in your CSS, which will apply itself to links in visitors browsers that they have already visited. The usefulness of this is debatable, but no matter what, it’s best …

I say “variable” because CSS doesn’t natively support real variables. The debate is somewhat heated on whether it should or not. I’m not going to take a stand on that one, but there is a clever little hack bouncing around …

Welcome to CSS-Tricks! We’ve been busy trying to bring you tips, techniques, and tutorials about using Cascading Style Sheets. Along the way, we’ve written up a number of example pages showcasing various techniques. If you are new here, here is …

It’s a bit too early to tell, but as you may have noticed, I’ve installed it in the sidebar of this site. My hope is that it turns out to be an awesome service for both readers and webmasters alike. …

Steve Smith over at Ordered List has an interesting article up about how he chooses to format his CSS. Basically there are two ways to go about it, Single-Line and Multi-Line, with Multi-Line being the classic approach:

#wrapper {
width:800px;
…

By exploding, I sort of mean “the menu blocks appear to expand vertically”, but you get the idea. The theory is that upon rollover, you can change the height and offset of an element (or width or any number of …

Hey ya’ll,

I have a guest post up over at CSSJuice.com explaining how to set up user-selectable stylesheets. Check it out!…

Developer Mark Alldritt posted a pretty nice bit of code (XCode project) for making nice Apple-Like menus in applications. I thought I would try to replicate this same idea with CSS. It worked out fairly well, check out the screenshot:…

OK, this is a little cheezy, but it’s just intended to be an example of something you can do with CSS. Certainly this could be adapted in any number of different ways to achieve cooler effects. The theory here is …

The Graphic Design Blog asks an interesting question about advice for beginners on learning CSS/HTML: Should newbies learn static or dynamic web design?

The obvious conclusion would be ‘you gotta learn to walk before you can run’, but this …

If you have certain pages on your website that take some time to load, you may want to consider a page loader. A page loader is any kind of animation that visually communicates to a visitor that the page is …

Let’s say you need six different 100px square boxes with different characteristics:

• Red with Border
• Blue with Border
• Green with Border
• Red without Border
• Blue without Border
• Green without Border

You COULD create a unique class for each of these, …

There is an article over at Search-This that points out a couple of beginner mistakes that are pretty interesting. Here are some highlights and some of our own:

• Absolute positioning.
  One of the first feelings of power you get when

…

Just like you can validate your HTML at the W3C, you can validate your CSS.

CSS-Tricks passes muster.…

You can get pretty specific when declaring how you want text to look with CSS:

p {
font-family: Verdana;
background-color: #7A2121;
color: #B93333;
text-decoration: underline;
word-spacing: Normal;
text-align: left;
letter-spacing: 1px;
text-indent: 15px;
line-height: 16px;
font-size: 10px;
font-weight: bold;
font-style: …

Dan Cole has an interesting article up about creating a logo using only CSS. Why?

• Faster loading time
• Works with images disabled
• Scalable

Here is what it looks like:

Here is how it was done:

#tower1 {
position:absolute;
top:51px;
…

This is old news, but is worth of revisiting because of it’s preposterousness. You are able to add CSS to your MySpace pages. Cool. But where do you do that? Is there some little fun CSS editor they built in? …

I really like this subtle effect on the fortuito.us blog. the text at the bottom of the page fades away. Even as you scroll the page content up and down, it appears as if it fades away into the …

It can be a mighty cool effect to have images that nestle themselves in the four corners of your webpage. You can achieve this positioning with CSS fairly easily without affecting any of your other page content. You may also …

If you are adding video to your website, using embedded YouTube videos is definitely something to consider. In addition to saving hugely on bandwidth, releasing your video into the wild on YouTube might gain you some exposure you may have …

It is a very healthy technique these days to center your entire website horizontally in the browser window (but be careful), especially nowdays with monitors getting bigger and bigger and with higher resolution. Sometimes it’s nice to break the …

There is a great tutorial on CSS Play that uses pure CSS to create flipbook style animation. The theory at work here is that there is there is a big stack of “slides” stacked on top of each other. On …