Articles by

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

@chriscoyier · chriscoyier.net

Spinny Leaf Menu 

<nav>
  <ul class="top-menu">
    <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
    <li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>
    <li><a href=#>Price</a><div class="menu-item" id="price"></div></li>
    <li><a href=#>About</a><div class="menu-item" id="about"></div></li>
    <li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
  </ul>
</nav>
nav {
	width: 960px;
	height: 100px;
	margin: 120px auto;
	text-align: center;
}
.top-menu li {
…

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

(Updated on )

Non-Form Fieldset Look 

<section class="fieldset"<h1This is not a fieldset</h1<pBooyah!</p</section
.fieldset {
  position: relative;
  border: 1px solid #ddd;
  padding: 10px;
}

.fieldset h1 {
  position: absolute;
  top: 0;
  font-size: 18px;
  line-height: 1;
  margin: -9px 0 0; /* half of
…
(Updated on )

Progress Element in Firefox

Direct Link

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:

…

…

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 …

(Updated on )

Mobile WebKit Overflow Scrolling

Direct Link

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 …

(Updated on )

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.
(Updated on )

The Fourth Fourth

It's CSS-Tricks fourth birthday. Yay! Time for the traditional mid-year mini state of the site.
(Updated on )

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 …

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