suchen

Heim >Web-Frontend >CSS-Tutorial >Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)

Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)

易达
易达Original
2020-06-05 22:27:132824Durchsuche

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

Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)

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>

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

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

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

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

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

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>

Die laufenden Ergebnisse sind wie folgt:

Bisher Wir haben alle Anforderungen erfüllt Textschatten in CSS3 implementiert Textschatteneffekt (Codebeispiel)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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)Nächster Artikel：Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen