środa,
CSS: Kolory tła
Właściwa barwa tła może znacznie wpłynąć na użyteczność i estetykę strony internetowej. Kaskadowe arkusze stylów pozwalają realizować to na kilka sposobów. Wybór kolorów powinien uwzględniać kontrast, dostępność i spójność z ogólnym designem strony. W zestawieniu uwzględniono większość własności typowo związanych z tłem elementów.
Kolor Stały
- Predefiniowane nazwy kolorów, np. 'background-color: red;'
- Wartość RGB, np. 'background-color: rgb(255, 0, 0);'
- Inną opcją jest użycie wartości HEX, np. 'background-color: #FF0000;'
- Kolor można także określić przy użyciu wartości HSL, np. 'background-color: hsl(0, 100%, 50%);'
Gradienty
- Liniowy gradient: 'background: linear-gradient(direction, color1, color2, ...);' Na przykład: 'background: linear-gradient(to right, red, yellow);'
- Radialny gradient: 'background: radial-gradient(shape size at position, start-color, ..., last-color);' Na przykład: 'background: radial-gradient(circle, red, yellow, green);'
Obrazy
- Tłem może być obraz: 'background-image: url('ścieżka_do_obrazu.jpg');'
- Dostępne jest łączenie obrazów z kolorami: 'background: url('ścieżka_do_obrazu.jpg') no-repeat center center, red;'
Przezroczystość
- Użycie RGBA (Red, Green, Blue, Alpha) umożliwia stosowanie poziomu przezroczystości, np. 'background-color: rgba(255, 0, 0, 0.5);'
- HSLA (Hue, Saturation, Lightness, Alpha) również pozwala na dodanie przezroczystości, np. 'background-color: hsla(0, 100%, 50%, 0.5);'
Wiele Warstw Tła
- Można stosować wiele warstw tła, na przykład różnych obrazów lub połączenie obrazów z gradientami i kolorami stałymi, poprzez oddzielenie poszczególnych warstw przecinkiem, np. 'background: url('image1.png'), linear-gradient(to right, red, yellow);'
Animowane kolory tła
- Kolory tła można animować za pomocą reguł animacji CSS: '@keyframes' w połączeniu z właściwością 'background-color'.
