1

垂直方向のグラデーションが必要なフォントが埋め込まれたテキストがあります。そのための jQuery プラグインを提供できますか? フォント ファミリ、サイズ、およびその他の属性を保持し、垂直方向のグラデーションのみを追加する必要があります。

私は 1 つ ( http://www.codefocus.ca/goodies/gradienttext ) を見つけましたが、すべてのフォントを上書きします。

4

4 に答える 4

3

はい、できます

css() メソッドを呼び出すだけで、フォントを再度適用できます

まず、1 つの READY 関数に両方のコードを記述しないのはなぜですか?

第二に、解決策（かもしれません:)）

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-03T19:20:11.917 に答える
0

必要なテキストに ID を指定し、この ID を jquery コードで使用するだけです。ここでそれを行うデモ：

<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-02T23:44:52.157 に答える
0

実際、純粋な CSS を使用してテキストのグラデーションを作成できます。この手法では、テキストを透明なグラデーション PNG でオーバーレイします (CSS3 も使用できますlinear-gradient)。

ここで詳細を読むことができます: http://webdesignerwall.com/tutorials/css-gradient-text-effect

span実際のマークアップに必要なを追加する代わりに、 JS (または jQuery) を使用して自動的に行うことができます。

この効果は、フォント (@font-face リンクまたはその他) をまったく変更しません。

于 2012-05-03T00:16:27.457 に答える
-2

cssを使用して線形グラデーションを実行できます。 

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-03T00:10:36.813 に答える