Skip to main content

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

Hexagon with Shadow

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

.hexagon, 
.hexagon:before, 
.hexagon:after {
  background: red;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);   
}

.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

Diagonal Graph Paper Gradient

#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, 
Read article “Diagonal Graph Paper Gradient”
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.
Link

Dropp

Link

CSS Lint

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”