CSS3 그라디언트 생성을위한 온라인 리소스 - 인덕션

복잡한 그라디언트 블렌드를 생성하는 기능은 CSS3의 극적인 개선 중 하나입니다. CSS3의 출현 전까지 디자이너는 바둑판 식 이미지 파일을 사용하여 페이지 뒤에 질감이있는 배경을 만들고 태그와 같은 디자인 요소를 만들었습니다. 그 이미지 파일은 페이지를 느리게 만들었고 사용자가 열어 둔 페이지에 천천히 다운로드 할 때 끈적 끈적 해 보였습니다.

좋은 소식입니다. 단점은 단순한 선형 그래디언트조차도 구문을 정의하는 것이 번거로운 점입니다. 브라우저마다 다른 간단한 구배를 정의하는 문법이 다르기 때문입니다. 대각선 또는 방사형 그래디언트를 정의 할 때 브라우저 구문 간의 차이점이 더욱 두드러집니다.

배경: -moz-radial-gradient (중심, 타원형 커버, rgba (9)>) 배경 이미지를 생성하는 데 필요한 CSS를 검사합니다. 228, 245, 252, 1) 0 %, rgba (191, 232, 249, 1) 50 %, rgba (159, 216, 239, 1) 51 %, rgba (42,176,237,1) 100 %; / * FF3. 6 % * / 배경: -webkit-gradient (방사형, 중앙 중심, 0px, 중앙 중심, 100 %, 컬러 스톱 (0 %, rgba (228, 245, 252, 1), 컬러 스톱 (50 % 컬러 스톱 (100 %, rgba (42, 176, 237, 1)), 컬러 스톱 (51 %, rgba (159, 216, 239, 1); / * Chrome, Safari4 + * / background: -webkit-radial-gradient (센터, 타원형 커버, rgba (228, 245, 252, 1) 0 %, rgba (191, 232, 249, 1) 50 %, rgba (159, 216, 239, 1) 51 %, rgba (42, 176, 237, 1) 100 %); / * Chrome10 +, Safari5. 1, 0, rgba (191, 232, 249, 1) 50 %, rgba (159, 216, 239, 1) 51 %, rgba (42, 176, 237, 1) 100 %); / * Opera 12+ * / 배경: -ms-radial-gradient (센터, 타원형 커버, rgba (228, 245, 252, 1) 0 %, rgba (191, 232, 249, 1) 50 %, rgba (159, 216, 239, 1) 51 %, rgba (42, 176, 237, 1) 100 %); / * IE10 + * / 배경: 방사형 그라디언트 (중심, rgba (228, 245, 252, 1) 0 %, rgba (191,232,249,1) 50 %, rgba (159, 216, 239, 1)) 51 %, rgba (42, 176, 237, 1) 100 %); / * W3C * /

그럼 가난한 디자이너는 무엇을해야합니까? 다행히 온라인에 몇 가지 유용한 CSS 그라디언트 생성기가 있습니다. 다음 세 가지가 가장 좋습니다:

ColorZilla의 궁극적 인 CSS 그라데이션 생성기

CSS3 그라디언트 생성기 중 가장 강력한 것인데, 궁극적 인 CSS 그라데이션 생성기를 사용하면 디자이너가 그라디언트를 정의한 모든 사용자가 편안하게 사용할 수있는 슬라이더로 그라디언트를 정의 할 수 있습니다. Illustrator, CorelDraw 또는 기타 그림 프로그램:

Ultimate CSS Gradient Generator는 Internet Explorer 9에서 인식되는 SVG 이미지 생성 옵션도 제공합니다 (CSS3 그래디언트에 대한 지원이 제한적입니다).

CSS3 그라디언트 생성기

CSS3 그라디언트 생성기는 Damian Galarza가 작성한 것으로 궁극적 인 CSS 그라데이션 생성기보다 기능이 적지 만 매우 깨끗하고 액세스하기 쉬운 인터페이스로 기본 선형 및 대각선 혼합을 쉽게 만들 수 있습니다. CSS 코드를 보는 것이 화면에 나타납니다.

이 리소스는 미리보기 창이 깨끗하고 미리 구성된 버튼 크기의 사각형이기 때문에 단추에 그라데이션 배경을 만드는 데 특히 유용합니다.

CSS 그라데이션 배경 메이커

시애틀 근처의 차고에있는 일부 친구들은 사용하기 쉽고 강력한 CSS3 그라디언트 생성기를 사용하여 CSS 그라데이션 배경 메이커라고 부릅니다. 그들은 마이크로 소프트라고 부르는 새로운 시작을 가지고 있습니다. 여기서 생성하는 그라디언트는 예, Internet Explorer (버전 10 이상)뿐 아니라 다른 모든 현재 브라우저에서도 작동합니다.

CSS Gradient Background Maker는 12 개의 사전 세트와 함께 제공되는 낱장의 그라디언트를 만드는 가장 빠른 방법 일 수 있습니다.

CSS3 그라디언트 생성기 작동 방법

여기에 나열된 세 가지 CSS3 그라디언트 생성기와 다른 것들은 디자이너가 CSS 파일에 복사하여 붙여 넣을 수있는 CSS3 코드 덩어리를 만듭니다. 생성자는이를 수행하는 방법에 많은 도움을주지 못합니다. CSS 파일에서 요소와 클래스 및 div 선택기에 대한 CSS3 배경 정의를 처리 할 수 ​​있어야합니다.

하지만 그 과정은 그리 어렵지 않습니다. 예를 들어, 클래스 스타일을 작성하고 이름을 지정하는 경우. 배경과 같이 그라디언트 스타일을 복사하여 여기에 표시된대로 해당 선택기에 붙여 넣을 수 있습니다:

. background {/ * IE10 Consumer Preview * / background-image: -ms-radial-gradient (중심, 가장 가까운 쪽 원, #FFFFFF 0 %, # 00A3EF 100 %); / * Mozilla Firefox * / background-image: -moz-radial-gradient (중심, 가장 가까운 쪽 원, #FFFFFF 0 %, # 00A3EF 100 %); / * Opera * / background-image: -o-radial-gradient (중심, 가장 가까운 쪽 원, #FFFFFF 0 %, # 00A3EF 100 %); / * Webkit (Safari / Chrome 10) * / 배경 이미지: -webkit-gradient (방사형, 중심 중심, 0, 중앙 중심, 140, 컬러 스톱 (0, #FFFFFF), 컬러 스톱 (1, # 00A3EF))); / * Webkit (Chrome 11 이상) * / 배경 이미지: -webkit-radial-gradient (중심, 가장 가까운 쪽 원, #FFFFFF 0 %, # 00A3EF 100 %); / * W3C 마크 업, IE10 릴리스 미리보기 * / 배경 이미지: 방사형 그라디언트 (가운데 가장 가까운 원, #FFFFFF 0 %, # 00A3EF 100 %);}

그런 다음 배경을 요소를 HTML 파일에 추가하십시오. 여기에서 배경은 태그에 적용됩니다.

(여기에있는 내용)