Html5とCSSを使用したテキストシャドウ効果の共有例

この記事では、HTML5 と CSS を使用してテキストの影の効果を実現するための関連情報を主に紹介します。必要な友人が参考になれば幸いです。

2 日前、HTML5 フロントエンドを学んでいるかわいい女の子が、テキストの影の効果を実現する方法について私に質問しました。彼女は text-shadow についても私に話してくれましたが、実際には、CSS3 の新機能は非常に強力なので、考えを制限しすぎないでください。さて、話はそれまでですが、まずこのテキスト シャドウを見てみましょう

テキスト シャドウ パラメータ: パラメータ 1: 最初の長さの値は、シャドウの水平オフセット値を設定するために使用されます。オブジェクト。負の値も可能です。 パラメータ 2: 2 番目の長さの値は、オブジェクトの影の垂直オフセット値を設定するために使用されます。負の値も可能です。 パラメータ 3: 3 番目の長さの値が指定されている場合、オブジェクトのシャドウ ブラー値を設定するために使用されます。負の値のパラメーター 4 は許可されません: オブジェクトの影の色を設定します

text-shadow: 10px 10px 50px #000;

II. 例

上の図の効果を実現するにはどうすればよいですか?

HTML 構造 CSS スタイル フォント スタイル フォントの色 テキスト シャドウ 次に、具体的なコードを見てみましょう:

HTML:

<p class="text">【千锤百炼】尚学堂</p>

CSS:

.text{
    font: bold 100px/1.5 '微软雅黑';
    color: dodgerblue;
/*文本阴影*/
    text-shadow: 10px 10px 50px #000;
    /*text-shadow: 10px 10px 50px #000,-10px -10px 50px #f00;*/
}

次に、フロントエンドの小さな美しさがもたらす効果を見てみましょう。やり方を聞かれました...

実際はとても簡単です、コードに直接行きましょう~

HTML:

<p class="text">【千锤百炼】尚学堂</p>

CSS:

body {
    background: #000;
    color: #fff;
}
.text{
    font: bold 100px/1.5 georgia, sans-serif;
/*不同颜色的,多个不同值的模糊大小*/
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}

実際、CSS3スタイルは非常に興味深いものです。場合によっては、ほんの少し変更するだけで非常に素晴らしい効果が得られることがあります^. ^

関連する推奨事項:

CSS3 を使用して、常に変化するテキスト シャドウ テキスト シャドウ エフェクトのデザインを実現する

レイヤー シャドウとテキスト シャドウ エフェクトの詳細な紹介CSS3 の使用

CSS3 チュートリアル (4): Web ページの境界線と Web テキストshadow_css3_CSS_webpage

以上がHtml5とCSSを使用したテキストシャドウ効果の共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。