2

こんにちは、あなたが見ている画像を純粋な css フォント + スタイルに複製する方法についてアドバイスをくれる人はいますか?

ここに画像の説明を入力

私はこれを試しました：JSFIDDLE css

 *{
        font-family: 'Asap', sans-serif;
        font-size:130px;
        color:#444;
        font-weight:bold;
        letter-spacing:-3px;
    }
    body{
        background:url('http://img.ly/system/uploads/007/221/887/large_antani.png') no-repeat left 190px ;
    }
    img{
        width:auto;
        height:auto;
    }
    a{

        text-shadow:
           3px 3px 0 #fff,
         -1px -1px 0 #fff,  
          1px -1px 0 #fff,
          -1px 1px 0 #fff,
           1px 1px 0 #fff,
            0px 2px 2px #ccc, 0px 4px 4px #ccc,0px 6px 6px #ccc;
    }

html

<a>asd</a>

任意の提案が適用されます。

また、これを複製することが不可能だと思われる場合は、教えてください。不可能な場合は時間を無駄にしているため、 pure の代わりに image を使用しますcss。注意: テキストのグラデーション カラーについては、CSS が使用できないことがわかっているので、次のようなものを使用する予定です: https://github.com/mrnix/pxgradient

しかし、私にとって大きな問題は、テキストの影が画像のように表示されることです ありがとう!

4

4 に答える 4

3

テキストシャドウを次のように変更しました：

text-shadow: 0 0 0 20px white, 4px 4px 4px 20px #ccc;

テキスト シャドウ スプレッドをサポートするブラウザー (私の知る限り IE10 のみ) でのみ機能しますが、画像の効果により近いものです。

残念ながら、テキストの色に明るい青から少し濃い青へのグラデーションを作成することはできないため、最適な無地の色を選択する必要があります。

もちろん、クロスブラウザー互換のソリューションとしては、画像が最適です。

于 2013-04-22T21:26:17.957 に答える
2

個人的には、この場合は画像を選択する必要があると思います。確かに、このような単純な png の場合、努力する価値はありません。最高のクロスブラウザー サポートが得られます。また、ロゴに関しては、ブラウザ間の完全な互換性が必要だと思います。それはあなたのブランドを定義するものであり、人々があなたを認識する方法であるため、バリエーションは許されるべきではありません.

ロゴを「コーディング」することを主張する場合は、可能な限り最も近い svg を使用する必要があると思います。Illustrator でロゴを複製し (まだロゴがない場合)、そこから svg として保存します。それをWebページに統合するのは簡単なはずです...

于 2013-04-22T21:42:31.680 に答える
1

これがそのイメージに最も近いレプリカです。

-webkit-background-clip: transparent;テキストにグラデーション効果を適用する際に影も切り抜くため、アンカーの複製が必要です。はい、これはクロスブラウザと互換性がありません。

HTML:

<div class="replica">
    <a class="link">asd</a>
    <a class="shadow">asd</a>
</div>

CSS:

.replica {
    position: relative;
}
a {
    font-style:italic;
    background: -webkit-gradient(linear, left top, left bottom, from(#99FFFF), to(#0DC4F3));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
a.link {
    position: absolute;
    left:0;
    top:-2px;
    background: -webkit-gradient(linear, left top, left bottom, from(#99FFFF), to(#0DC4F3));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
a.shadow {
    text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0px 2px 2px #ccc, 0px 4px 4px #ccc, 0px 6px 6px #ccc;
}
于 2013-04-22T22:00:59.717 に答える
1

気が狂ってすべてを遅くしたい場合は、jquery を使用してあらゆる角度のテキスト シャドウを作成できます。

このフィドルに従って試してみてください

特定の角度ごとに影を作成するためにいくつかのjqueryを実行しました...ITは遅いです。より多くの要素を使用するとさらに悪いと確信しています...しかし、そこにあります。

function stroke(thisEle) {
    var spread = 10; // how far you want the stroke to be
    var shadows = []; //Start an array for every textshadow
    for(var i = 0; i <= 361; i++){ //For every angle
        var angle = i;
        var pointX = spread*(Math.sin(angle)); //find the direction 
        var pointY = spread*(Math.cos(angle)); //of the text shadow
        if(i == 361){ //Give one last text shadow that is black underneath
            var shadow = '20px 20px 20px black'; 
        } else {
            var shadow = pointX + 'px ' + pointY + 'px 0 white';
        }
        shadows.push(shadow); //Add this shadow to the array
    }

    thisEle.css({
        textShadow: shadows //show all shadows (SLOW)
    });
}

$('a').each(function(){ //for each - do everything above
    var thisEle = $(this);
    stroke(thisEle);  
});

次に、グラデーションを行うには、次のチュートリアルに従ってください: http://css-tricks.com/snippets/css/gradient-text/ (CSS3 と WEBKIT のみに注意)

それ以外の場合は、次のようなものを試してください: http://webdesignerwall.com/tutorials/css-gradient-text-effect

于 2013-04-22T22:52:34.757 に答える