자바스크립트가 그려낸 둥근 모서리 - Transcorners

계속해서 미루어 오다가 이제서야 소개합니다. Transcorners는 대상 엘리먼트의 모서리에 라운드(또는 대각선) 효과를 부여하는 자바스크립트 효과입니다. 가볍기로 잘 알려진 mootools 자바스크립트 프레임웍을 기반으로 만들어 졌으며, 모든 브라우저에서 사용할 수 있도록 제작되었습니다. 아래는 Transcorners 사용해서 직접 그려본 라운드 효과와 예제입니다.

    예제1
    //모든 코너에 반지름(radius) 30
    new Transcorner( 'example1', { radius: 30 });
    //background:#fee; border:1px solid #a00; 스타일 속성을 지님

    예제2
    //모든 코너에 반지름 10 (기본값)
    new Transcorner( 'example2');
    //background:#4ff; border:2px solid #4bb; 스타일 속성을 지님

    예제3
    //상단 왼쪽 코너에만 반지름 20
    new Transcorner( 'example3', 'top left', { radius: 20 });

    예제4
    //상단 코너에만 반지름 10
    new Transcorner( 'example4', 'top');

    예제5
    //상단, 하단 오른쪽에 코너에 반지름 10 라인(cornerslinear transition)
    new Transcorner( 'example5', 'top, bottom right', { transition: Effect.Transitions.linear});

보시다시피 실시간에 가까운 라운딩이 가능하며 이미지로 디자인한 라운드에 버금가는 디테일을 보여줍니다. 무엇보다도 이미지의 로드를 줄여 한결 가벼운 웹사이트를 구축할 수 있다는 것이 가장 큰 장점이라 하겠습니다. 매우 탐나는 확장기능이라 Prototype.js에서 사용할 수 있도록 포팅하였으며, 손 댄 김에 기능을 조금 확장했습니다. 1픽셀 이상인 보더의 처리가 가능하도록 하였으며(예제2와 같은 결과), 투명한 라운드를 사용할 수 있도록 했고, 어설픈 그림자 효과도 만들어 보았습니다. 잘 응용하면 드래그앤 드롭이 가능한 멋진 다이얼로그 윈도우도 만들수도 있겠습니다. 참고로, 위에서 실행 된 예제는 Prototype.js기반으로 돌린 것 입니다.

Title...x

Widget! Widget! Widget! Widget! Widget! Widget! Widget! Widget! Widget! Widget! Widget! Widget!

윈도우 테스트

Download Prototype base Transcorners:

transcorners.js (5.5 KB)

출처 : 파이어준