HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Samouczek CSS

Strona główna CSS Wprowadzenie do CSS Składnia CSS Selektory CSS Instrukcje CSS Komentarze CSS Kolory CSS
Zabarwienie RGB KLĄTWA HSL
Tła CSS
Kolor tła Zdjęcie w tle powtarzanie tła Załącznik w tle Skrót tła
Granice CSS
Granice Szerokość granicy Kolor ramki Boki obramowania Skrót graniczny Zaokrąglone granice
Marginesy CSS
Marże Margin Collapse
Dopełnienie CSS Wysokość/szerokość CSS Model skrzynki CSS Zarys CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Tekst CSS
Kolor tekstu Wyrównanie tekstu Dekoracja tekstu Transformacja tekstu Odstępy w tekście Cień tekstu
Czcionki CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ikony CSS Linki CSS Listy CSS Tabele CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Wyświetlanie CSS Maks. szerokość CSS Pozycja CSS CSS Z-indeks Przepełnienie CSS zmiennoprzecinkowy CSS
Float Clear Float Examples
Wbudowany blok CSS Wyrównanie CSS Kombinatory CSS CSS Pseudo-klasa Pseudoelement CSS Krycie CSS Pasek nawigacyjny CSS
Navbar Vertical Navbar Horizontal Navbar
Listy rozwijane CSS Galeria obrazów CSS Sprite obrazu CSS Selektory atrybutów CSS Formularze CSS Liczniki CSS Układ strony internetowej CSS Jednostki CSS Specyfika CSS CSS !ważne Funkcje matematyczne CSS

Zaawansowane CSS

Zaokrąglone rogi CSS Obrazy obramowania CSS Tła CSS Kolory CSS Słowa kluczowe w kolorze CSS Gradienty CSS
Linear Gradients Radial Gradients Conic Gradients
Cienie CSS
Shadow Effects Box Shadow
Efekty tekstowe CSS Czcionki internetowe CSS Przekształcenia CSS 2D Przekształcenia CSS 3D Przejścia CSS Animacje CSS Etykietki CSS Obrazy w stylu CSS Odbicie obrazu CSS Dopasowanie obiektu CSS Pozycja obiektu CSS Maskowanie CSS Przyciski CSS Paginacja CSS Wiele kolumn CSS Interfejs użytkownika CSS Zmienne CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Rozmiar pola CSS Zapytania o media CSS Przykłady CSS MQ Flexbox CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsywne

Wprowadzenie do RWD Okienko RWD Widok siatki RWD Zapytania dotyczące mediów RWD Obrazy RWD Filmy RWD Ramy RWD Szablony RWD

Siatka CSS

Wprowadzenie do siatki Pojemnik na siatkę Element siatki

CSS SASS

Samouczek SASS

Przykłady CSS

Szablony CSS Przykłady CSS quiz css Ćwiczenia CSS Certyfikat CSS

Odniesienia CSS

Dokumentacja CSS Selektory CSS Funkcje CSS Dźwięk referencyjny CSS Bezpieczne czcionki internetowe CSS Animowalny CSS Jednostki CSS Konwerter CSS PX-EM Kolory CSS Wartości kolorów CSS Domyślne wartości CSS Obsługa przeglądarki CSS

Cień tekstu CSS

❮ Poprzedni Następny ❯

Cień tekstu

Właściwość text-shadowdodaje cień do tekstu.

W najprostszym użyciu określasz tylko cień poziomy (2px) i cień pionowy (2px):

Efekt cienia tekstu!

Przykład

h1 {
  text-shadow: 2px 2px;
}

Następnie dodaj kolor (czerwony) do cienia:

Efekt cienia tekstu!

Przykład

h1 {
  text-shadow: 2px 2px red;
}

Następnie dodaj efekt rozmycia (5px) do cienia:

Efekt cienia tekstu!

Przykład

h1 {
  text-shadow: 2px 2px 5px red;
}

Więcej przykładów cieni tekstowych

Przykład 1

Cień tekstu na białym tekście:

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Przykład 2

Cień tekstowy z czerwonym neonowym blaskiem:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

Przykład 3

Cień tekstowy z czerwonym i niebieskim neonowym blaskiem:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Przykład 4

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Wskazówka: przejdź do naszego rozdziału Czcionki CSS , aby dowiedzieć się, jak zmienić czcionki, rozmiar tekstu i styl tekstu.

Wskazówka: przejdź do naszego rozdziału Efekty tekstowe CSS , aby dowiedzieć się więcej o różnych efektach tekstowych.

Sprawdź się za pomocą ćwiczeń

Ćwiczenie:

Zmień kolor tekstu wszystkich elementów <p> na „czerwony”.

<style>
p {
  : red;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Wszystkie właściwości tekstu CSS

Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-align-last Specifies how to align the last line of a text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-justify Specifies how justified text should be aligned and spaced
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

❮ Poprzedni Następny ❯