| Funkcja | Opis | Przykład |
|---|---|---|
| attr() | Zwraca wartość atrybutu wybranego elementu | |
| calc() | Umożliwia wykonywanie obliczeń w celu ustalenia wartości właściwości CSS | height: calc(100vh - 200px); UWAGA?!?koniecznie spacje koło minusa !? |
| counter() | Zwraca ciąg reprezentujący bieżącą wartość nazwanego licznika, jeśli taki istnieje. | counter(licznik, upper-roman) |
| cubic-bezier() | Definiuje krzywą sześcienną Beziera | |
| hsl(barwa , nasycenie , jasność) | Definiuje kolory za pomocą modelu Hue-Saturation-Lightness (HSL) Barwa to stopień na kole kolorów od 0 do 360. 0 = czerwony, 120 = zielony, a 240 = niebieski. Nasycenie (intensywność koloru) jest wartością procentową, 0% = odcień szarości, a 100% = pełny kolor. Jasność jest wartością procentową, 0% = czerń, 100% = biel. Odcienie szarości najprościej uzyskać przez hsl (0, 0%, jasność). |
hsl(9, 100%, 64%); UWAGA?!? tu musi być %, nie zamieniaj na liczbę p. 0.5 !? |
| hsla(barwa, nasycenie , jasność, alfa) | Definiuje kolory za pomocą modelu Hue-Saturation-Lightness-Alpha (HSLA). Parametr alfa jest liczbą między 0,0 (przezroczysty) a 1,0 (nieprzezroczysty). | hsla(0, 100%, 40%, 0.4) |
| linear-gradient() | Ustawia gradient liniowy jako obraz tła. Zdefiniuj co najmniej dwa kolory na krawędziach | |
| radial-gradient() | Ustawia gradient promieniowy jako obraz tła. Zdefiniuj co najmniej dwa kolory (od środka do krawędzi) | |
| repeating-linear-gradient() | Powtarza gradient liniowy | |
| repeating-radial-gradient() | Powtarza gradient radialny | |
| rgb(R, G, B) | Definiuje kolory za pomocą modelu kolorów czerwono-zielono-niebieskiego (RedGreenBlue) | rgb(255, 99, 71) |
| rgba(R, G, B, alfa) | Definiuje kolory za pomocą modelu czerwono-zielono-niebiesko-alfa (RGBA). Parametr alfa jest liczbą między 0,0 (przezroczysty) a 1,0 (nieprzezroczysty). | rgba(240, 194, 65, 0.4) |
| var() | Wstawia wartość właściwości niestandardowej. | color: var(--moja_zmienna); |
Zmienna w CSS:
<style>
:root {
--zmienna: #999999;
}
</style>
dostęp do zmiennej w JavaScript:
odczyt: getComputedStyle(document.documentElement).getPropertyValue('--zmienna'); //string
zmiana: document.documentElement.style.setProperty('--zmienna', 'pink');