WebKit CSS

I’ve been having a little play with some of the new CSS properties using the nightly build of WebKit 🔗.

If you are using the latest version of WebKit take a look at this 🔗, (sorry at the moment other browser won’t work) it’s just a little test I made while playing with some of the new CSS properties and a little bit of jquery. The mouse acts as the light source for the circle, the shadow becomes sharper and smaller as the mouse gets close, and gets more blurry and bigger the farther away the mouse moves. There are no images just css and javascript.

This is pretty basic but some of the possibilities are pretty cool. I’d love to make a page were all of the lighting on the page changed depending on the time of day and the season.

I’m sure there is a much more elegant way of doing it, but if anyone is interested here is the jquery:

jQuery(document).ready(function () {
  $("html").mousemove(function (j) {
    //Work out percentage across / down screen
    var heightOff = Math.floor((j.pageY / $(window).height()) * 100);
    var widthOff = Math.floor((j.pageX / $(window).width()) * 100);

    //Workout offset from centre
    if (heightOff < 50) {
      var heightToOff = -50 + heightOff;
    } else {
      var heightToOff = heightOff - 50;
    }
    if (widthOff < 50) {
      var widthToOff = -50 + widthOff;
    } else {
      var widthToOff = widthOff - 50;
    }

    //Work out the blur
    var theBlur =
      Math.sqrt(
        Math.abs(widthToOff) * Math.abs(widthToOff) +
          Math.abs(heightToOff) * Math.abs(heightToOff)
      ) * 3;

    //apply everything
    $("#theBall").attr({
      style:
        "-webkit-box-shadow: " +
        (widthToOff * -1) / 2 +
        "px " +
        (heightToOff * -1) / 2 +
        "px " +
        theBlur +
        "px #555555;",
    });
  });
});

UPDATE Sort of works in the latest version of Safari too.