Rev. 2.73

Zach Johnson씨는 CSS와 자바스크립트를 사용하여 마우스 움직임에 반응하는 텍스트에 그림자가 비치는 효과를 절묘하게 표현했습니다. 이 데모는 아래의 짧막한 코드로 작동됩니다. 그러나 text-shadow CSS 프로퍼티를 지원하는 Safari, Firefox 3.5, Opera, Chrome 브라우저에서만 제대로 보인다는 점을 유념하세요.

var text;
var spot;

window.onload = function () {
    document.getElementById('text-shadow-box').onmousemove = onMouseMove;
    text = document.getElementById('tsb-text');
    spot = document.getElementById('tsb-spot')
}

function onMouseMove(e) {
    var xm = e.clientX - 300;
    var ym = e.clientY - 175;
    var d = Math.sqrt(xm*xm + ym*ym);
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
    
    xm = e.clientX - 600;
    ym = e.clientY - 450;
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}

Comments

masonry.gif

CSS에서 float 속성을 이용하여 그리드 레이아웃을 꾸미려면 모든 요소들의 높이가 일치해야는 환경이 필요했습니다. 하지만 jQuery Masonry를 사용하면 높이가 서로 다른 요소들에 적용하여도 문제가 되지 않습니다. 요소를 수평으로 정렬한 후 수직을 다시 계산하여 벽돌을 끼워 맞춘듯 보기좋게 정렬해 주기 때문입니다. 이와 같은 그리드 레이아웃이 적용된 typeneu.comsilnt.com에서 색다른 느낌을 만끽해보세요.

Comments

Robert Nyman씨는 새로운 파이어버그(Firebug) 확장기능인 파이어파인더(Firefinder)를 배포했습니다. CSS 선택자 또는 XPath를 이용하여 DOM 요소를 빠르게 찾을 수 있게 해 주는 확장기능입니다. 위 화면에서 보는 것 처럼 찾아진 DOM 요소 주변에 빨간 점선으로 표시되고 결과 목록위로 마우스 커서를 가져가면 파란 점선으로 강조합니다. 매번 콘솔을 이용하여 쿼리를 날렸는데 이 짓은 더이상 안해도 되겠군요.

Comments