2

ボックスシャドウとテキストシャドウのある日から調査中です。次のような効果を得ようとしています。<a>かつてホバリングしたテキストから輝きを出してほしい。シンプルです。text-shadowを使用して調べたので、これは簡単なはずです。わかりました、しかしそれは小さなグローで動作します、つまり、グローが大きくなると、その高いブラーのためにグローを見ることができなくなります。これには解決策が必要です。画像は100語以上を説明します。

これが私が得たいものです：

リンク：

ここに画像の説明を入力してください

ホバー：

ここに画像の説明を入力してください

これは私が使用したコードです

#projectBox a:LINK{
    background-image: url('../_img/showcase/projectTabs/link.png');
}

#projectBox a:HOVER{
    background-image: url('../_img/showcase/projectTabs/link.png');
    color:#fa0000;
    text-shadow: 0 0 80px white;
}

ホバーに背景画像を再度使用できることはわかっていますが、これは避けたいと思います。問題は、ぼかしを追加すると、ぼやけすぎて表示されなくなることです。他の2つのプロパティは、グローを中央から開始したいので、あまり役に立ちません。

これを一緒に解決して、CSSで広くて高いグロー効果をどのように実現できるかを見てみましょう。

4

3 に答える 3

3

複数のテキスト シャドウを追加できます。

text-shadow: 
-3px 0px 10px #FFF,
3px 0px 10px #FFF,
0px 0px 10px #FFF,
-3px -3px 10px #FFF,
3px -3px 10px #FFF,
0px -3px 10px #FFF,
-3px 3px 10px #FFF,
3px 3px 10px #FFF,
0px 3px 10px #FFF;

テキストを囲む 9 つの個別の影があるため、これにより、より広く、より完全な輝きが得られます。値を調整して、探している強度を取得します。

（値はランダムな推測です-私は私の電話にいるのでテストされていません）:)

http://jsfiddle.net/pzMmC/ -

于 2012-10-01T12:36:34.493 に答える
2

同心円状の影を重ねて効果を倍増させることができます。

a:hover {
    text-shadow: 0 0 80px white,
                 0 0 70px white,
                 0 0 60px white,
                 0 0 50px white,
                 0 0 40px white,
                 0 0 30px white;
}

テストを作成しました: http://jsfiddle.net/simbirsk/DnHKk/

于 2012-10-01T12:43:27.330 に答える
1

CSS3 のグラデーションを使用しないのはなぜですか?

このフィドルを見てください。

ここまたはここで独自のグラデーションを生成できます。

于 2012-10-01T12:42:40.290 に答える