Właściwość Visibility w CSS3

By /

CSS

Właściwość visibility w CSS3 jest używana do kontrolowania wyświetlania elementów na stronie internetowej bez zmiany układu dokumentu. W przeciwieństwie do właściwości display, która usuwa element z normalnego przepływu dokumentu, visibility pozwala ukryć element, ale nadal zajmuje on przestrzeń na stronie. Ta właściwość ma kluczowe znaczenie, gdy chcemy zachować układ strony niezmiennym, jednocześnie dynamicznie pokazując lub ukrywając elementy.

Przykład użycia visibility w połączeniu z HTML i JavaScript

W poniższym przykładzie pokazano, jak można użyć visibility do ukrywania i pokazywania elementu na stronie. Użyjemy prostego HTML do stworzenia przycisku, który będzie kontrolował widoczność obiektu, oraz CSS do stylizacji.

<!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 Visibility w CSS3</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            visibility: visible; /* Początkowo element jest widoczny */
        }
    </style>
</head>
<body>

<button onclick="toggleVisibility()">Pokaż/Ukryj</button>

<div id="box"></div>

<script>
    // Funkcja przełączająca widoczność elementu
    function toggleVisibility() {
        const box = document.getElementById('box');
        
        if (box.style.visibility === 'visible') {
            box.style.visibility = 'hidden'; // Ukrywa element
        } else {
            box.style.visibility = 'visible'; // Pokazuje element
        }
    }
</script>

</body>
</html>

Jak działa visibility

  • visibility: visible; – Element jest widoczny na stronie. Jest to wartość domyślna.
  • visibility: hidden; – Element jest niewidoczny, ale nadal zajmuje miejsce w układzie dokumentu. Inne elementy nie przesuwają się, aby zająć miejsce ukrytego elementu.
  • visibility: collapse; – Specjalne zastosowanie dla elementów tabeli. Ukrywa wiersze lub kolumny, ale zachowuje przestrzeń, jakby były widoczne. W innych elementach działa jak hidden.

Zastosowania visibility

Właściwość visibility jest szczególnie przydatna w interfejsach użytkownika, gdzie dynamicznie kontrolujemy zawartość, taką jak menu rozwijane, okna dialogowe, tooltipy itp., bez wpływu na układ strony.

Podsumowanie

Właściwość visibility w CSS3 oferuje elastyczne rozwiązanie do kontrolowania wyświetlania elementów na stronach internetowych. Pozwala na ukrywanie elementów, zachowując ich przestrzeń w układzie dokumentu, co jest przydatne w wielu scenariuszach projektowania interfejsu użytkownika. W połączeniu z JavaScript, visibility może być używana do tworzenia dynamicznych, interaktywnych efektów na stronie, zachowując przy tym płynność i stabilność układu.

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

Powiązane artykuły

Scroll to Top