HTML의 그라디언트 텍스트 효과

Question

html로 이미지를 사용하지 않고 텍스트에 그라데이션 채우기 효과를 표시하는 방법.

Answer 1

텍스트 자체에 그래디언트를 적용하려면 http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/에서 CSS3을 사용하는 것이 좋습니다. 또 다른 대안은 Javascript를 사용하는 것입니다. 실제로 그것에 대해 많이 알지 못하기 때문에 자세히 설명 할 수는 없습니다. MooTools 나 jQuery와 같은 많은 Javascript 프레임 워크에는이 기능이 있습니다. 그렇지 않으면 jQuery 용 플러그인을 찾을 수있을 것이라고 확신합니다.

당신이 텍스트 배경에 그라데이션을 원한다면, 그 사용 CSS3 수 :

/* 
Format: background: gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*); 
Use -mozilla-gradient or -webkit-gradient as these are the only browsers that support it (that I know of). 
For example, an aqua coloured gradient in a Webkit browser: 
*/ 

.text { 
-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9))); 

} 

Internet Explorer가 CSS3를 지원하지 않으며, 그들이 어디 가까운 장래에, 그리고 고려됩니다 가능성이 높습니다 인터넷 사용자의 대다수는 IE를 사용하고 있습니다. 이것은 좋은 해결책이 아닙니다.

자바 스크립트가 사용 가능하지만 많은 사람들이 자바 스크립트를 실행할 수있는 보안 위험 요소와 이전 버전의 나쁜 평판 때문에 자바 스크립트를 사용하지 않도록 설정했습니다.

따라서 이미지는 브라우저 간 호환성을 보장 할 수있는 유일한 방법입니다. 안 그래?

Answer 2

일반 이미지 (png, gif & jpg)의 대안은 W3C 권장 SVG (Scalable Vector Graphics) 형식을 사용하는 것입니다. IE6-8 용 Adobe SVG Viewer 플러그인을 구할 수 있지만 현재 Firefox 3 이상 및 Opera 9 이상에서만 기본적으로 지원됩니다.

무료 벡터 그래픽 편집기를 위해 널리 wikipedia.org에 의해 사용되는 Inkscape

SVG 형식을 살펴. Wikipedia SVG logo