Latest web development tutorials

CSS3 Efekty tekstowe

CSS3 Efekty tekstowe

CSS3 tekst zawiera kilka nowych funkcji.

W tym rozdziale dowiesz się przypisuje się następujący tekst:

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

Pomoc Browser

属性
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

Cień tekstu CSS3

W CSS3, własność text-shadow dotyczy tekstu cienie.

cień efekt tekstu!

Określić cień poziomy, pionowy cień, kolor, rozmycie i cienie na odległość:

OperaSafariChromeFirefoxInternet Explorer

Przykłady

Dodaj cień do tytułu:

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

Spróbuj »

CSS3 własność box-shadow

W CSS3 CSS3 własność box-shadow dotyczy cień okno

Przykłady

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

Spróbuj »

Następnie dodać kolor do cienia

Przykłady

div {
box-shadow: 10px 10px szarości;
}

Spróbuj »

Następnie dodać cień do efektu rozmycia

Przykłady

div {
box-shadow: 10px 10px 5px szarości;
}

Spróbuj »

Można również dodać efekt cienia w dwóch :: :: befor i po pseudoelementów

Przykłady

# Boxshadow {
position: relative;
b ox-shadow: 1px 2px 4px rgba (0, 0, 0, 0,5);
pa dding: 10px;
bac kground: biały;
}
#boxshadow img {
width: 100%;
border: 1px solid # 8a4419;
border-style: wstawka;
}
#b oxshadow :: po {
treść: '';
position: absolute;
z-index: -1 / * ukryj cień tyłu obrazu * /
box-shadow: 0 15px 20px rgba (0, 0, 0, 0,3);
width: 70%;
Po lewej: 15% / * połowę pozostałych 30% * /
height: 100px;
bottom: 0;
}

Spróbuj »

Szczególnym przypadkiem jest zastosowanie kart efekt cienia

Przykłady

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

Tekst Karty >> Picture Card >>

CSS3 własność przelewowy Tekst

CSS3 atrybutu tekstu przepełnienie określa sposób użytkownicy powinni wyświetlać zawartość przelewowy

Przykłady

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

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

Spróbuj »

CSS3 nowalinia

Jeśli słowo jest zbyt długa, by zmieścić się w obszarze, który rozciąga się na zewnątrz:

CSS3, właściwość pozwala Zawijanie tekstu obowiązkowe - nawet jeśli oznacza to dzielenie go w środku słowa:

CSS jest następująca:

OperaSafariChromeFirefoxInternet Explorer

Przykłady

Umożliwia szybką zawijanie tekstu:

p {word-wrap:break-word;}

Spróbuj »

CSS3 Słowo Rozstania

CSS3 Słowo niszczące przypisują określić reguły linia łamania:

CSS jest następująca:

Przykłady

p.test1 {
word-break: keep-all;
}

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

Spróbuj »

Nowe atrybuty tekstu

nieruchomość opis CSS
podwieszane interpunkcyjny Przepisy znak interpunkcyjny znajduje się poza kadrem. 3
interpunkcyjny-trim Niezależnie od postanowień przycinania znaków interpunkcyjnych. 3
text-align przedostatniej Ustawienie jak wyrównać ostatni wiersz lub bezpośrednio przed linią wymusić podział wiersza. 3
Nacisk tekstu Kluczowe elementy wniosku do znacznika tekstu i klucz tag planie. 3
text-uzasadnić Gdy ustalony sposób ułożenia, gdy tekst Wyrównanie jest ustawiony na "uzasadnić" użytkowania. 3
Zarys tekstu Szczegółowy konturu tekstu. 3
text-overflow Przepisy gdy coś się dzieje, gdy tekst przelewa element zawierający. 3
text-shadow Dodać cień do tekstu. 3
text-wrap Przepisy tekstu regułą zawijania. 3
word-break CJK tekst postanowieniami zasad non-line-łamanie. 3
word-wrap Pozwala to na długo, podzielone i niepodzielne zawijany do następnego wiersza. 3