CSS 그라데이션 텍스트 효과에 대한 두 가지 방법 비교_경험 교환

Photoshop을 사용하지 않고 그라데이션 제목 텍스트를 만들고 싶으십니까? 다음은 CSS와 png 이미지만 사용하여 이 효과를 만드는 방법을 보여주는 간단한 CSS 기술입니다. 이 방법은 대부분의 주류에 적합한 것으로 테스트되었습니다. 물론 IE6에는 투명한 PNG를 지원하는 Hack이 필요합니다. (다행히도 Microsoft는 사용자의 IE6을 IE7^.^로 자동 업그레이드하기 위해 열심히 노력하고 있습니다. 추가 정보: 경고: IE7 자동 업데이트가 곧 출시됩니다.)

장점

이것은 ja 스크립트나 플래시를 사용하지 않는 순수한 CSS 트릭이며 대부분의 브라우저에서 정상적으로 작동할 수 있습니다(IE6에는 투명 PNG를 지원하는 핵이 필요합니다)
이것은 완벽한 제목입니다 디자인을 하려면 포토샵을 사용할 필요가 없으므로 대역폭과 시간이 많이 절약됩니다.
이 효과는 모든 웹 글꼴에 사용할 수 있으며 글꼴 크기도 가변적입니다.
그는 어떻게 합니까?

요령은 매우 간단합니다.



html


CSS 그라데이션 텍스트

CSS

핵심은 여기에 있습니다:

h1 { 위치: 상대 }
h1 범위 { 위치: 절대 } h1 {
글꼴 : 굵은 글씨 330%/100% "루시다 그란데";
위치: 상대
색상: #464646;
}
h1 범위 {
배경: url(gradient.png) 반복- x;
위치: 절대;
너비: 100%;
}

그렇습니다 ^_^ 예시를 보려면 여기를 클릭하세요.

IE6을 지원하도록 활성화하세요.

다음 해킹은 IE6이 투명한 PNG-24 형식 이미지를 지원하도록 활성화하는 것입니다.



필터:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale')
}



jQuery 생성 버전
코드에 빈
태그를 포함하지 않으려면 다음을 사용할 수 있습니다. javascript를 사용하여 동적으로 생성하는 방법은 다음과 같습니다.


<script></script>DEMO 패키지 다운로드<script> <BR>$(document).ready(function(){ <BR> //prepend span tag to H1 <BR> $("h1").prepend("<span></script>"); 
});