Beispiel für die gemeinsame Nutzung eines Textschatteneffekts mit HTML5 und CSS

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von HTML5 und CSS zum Erzielen von Textschatteneffekten vorgestellt. Ich hoffe, dass er allen helfen kann.

Vor zwei Tagen fragte mich ein hübsches Mädchen, das HTML5-Frontend lernte, wie man den Textschatteneffekt erzielen könne. Sie erzählte mir von Text-Shadow, aber sie konnte es nicht so aussehen lassen, wie sie es wollte. Tatsächlich sind die neuen Funktionen von CSS3 sehr leistungsfähig. Okay, Klatsch. Schauen wir uns zunächst diesen Textschatten an.

Textschatten

Textschatten Textschattenparameter: Parameter 1: Der erste Längenwert ist Wird verwendet, um das Objekt festzulegen. Der horizontale Versatzwert des Schattens. Kann ein negativer Wert sein. Parameter 2: Der zweite Längenwert wird verwendet, um den vertikalen Versatzwert des Objektschattens festzulegen. Kann ein negativer Wert sein. Parameter 3: Wenn der dritte Längenwert angegeben wird, wird er zum Festlegen des Schattenunschärfewerts des Objekts verwendet. Negativer Wertparameter 4 ist nicht zulässig: Legen Sie die Farbe des Objektschattens fest

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

2. Beispiel

Wie erzielen wir den Effekt des obigen Bildes?

HTML-Struktur, CSS-Stil, Schriftart, Schriftfarbe, Textschatten. Schauen wir uns dann den spezifischen Code an:

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

Jetzt wollen wir sehen, wie man den Effekt der kleinen Schönheit, die mich am Frontend fragt, erzielt.

Es ist eigentlich ganz einfach. Jetzt gehen wir direkt zum Code~

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

Spread your Tatsächlich ist der CSS3-Stil sehr interessant. Manchmal kann nur eine kleine Änderung einen sehr coolen Effekt erzielen um ein sich ständig änderndes Text-Schatten-Effekt-Design zu erzielen

Detaillierte Einführung in Ebenenschatten und Textschatteneffekte mit CSS3

CSS3-Tutorial (4) : Webseitenrand und Webseitentextshadow_css3_CSS_ Webseite

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung eines Textschatteneffekts mit HTML5 und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!