Latest web development tutorials

CSS3 Text Effects

CSS3 Text Effects

CSS3 Text enthält einige neue Features.

In diesem Kapitel lernen Sie die folgenden Textattribute:

  • text-shadow
  • box-shadow
  • Text-Überlauf
  • word-wrap
  • Wort-Pause

Browser-Unterstützung

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

Der Text Schatten CSS3

In CSS3 gilt text-shadow Eigenschaft Schatten in Text.

Textschatten-Effekt!

Sie geben den horizontalen Schatten, die vertikale Schatten, Farbe, Entfernung Blur und Schatten:

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Fügen Sie einen Schatten auf den Titel:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Versuchen »

CSS3 box-shadow Eigenschaft

In CSS3 gilt CSS3 box-shadow Eigenschaft Feld Schatten

Beispiele

div {
box-shadow: 10px 10px;
}

Versuchen »

Als nächstes bringen Farbe in den Schatten

Beispiele

div {
box-shadow: 10px 10px grau;
}

Versuchen »

Als nächstes einen Schatten auf eine Unschärfe-Effekt hinzufügen

Beispiele

div {
box-shadow: 10px 10px 5px grau;
}

Versuchen »

Sie können auch einen Schatteneffekt in zwei :: vor dem und :: after Pseudo-Elemente hinzufügen

Beispiele

# Boxshadow {
position: relative;
b ox-Schatten: 1px 2px 4px rgba (0, 0, 0, 0,5);
pa dding: 10px;
bac kground: white;
}
#boxshadow img {
Breite: 100%;
border: 1px solid # 8a4419;
border-style: Einsatz;
}
#B oxshadow :: after {
Inhalt: '';
position: absolute;
z-index: -1; / * verstecken Schatten hinter Bild * /
box-shadow: 0 15px 20px rgba (0, 0, 0, 0,3);
Breite: 70%;
links: 15% / * eine Hälfte der verbleibenden 30% * /
Höhe: 100px;
bottom: 0;
}

Versuchen »

Ein Sonderfall ist die Verwendung von Schattenkarteneffekt

Beispiele

div.card {
Breite: 250px;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
text-align: center;
}
}

Text Karten >> Picture Card >>

CSS3 Text-Überlauf-Eigenschaft

CSS3 Text Überlauf-Attribut gibt an, wie Benutzer sollten Überlauf Inhalt anzeigen

Beispiele

p.test1 {
white-space: nowrap;
Breite: 200px;
border: 1px solid # 000000;
overflow: hidden;
text-overflow: Clip;
}

p.test2 {
white-space: nowrap;
Breite: 200px;
border: 1px solid # 000000;
overflow: hidden;
text-overflow: Auslassungszeichen;
}

Versuchen »

CSS3 newline

Wenn ein Wort zu lang ist, um einen Bereich zu passen, die nach außen erstreckt:

CSS3 ermöglicht die Eigenschaft, die Sie Textumbruch zwingend zu wickeln - auch wenn es bedeutet, dass es Spaltung in der Mitte eines Wortes:

CSS-Code ist wie folgt:

OperaSafariChromeFirefoxInternet Explorer

Beispiele

Ermöglicht lange Textumbruch:

p {word-wrap:break-word;}

Versuchen »

CSS3 Wort brechend

CSS3 Wort brechen Attribut Zeilenumbruch Regeln angeben:

CSS-Code ist wie folgt:

Beispiele

p.test1 {
Wort-Pause: keep-all;
}

p.test2 {
Wort-break: break-all;
}

Versuchen »

Die neuen Textattribute

Immobilien Beschreibung CSS
Hänge-Interpunktion Rückstellungen Satzzeichen außerhalb des Rahmens. 3
Interpunktion-Trimm Ob die Bestimmungen des Interpunktionszeichen Beschneidung. 3
text-align-last Festlegen, wie die letzte Zeile auszurichten oder unmittelbar vor der Zeile einen Zeilenumbruch zu erzwingen. 3
text-Schwerpunkt Wesentliche Elemente der Anwendung zu einem Tag und Schlüsselanhänger Vordergrund. 3
text rechtfertigen Wenn eine vorbestimmte Ausrichtung Methode, wenn text-align wird auf "rechtfertigen" Verwendung. 3
Text-outline Spezifikation der Kontur des Textes. 3
Text-Überlauf Rückstellungen, wenn Dinge passieren, wenn Text enthaltenden Element überläuft. 3
text-shadow Fügen Sie einen Schatten auf den Text. 3
Text-wrap Die Bestimmungen der Regel Wrap Text. 3
Wort-Pause CJK Wortlaut der Bestimmungen der non-line-Regeln zu brechen. 3
word-wrap Es ermöglicht lange geteilt und unteilbar Wort in die nächste Zeile umgebrochen. 3