Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)-CSS-Tutorial-php.cn

Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)

易达

Freigeben： 2020-06-06 11:58:57

Original

2766 Leute haben es durchsucht

Ziele dieses Artikels:

1. Beherrschen Sie die Verwendung von Textschatten

Frage:

Verwenden Sie reines Div+CSS, um die folgenden Effekte zu erzielen

Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)

Zusätzliche Hinweise:

1. Es gibt insgesamt 4 Wörter: Believe Yourself You Can

2. Die Textgröße beträgt 86 Pixel

3. Der Abstand zwischen dem rechten Text und dem linken Text beträgt 20px

4. Die Bildgröße und -breite beträgt: 100px

5 Der Schatten beträgt 15 Pixel, der vertikale Übersetzungsbetrag beträgt 2 und die Unschärfe beträgt 20 und die Farbe ist #333333

Die spezifischen Vorgänge sind wie folgt:

1 Bereiten Sie die Materialien vor , erstellen Sie ein neues Bildverzeichnis und speichern Sie die Bilddateien in diesem Verzeichnis zur einfachen Verwaltung. Die Materialien sind

2 . Index.html erstellen, Architektur analysieren

Ideenanalyse:

Der obere Teil zeigt 2 Englische Wörter, eines ist „Belive“ und das andere ist „Yourself“, aber der Text hat einen Schatteneffekt

2. Der untere Teil der Architektur zeigt auch 2 englische Wörter + ein Bild ist Can. Der Text benötigt auch einen Schatteneffekt

Laut der Analyse erhalten wir den folgenden Code

<!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/Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)" / alt="Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)" >
    </div>
</div>
</body>
</html>

Nach dem Login kopieren

3. Schreiben Sie den Stil, erstellen Sie ein CSS-Verzeichnis und erstellen Sie ein Neue Datei index.css darin. Die Ideenanalyse in CSS lautet wie folgt:

1. Ideenanalyse

1. Um die gemeinsamen Stile aller Elemente im Container festzulegen, können wir diese gemeinsamen Codes in den .container *-Stil schreiben

Fügen Sie also den folgenden Code zu index.css hinzu:

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

Nach dem Login kopieren

2. .word-Text

Ideenanalyse:

1. Je nach Anforderung beträgt die Textgröße 86px und hat einen Schatteneffekt Transfer Der Code ist text-shadow: 15px 2px 20px #333333;

Fügen Sie den Code also wie folgt zu index.css hinzu

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

Nach dem Login kopieren

3. Der Text rechts von rword

Ideenanalyse:

1. Gemäß den Anforderungen beträgt der Abstand zwischen dem rechten Text und dem linken Text 20 Pixel, also margin-left:20px;

Fügen Sie also den Code zum Index hinzu .css wie folgt

.rword{
     margin-left:20px;
}

Nach dem Login kopieren

4. Bildeinstellung

Ideenanalyse:

1. Je nach Anforderung Breite = 100 Pixel und dann der Abstand dazwischen und der Text auf der linken Seite ist 10 Pixel

Fügen Sie also index.css hinzu. Der Code lautet wie folgt

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

Nach dem Login kopieren

Bisher lautet der gesamte Inhalt von index.css wie folgt:

.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;
}

Nach dem Login kopieren

Führen Sie als nächstes index.css in index.html ein

<!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/Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)" / alt="Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)" >
    </div>
</div>
</body>
</html>

Nach dem Login kopieren

Die laufenden Ergebnisse sind wie folgt:

Bisher Wir haben alle Anforderungen erfüllt Zusammenfassung:

1. Die Verwendung von Textschatten wird erklärt: Textschatten: horizontaler Versatz, vertikale Versatzfarbe

Der Versatz kann positiv oder negativ sein, positiv bedeutet horizontal nach links oder vertikal nach unten.

Ich hoffe, dieser Artikel kann Ihnen helfen, danke! ! !

Das obige ist der detaillierte Inhalt vonTextschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!