JSFiddle

  • Simulating lighting with CSS gradients and masks #31 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    function texture(elm, image, angle, addLight, addMask) {
        
        var stop1 = 0.5 + (Math.sin(angle)/2);
        var stop2 = 1 - stop1;
        var ...
  • Safari bug: transform-origin-z #40 is the latest revision

    When changing the value of a transform-origin's z component Safari seems to automatically translate the element to the specificed position if a transform has been defined.

    var c = 250;
    
    document.getElementById("test-0").style.cssText += "-webkit-transform-origin: " + c + "px " + c + "px " + c + "px;";
    
    document.getElementById("test-1").style.cssText ...
  • Buttons #15 is the latest revision

    Testing CSS patterns for a button set

    <h2>Standard</h2>
    
    <div class="buttons">
        <a class="button">Delete</a>
        <a class="button">Cancel</a>
    </div>
    <div class="buttons">
        <a class="button delete">Delete</a>
        <a class="button">Delete</a>
        <a class="button">Cancel</a>
    </div>
    <div class="buttons">
        <a class="button delete">Delete</a>
        <a class="button">Cancel</a>
        <a class="button">Open</a>
        <a class="button confirm">Confirm</a>
    </div>
    
    
    <h2>Grouped</h2>
    
    <div class="buttons grouped">
        <a class="button delete">Delete</a>
        <a class="button">Cancel</a>
    </div>
    <div class="buttons grouped">
        <a class="button delete">Delete</a>
        <a class="button">Delete</a>
        <a class="button">Cancel</a>
    </div>
    <div class="buttons grouped">
        <a class="button delete">Delete</a>
        <a class="button">Cancel</a>
        <a class="button">Open</a>
        <a class="button confirm">Confirm ...</a></div>