検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)

CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)

易达
易达オリジナル
2020-06-05 22:27:132786ブラウズ

この記事の目標:

1. text-shadow の使い方をマスターする

質問:

純粋な div CSS を使用して、次の効果を実現します

CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)

補足:

1. 文字は全部で 4 文字あります: Belive Yourself You Can

2. テキスト サイズは 86px

3. 右側のテキストと左側のテキストの間隔は 20px

4 です。画像のサイズと幅は 100px

5 です。水平方向の翻訳影のサイズは 15px、垂直方向の移動は 2、ぼかしは 20、色は #333333

です。具体的な操作は次のとおりです。マテリアルを保存するには、新しい画像ディレクトリを作成し、管理しやすいようにこのディレクトリに画像ファイルを保存します。マテリアルは

CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例) です。 2.index.htmlの作成、アーキテクチャの記述、アーキテクチャの分析方法

思考分析:

1. 構造は上部と下部に分かれており、上部には表示が表示されます。 2 つの英単語、1 つは Belive、もう 1 つは Yourself ですが、テキストにはシャドウ効果があります

2. 構造の下部も表示されます 2 つの英単語と絵、1 つの英単語は You ともう 1 つは Can で、テキストには影効果も必要です

分析によると、次のコードが得られました

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>text-shadow实现文字阴影</title>

</head> 
<body>
<div class="container">
    <div class="top">
        <strong class="word">Belive</strong>
        <strong class="word rword">Yourself</strong>
    </div>
    <div class="bottom">
        <strong class="word">You</strong>
        <strong class="word rword">Can</strong>
        <img  src="images/CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)" / alt="CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)" >
    </div>
</div>
</body>
</html>

3. 書き方 、css ディレクトリを作成します、 CSS でのアイデア分析は次のとおりです。

アイデア分析:

1..container *

アイデア分析

1. コンテナ内のすべての要素の共通スタイルを設定するには、これらの共通コードを .container * style

に書き込むことができます。そこで、次のコードをindex.cssに追加します。 

.container *{
    padding:0;
    margin:0;
}

2. .word text

アイデア分析:

1. 要件によると、テキスト サイズは 86px で、シャドウ効果があります。必要なシャドウに従ってtext-shadow の場合: 15px 2px 20px #333333;

なので、index.css に次のようにコードを追加します

.word{
    font-size: 86px;
    text-shadow: 15px 2px 20px #333333;
}

3. の右側のテキストrword

アイデア分析:

1. 要件によれば、右のテキストと左のテキストの間の距離は 20px であるため、margin-left:20px;

So次のようにコードをindex.cssに追加します

.rword{
     margin-left:20px;
}

4.画像設定

アイデア分析:

1.要件に従って、width=100px、およびその場合、左側のテキストとの間の距離は 10px

したがって、次のようにコードをindex.css に追加します。 

.bottom img{
    margin-left:10px;
    width:100px;
}

これまでのところ、index.css の全体の内容は次のとおりです。 

.container *{
    padding:0;
    margin:0;
}

.word{
    font-size: 86px;
    text-shadow: 15px 2px 20px #333333;
}

.rword{
    margin-left:20px;
}
.bottom img{
    margin-left:10px;
    width:100px;
}

次に、index.html にindex.css を導入します。

#

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>text-shadow实现文字阴影</title>
<link rel="stylesheet" href="css/index.css" />
</head> 
<body>
<div class="container">
    <div class="top">
        <strong class="word">Belive</strong>
        <strong class="word rword">Yourself</strong>
    </div>
    <div class="bottom">
        <strong class="word">You</strong>
        <strong class="word rword">Can</strong>
        <img  src="images/CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)" / alt="CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)" >
    </div>
</div>
</body>
</html>

実行結果は次のとおりです。

CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)これまでのところ、すべての要件を達成しました

概要:

1. テキストの学習 -shadow の使用法、主な形式は次のとおりです: text-shadow: 水平オフセット垂直オフセットぼかし色

オフセットは正または負の値で、正は水平方向に左または垂直下を意味し、負の数値はその逆を意味します。

この記事が皆さんのお役に立てれば幸いです。ありがとうございます。 ！ ！

以上がCSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）次の記事：CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）

関連記事

続きを見る