piątek, 2023-12-29

CSS: Zapis kolorów w notacji rgba

W CSS kolory można zapisywać przy użyciu notacji rgba(), która pozwala na określenie kolorów w modelu RGB (Red, Green, Blue) z dodatkowym komponentem alpha reprezentującym przezroczystość. Format rgba() jest bardzo przydatny, gdy chcesz kontrolować nie tylko kolor, ale również stopień przezroczystości elementu.

Format RGBA

Notacja rgba() składa się z czterech wartości:

1. R (Red): Wartość czerwonego koloru (0-255).
2. G (Green): Wartość zielonego koloru (0-255).
3. B (Blue): Wartość niebieskiego koloru (0-255).
4. A (Alpha): Wartość przezroczystości (0-1), gdzie 0 oznacza całkowitą przezroczystość, a 1 pełną nieprzezroczystość.

Przykłady użycia

.transparent-red {
    background-color: rgba(255, 0, 0, 0.5); /* Półprzezroczysty czerwony */
}

.transparent-green {
    background-color: rgba(0, 255, 0, 0.3); /* Półprzezroczysty zielony z 30% przezroczystością */
}

.transparent-blue {
    background-color: rgba(0, 0, 255, 0.7); /* Półprzezroczysty niebieski z 70% przezroczystością */
}

.semi-transparent-white {
    background-color: rgba(255, 255, 255, 0.8); /* Półprzezroczysty biały z 80% przezroczystością */
}

.fully-transparent {
    background-color: rgba(0, 0, 0, 0); /* Całkowicie przezroczysty */
}

Uwagi

• Notacja rgba() jest szeroko obsługiwana przez nowoczesne przeglądarki internetowe.
• Wartość alpha (A) w rgba() jest wartością zmiennoprzecinkową w zakresie od 0 do 1, co daje dużą kontrolę nad stopniem przezroczystości.
• rgba() jest szczególnie użyteczna w projektowaniu interfejsów użytkownika i stron internetowych, gdzie potrzebna jest subtelna kontrola nad przezroczystością elementów, np. dla tła, nakładek, efektów hover i innych efektów wizualnych.