Border Radius on Images

Direct Link

If you ever tried to use border-radius on <img>‘s, you know that it doesn’t always work (even if the browser supports that CSS3 property, like Firefox 3 and Opera 11). The root of it is that the image is …

Avatar of Chris Coyier
Shared by Chris Coyier on (Updated on )

Font Sizing with REM

Direct Link

One of the problems with using “em” as font sizes is that they cascade, so you are forever writing rules that select nested elements to reset them back to 1em; CSS3 now has rem (“root em”) to prevent that issue. …

Avatar of Chris Coyier
Shared by Chris Coyier on

Custom Radio Buttons

#foo:checked::before,
input[type="checkbox"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
}

#foo:checked,
input[type="checkbox"] + label::before {
    content: url('checkbox.png');
}

input[type="checkbox"]:checked + label::before {
    content: url('checkbox-checked.png');
}

#foo doesn’t reference any particular element, it’s there purely to prevent browsers from …

Avatar of Chris Coyier
Chris Coyier on

Simple Auto-Playing Slideshow

HTML

Wrapper with divs as the slides, which can contain any content:

<div id="slideshow"<div<img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"</div<div<img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"</div<divPretty cool eh? This slide is proof the content can be anything.
  </div</div
CSS

Slides need …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Signify “PDF Bombs”

Any ol’ anchor link can be a link to a PDF document, but clicking a link like that thinking otherwise can be surprising and uncomfortable for a user. This CSS can visually signify those links.

/* Add " (PDF)" text 
Avatar of Chris Coyier
Chris Coyier on (Updated on )