CSS3 の Text-shadow はテキストシャドウ効果を実装します (コード例)-CSSチュートリアル-php.cn

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

易达

リリース： 2020-06-06 11:58:57

オリジナル

2825 人が閲覧しました

この記事の目標:

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

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

です。 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>

ログイン後にコピー

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

これまでのところ、すべての要件を達成しました