강력한 Photoshop 스타일 CSS 그라디언트 에디터
IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | 안드로이드 브라우저 | 안드로이드용 크롬 |
---|---|---|---|---|---|---|---|---|
6 - 8
filter 구문을 사용한 부분 지원
브라우저 사용률: 0.03%
|
4 - 9
오래된 -webkit- 구문을 사용한 지원
브라우저 사용률: 0% "최대 호환성"을 선택하여 지원 |
4 - 5
오래된 -webkit- 구문을 사용한 지원
브라우저 사용률: 0.01% "최대 호환성"을 선택하여 지원 |
3.2 - 4.3
오래된 -webkit- 구문을 사용한 지원
브라우저 사용률: 0% "최대 호환성"을 선택하여 지원 |
2.1 - 3
오래된 -webkit- 구문을 사용한 지원
브라우저 사용률: 0.01% "최대 호환성"을 선택하여 지원 |
||||
9
filter 구문을 사용한 부분 지원
SVG를 사용한 전체 지원 ("IE9 지원" 선택) 브라우저 사용률: 0.05% "최대 호환성"을 선택하여 지원 |
3.6 - 15
-moz- 접두사를 사용한 지원
브라우저 사용률: 0.01% "최대 호환성"을 선택하여 지원 |
10 - 25
-webkit- 접두사를 사용한 지원
브라우저 사용률: 0% "최대 호환성"을 선택하여 지원 |
5.1 - 6
-webkit- 접두사를 사용한 지원
브라우저 사용률: 0.01% "최대 호환성"을 선택하여 지원 |
11.1 - 11.5
-o- 접두사를 사용한 지원
브라우저 사용률: 0% "최대 호환성"을 선택하여 지원 |
5.1 - 6.1
-webkit- 접두사를 사용한 지원
브라우저 사용률: 0% "최대 호환성"을 선택하여 지원 |
4 - 4.3
-webkit- 접두사를 사용한 지원
브라우저 사용률: 0.09% "최대 호환성"을 선택하여 지원 |
||
10+
전체 지원 (접두사 없음)
|
12+
전체 지원 (접두사 없음)
|
16+
전체 지원 (접두사 없음)
|
26+
전체 지원 (접두사 없음)
|
6.1+
전체 지원 (접두사 없음)
|
12+
전체 지원 (접두사 없음)
|
7.1+
전체 지원 (접두사 없음)
|
4.4+
전체 지원 (접두사 없음)
|
46+
전체 지원 (접두사 없음)
|
(?)
CSS 그라디언트 문서로의 링크: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].
최고의 CSS 그라디언트 에디터는 Alex Sirota에 의해 만들어졌습니다. 이 도구를 좋아하신다면, 더 고급 도구들을 제공하는 ColorZilla를 확인해 보세요.
알다시피, HTML5는 웹 개발자들을 위한 많은 흥미로운 기능들을 도입했습니다. 이 기능들 중 하나는 이미지를 생성하고 그라디언트 효과를 위한 반복 배경으로 사용할 필요 없이 순수한 CSS3를 사용하여 그라디언트를 지정할 수 있는 기능입니다.
중요: 이 그라디언트 생성기를 사용하려면 최신 버전의 Firefox, Chrome, Safari, Opera 또는 IE가 필요합니다. 결과 CSS 그라디언트는 크로스 브라우저이며, 이러한 브라우저에서 작동하고 이전 버전의 Internet Explorer에서는 더 간단한 그라디언트로 대체됩니다.
주 그라디언트 제어는 다음을 허용합니다:
'미리보기' 패널을 사용하면 현재 그라디언트를 수직 또는 수평으로 미리 볼 수 있으며, IE에서 폴백 그라디언트가 어떻게 보일지 빠르게 미리 볼 수 있습니다.
마지막으로, 'CSS' 패널은 항상 현재 그라디언트에 대한 CSS를 가지고 있어, 스타일시트에 쉽게 복사하고 붙여넣을 수 있습니다. 이 패널을 사용하여 기존 그라디언트 CSS를 도구로 가져올 수도 있습니다.
'Ultimate Web 2.0 Gradients' 그라디언트 사전 설정은 deziner folio와 SGlider12의 작업에서 파생되었습니다.
색상 선택기는 John Dyer's Color Picker의 약간의 수정입니다.
Base-64 인코더 함수는 webtoolkit에서 가져왔습니다.
몇몇 아이콘은 Yusuke Kamiyamane에 의해 제작되었습니다.