텍스트 그라디언트 용 jQuery 플러그인

세로 그라디언트가있는 글꼴이 포함 된 텍스트가 있습니다. jQuery 플러그인을 제공 할 수 있습니까? 글꼴 패밀리, 크기 및 기타 특성이 유지되고 세로 그라디언트 만 추가해야합니다.텍스트 그라디언트 용 jQuery 플러그인

하나 (http://www.codefocus.ca/goodies/gradienttext)를 찾았지만 모든 글꼴을 덮어 씁니다.

출처

2012-05-02 Karine

당신은 id를 원하는 텍스트를주고 jquery 코드에서이 id를 사용해야합니다. 여기 데모 그것을 할 수 있습니다 : 당신은 그냥 선형 그라데이션을 할 CSS를 사용할 수

<html> 
<head> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.gradienttext-0.1.min.js"></script> 
<style> 
    p{ font-size: 30px; } 
</style> 

<script> 

    $(document).ready(function(){ 
     $('#test1').gradienttext({ 
      colors: ['#FFF', '#EB9300'], 
      style: 'vertical', 
      shadow:    true, 
      shadow_color:  '#000000', 
      shadow_offset_x: 1, 
      shadow_offset_x: 1, 
      shadow_blur:  1 
     }); 
    }); 

    $(document).ready(function(){ 
     $('#test2').gradienttext({ 
      colors: [ 
       '#FF0000', 
       '#FF6600', 
       '#CCFF00', 
       '#00FF00', 
       '#0066FF', 
       '#FF00FF' 
      ], 
      style: 'horizontal' 
     }); 
    }); 
</script> 
</head> 
<body> 
     <p id="test1">test 1</p> 
     <p id="test2">test 2</p> 

</body> 
</html>

출처

2012-05-02 23:44:52 Houx

는 I가 @ 글꼴 얼굴을 통해 추가 한 사용자 정의 폰트 타입을 보존합니까? – Karine

각 요소에 ID를 부여해야합니다. 원하는 셀렉터를 사용하십시오. – powerbuoy

Karine 물론 사용자 정의 글꼴 유형을 지원합니다. @powerbuoy 어떻게해야합니까? – Houx

-3

background-image: linear-gradient(bottom, #666666 23%, #908c8c 62%); 
background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.23, #666666), 
    color-stop(0.62, #908c8c) 
);

출처

2012-05-03 00:10:36 Kevin

하지만 텍스트의 _ 배경 _을 그라디언트로 만들지 만 텍스트 자체는 만들지 않습니다. – powerbuoy

사실, 순수한 CSS로 텍스트 그라디언트를 할 수 있습니다. 이 기술은 텍스트를 투명하고 그라디언트 한 PNG (CSS3의 linear-gradient도 사용할 수 있음)로 오버레이하는 작업을 포함합니다. http://webdesignerwall.com/tutorials/css-gradient-text-effect

대신 실제 마크 업에 필요한 span의 추가 당신은 JS (또는 jQuery를)로이 자동으로 할 수있는 :

여기에서 자세한 내용을보실 수 있습니다.

이 효과는 글꼴 (@ font-face linked 또는 기타)을 변경하지 않습니다.

출처

2012-05-03 00:16:27 powerbuoy

질감이 풍부한 배경을 가지고 있기 때문에 나에게 도움이되지 않습니다. – Karine

예,

간단히 다시 한 READY 기능에서, 당신은 왜 모두 코드를 작성하지 않는 첫째 글꼴

을 적용 할 CSS() 메소드를 호출 할 수 있습니다?

둘째, 용액 (:)이있다)

jQuery(document).ready(function($){ // yup, I like to use it this way - safe 

    var test1Opts = { 
      colors: ['#FFF', '#EB9300'], 
      style: 'vertical', 
      shadow:    true, 
      shadow_color:  '#000000', 
      shadow_offset_x: 1, 
      shadow_offset_x: 1, 
      shadow_blur:  1 
     }, 
     test2Opts = { 
      colors: [ 
       '#FF0000', 
       '#FF6600', 
       '#CCFF00', 
       '#00FF00', 
       '#0066FF', 
       '#FF00FF' 
      ], 
      style: 'horizontal' 
     } 

    $('#test1') 
     .gradienttext(test1Opts) 
     .css('font-family', 'YOUR CUSTOM FONT NAME') 
    // optionally you can call the following to apply font on all child items 
    // by uncommenting the 2 lines below 
    // .find('*') 
    // .css('font-family', 'YOUR CUSTOM FONT NAME'); 

    // you can also use the short "font" syntax, 
    // if you have a lot of options in your font-face 

    $('#test2') 
     .gradienttext(test2Opts) 
    // .css('font', 'style weight size/line-height YOUR CUSTOM FONT NAME') 
     .css('font', 'normal bold 11px/16px YOUR CUSTOM FONT NAME') 
     .find('*') 
     .css('font-family', 'YOUR CUSTOM FONT NAME'); 
});

출처

2012-05-03 19:20:11

텍스트 그라디언트 용 jQuery 플러그인

답변

관련 문제