Efekty tekstu w CSS3

Plansza interaktywna lipiec 2021

URL:
http://www.plotkarka.eu/PI/css-text-decor-3/
Autor:
Radosław Kowaluk

Wyróżnienie tekstu

Podkreślenie, przekreślenie, nadkreślenie, migotanieCSS3
text-decoration-line:
none; underline;||overline;||line-through;||blink;
none; underline; overline; line-through; blink;
text-decoration-line: underline overline line-through blink;
Styl wyróżnienia tekstu CSS3
text-decoration-style:
solid; double; dotted; dashed; wavy;
solid; double; dotted; dashed; wavy;
Kolor wyróżnienia tekstu CSS3
text-decoration-color:
color
np. text-decoration-color: silver;
Wyróżnienie tekstu CSS3
text-decoration:
text-decoration-line:||text-decoration-color:||text-decoration-style:
np. overline red; np. overline wavy;
np. text-decoration: overline red wavy;

Uwaga: Styl text-decoration:CSS 2.1 = text-decoration-line: CSS3

Wyróżnienie tekstu

Właściwości cienia tekstu

Cień tekstu CSS3
text-shadow:
none; [ length {2,3} && color? ]#
none; 3px 3px; 3px 3px silver;
3px 3px 1px; 3px 3px 1px silver;
3px 3px 2px, silver -3px -3px 1px;
Właściwości cienia położenie
silver x y -5px 0px 5px
-5px -5px -5px; 0px -5px; 5px -5px;
0px -5px 0px; 0px 0px; 5px 0px;
5px -5px 5px; 0px 5px; 5px 5px;
Rozmycie cienia
np. text-shadow: silver 3px 3px length= ;
0px; 1px; 2px;
0px 1px 2px

Efekty

Pomijanie podkreślenia CSS3
text-decoration-skip:
none ; objects; spaces;
Lorem ipsum Lorem ipsum Lorem ipsum
ink; edges; box-decoration;
Lorem ipsum Lorem ipsum Lorem ipsum
Pozycja podkreślenia CSS3
text-underline-position:
auto; under; left; right;
Lorem Lorem Lorem Lorem

Dodatek (źródło W3C - przykład 9 - fragment)

Wyróżnienie znaczników

Styl wyróżnienia znaczników CSS3
text-emphasis-style:
none; dot; circle; double-circle; triangle; sesame; string
np. 'x';
none filled dot circle double-circle triangle sesame
open dot circle double-circle triangle sesame string
Kolor znaczników CSS3
text-emphasis-color:
color np. silver;
np. silver ;
Wyróżnienie znaczników CSS3
text-emphasis:
text-emphasis-style || text-emphasis-color
np. triangle silver;
Pozycja znaczników CSS3
text-emphasis-position:
over; under;
right over right; under right;
left over left; under left;

Akcent