CSS 그라디언트(그라데이션) 쉽게 만드는 사이트 uiGradients 사용 방법
CSS3에서 가끔씩 사용하면 상당히 이쁜 그라디언트(그라데이션-Gradient)를 아주 쉽게 만들 수 있는 사이트가 있어서 소개해 드리려고 합니다. 친효스킨 뿐만 아니라, 기타 다른 스킨에서도 얼마든지 이 사이트의 기능을 응용해서 자신만의 DIV 박스를 만든다던지, 배경 색상을 이쁘게 채울 수 있을 것 입니다. CSS 그라이언트에 대해서 따로 글을 작성한게 있는데, 같이 읽어보시면 이해하는데 훨씬 많은 도움이 되지 않을까 싶습니다. 아래에 링크를 남기도록 하겠습니다.
바로 이 사이트 입니다. 주소는 다음과 같습니다.
방문하시면 가장 먼저 그라데이션이 적용된 홈페이지를 만나볼 수 있습니다. 이제 사용법을 대략 알아보도록 합니다. 참고로 디테일한 설정까지는 직접 하지는 못 하고 이미 완성된 다양한 그라데이션 CSS 소스를 가져다 사용하는 방식 입니다. 정해진 스타일임에도 불구하고 상당히 색조합이 잘 되어 있기 때문에 사용자가 많습니다.
먼저 왼쪽 상단에 있는 Show all gradients 버튼을 누릅니다.
그러면 이렇게 다양한 프리셋 목록이 나타납니다. 여기에서 원하는 그라데이션을 선택합니다.
그리고 오른쪽 상단에 있는 이 4가지의 버튼을 통해서 직접 사용할 수 있습니다. 제일 왼쪽부터 설명을 드리자면 이런 기능을 가지고 있습니다.
회전 / CSS 코드 보기 / 목록 추가 / JPG 이미지로 다운로드
참고로 회전은 오른쪽으로 90도씩 돌아가게 됩니다. 즉 그라데이션 방향을 변경하는 기능 입니다. 목록 추가 버튼은 그냥 안 쓴다고 생각하면 됩니다. 가장 중요한게 바로 CSS 코드를 보는 버튼일 겁니다. 눌러보세요.
눌러보시면 이렇게 백그라운드 매소드에 대한 CSS 코드를 확인할 수 있습니다. 아래에 있는 Click to Copy 버튼을 눌러서 복사하고 자신의 스킨 CSS에 그대로 매소드 적용을 하시면 됩니다. 엄청 쉽습니다.
이런 방법으로 적용하여 탄생한게 바로 이 DIV 영역 입니다. 그라디언트가 이쁘게 잘 적용되었죠? 편리하고 깔끔하며 이쁩니다.
이런 방법으로 자신만의 그라데이션 백그라운드 색상을 완성해 보시기 바랍니다. 끝.
