Rev. 2.73

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

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

윈도우 테스트

※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.
※ 라이브러리 이름이 Transcorners에서 Roundable로 변경되었습니다.

Comments


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


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

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

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

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