Jak korzystać z opacity w CSS3

By /

CSS

W tej lekcji omówimy, jak używać właściwości opacity w CSS3, aby kontrolować przezroczystość elementów na stronie internetowej. Opacity pozwala na ustawienie przezroczystości elementu (i jego dzieci) w skali od 0.0 (całkowicie przezroczysty) do 1.0 (całkowicie nieprzezroczysty).

Przykład użycia opacity w CSS

Poniższy przykład pokazuje, jak można zastosować różne poziomy przezroczystości do elementów na stronie HTML za pomocą CSS. Dodatkowo, załączony kod JavaScript pozwoli na dynamiczną zmianę przezroczystości jednego z elementów.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania opacity w CSS3</title>
    <style>
        .opaque {
            opacity: 1; /* Całkowicie nieprzezroczysty */
        }
        
        .semi-transparent {
            opacity: 0.5; /* Półprzezroczysty */
        }
        
        .transparent {
            opacity: 0; /* Całkowicie przezroczysty */
        }
        
        .box {
            width: 100px;
            height: 100px;
            margin: 20px;
            display: inline-block;
        }
        
        #dynamic-opacity {
            background-color: green; /* Tło dla przykładu dynamicznej zmiany przezroczystości */
        }
    </style>
</head>
<body>

    <div class="box opaque" style="background-color: red;"></div>
    <div class="box semi-transparent" style="background-color: blue;"></div>
    <div class="box transparent" style="background-color: yellow;"></div>
    
    <div class="box" id="dynamic-opacity"></div>
    
    <button onclick="changeOpacity()">Zmień przezroczystość</button>
    
    <script>
        // Funkcja zmieniająca przezroczystość elementu
        function changeOpacity() {
            const box = document.getElementById('dynamic-opacity');
            const currentOpacity = parseFloat(window.getComputedStyle(box).opacity);
            const newOpacity = currentOpacity === 1 ? 0 : 1; // Zmiana przezroczystości
            
            box.style.opacity = newOpacity;
        }
    </script>

</body>
</html>

Wyjaśnienie kodu

  • CSS: Zdefiniowano trzy klasy .opaque, .semi-transparent, .transparent z różnymi wartościami opacity, które pokazują, jak można kontrolować poziom przezroczystości elementów. Dodatkowo, styl .box służy do definiowania wyglądu elementów, na których demonstrujemy efekty przezroczystości.
  • HTML: Utworzono cztery divy z klasą .box, z których każdy otrzymał inną klasę określającą poziom przezroczystości. Dodano również przycisk, który po kliknięciu zmieni przezroczystość zielonego diva.
  • JavaScript: Skrypt dodaje funkcjonalność przyciskowi, zmieniając przezroczystość elementu o id dynamic-opacity za każdym razem, gdy użytkownik na niego kliknie.

Podsumowanie

Właściwość opacity w CSS3 jest potężnym narzędziem do kontroli przezroczystości elementów na stronie internetowej. Pozwala na tworzenie efektów wizualnych, takich jak stopniowe zanikanie lub pojawianie się elementów, co może wzbogacić interakcję użytkownika ze stroną. Dzięki prostocie użycia i możliwościom, jakie oferuje, opacity jest chętnie wykorzystywana przez projektantów i programistów w różnorodnych projektach webowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video Fullstack w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top