Skip to main content

Chris Coyier

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

Snippet

Multiple Borders

Using pseudo element(s)

You can position a pseudo element such that it’s either behind the element, and larger, making a border effect with it’s own background, or smaller and inside (but make sure the content gets positioned on top).

The element needing multiple borders should have its own border and relative positioning.

.borders {
  position: relative;
  border: 5px solid #f00;
}

The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right … Read article “Multiple Borders”

Snippet

Multiple Backgrounds Syntax

Browsers that support multiple backgrounds (WebKit from the very early days, Firefox 3+) use a syntax like this:

#box {
  background: 
    url(icon.png) top left no-repeat, 
    url(texture.jpg), 
    url(top-edge.png) top left repeat-y;
}

They are comma separated values and there can be as many as you want with different URL’s, positioning, and repeat values. You can even combine WebKit gradients into the mix:

#box {
	background: 
		url(../images/arrow.png) 15px center no-repeat,
		-webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
}

Old school IE on the Mac … Read article “Multiple Backgrounds Syntax”

Article

Double Click in CSS

With the recent proliferation of touch devices, the web designers of the world are losing our beloved mouse pointer. There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Then just earlier this week I did a post about how you can use the tabindex attribute to basically respond to a click with pure CSS. It got me thinking, can we somehow pull off … Read article “Double Click in CSS”

Snippet

Picross Style Buttons

As in, the game PICROSS3D.

CSS3 Technique

 

Button Button Button

 

.btn {
  color: white;
  font-family: Helvetica, Arial, Sans-Serif;
  font-size: 20px;
  text-decoration: none;
  text-shadow: -1px -1px 1px #616161;
  position: relative;
  padding: 15px 30px;
  -webkit-box-shadow: 5px 5px 0 #666;
  -moz-box-shadow: 5px 5px 0 #666;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  margin: 0 10px 0 0;
}

.btn:hover {
  -webkit-box-shadow: 0px 0px 0 #666;
  -moz-box-shadow: 0px 0px 0 #666;
  top: 5px;
  left: 5px;
}

jQuery Technique

Smoother, but … Read article “Picross Style Buttons”

Link

Performance of CSS Selectors

Link

Cross-Browser HTML5 Video and Audio

Article

Linkage Returns

Way back when I used to do “Links of Interest” style posts. I’m happy to announce now that 1) There is a new design of this site coming within the next few weeks and 2) Linkage is coming back. I’m going to do it like it’s done currently on Digging Into WordPress, sort of Tumbr/Daring Fireball style. There will be no comments on this site for that style of post (comments should happen on the linked post). The title … Read article “Linkage Returns”

Snippet

Style Links Depending on Destination

a[href^="http://"] {
        /* fully valid URL, likely external link */
}

a[href="http://google.com"] {
        /* link to specific website */
}

a[href^="/"], a[href^=".."] {
        /* internal relative link */
}

a[href^="mailto:"] {
        /* email link */
}

a[href$=".pdf"] {
        /* PDF file */
}

a[href$=".doc"] {
        /* Microsoft Word document */
}

a[href$=".mp3"] {
        /* Music file */
}

a[href$=".zip"] {
        /* Archive file */
}
Read article “Style Links Depending on Destination”