# Chris Coyier

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

Snippet

## Calculate Distance Between Mouse and Element

``````(function() {

var mX, mY, distance,
\$distance = \$('#distance span'),
\$element  = \$('#element');

function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}

\$(document).mousemove(function(e) {
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance(\$element, mX, mY);
\$distance.text(distance);
});

})();``````

This code will calculate the distance between the mouse cursor and the center of an element. This can be useful for triggering a function when the mouse is within a certain distance of an element. … Read article “Calculate Distance Between Mouse and Element”

Snippet

``<div class="hexagon"><span></span></div>``
``````.hexagon {
width: 100px;
height: 55px;
position: relative;
}

.hexagon,
.hexagon:before,
.hexagon:after {
background: red;
}

.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
left: 22px;
width: 57px;
height: 57px;
transform: rotate(145deg) skew(22.5deg);
}

.hexagon:before {
top: -29px;
}

.hexagon:after {
top: 27px;
}

.hexagon span {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 55px;
background: red;
z-index: 1;
}``````

See the Pen CSS Hexagon by Geoff Graham (@geoffgraham) on … Read article “Hexagon with Shadow”

Snippet

``````#example-gradient {
height: 200px;
margin: 0 0 20px 0;
background-color: #eaeaea;
background-size: 20px 20px;
background-image:
-webkit-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
-webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
background-image:
-moz-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
-moz-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
background-image:
-o-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, ``````
Article

## Screen Resolution ≠ Browser Window

The only statistic you get in most web analytics software is screen resolution. But there is a pretty good chance you just read this sentence in a browser that isn't open to the full size of your monitor. If you are looking at size analytics for you website, browser size is far more relevant. In this article we figure out how to get that data, and then look at some of the results gathered from css-tricks.com.

Article

## Useful :nth-child Recipes

I get a little giddy when I come across perfect uses for `:nth-child` or `:nth-of-type` (read about the difference). The better you understand them, the more css nerdgasms you get to have!

Article

## Just One Of Those Things You Need To Understand About JavaScript

Ever since I’ve published the article Dynamic Page / Replacing Content, I’ve gotten quite a few emails that come in from people who are trying to use it in conjunction with some other JavaScript stuff and having trouble. Most of the time, it’s some kind of lightbox effect. One of their pages has a bunch of thumbnails on it, and when they load that page in, the lightbox effect doesn’t work.

The problem is that when the thumbnails are … Read article “Just One Of Those Things You Need To Understand About JavaScript”

Article

## The Stats That Matter: Your Site’s Stats

Just because I thought it was interesting, I shared this on Twitter this morning:

95% of traffic to CSS-Tricks has a screen resolution of larger than 1024×768.

And I got all kinds of responses like: That’s such a skewed statistic!!!

How are my own stats on my own website skewed?

OK, I know what they meant, they meant that that 95% number isn’t indicative of most websites, it’s only CSS-Tricks visitors. So people shouldn’t quote that number out of context … Read article “The Stats That Matter: Your Site’s Stats”

Snippet

## Make jQuery :contains Case-Insensitive

``````// NEW selector
jQuery.expr[':'].Contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};

// OVERWRITES old selecor
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};``````
Update to work for jQuery 1.8
``````\$.expr[":"].contains = \$.expr.createPseudo(function(arg) {
return function( elem ) {
return \$(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});``````

With this in place,

``\$("div:contains('John')")``

would select all three of these elements:

``````<div>john</div>
<div>John</div>
<div>hey hey JOHN hey hey</div>``````

Demo via Pablo Fortes.… Read article “Make jQuery :contains Case-Insensitive”