Clip

Właściwość clip w CSS3 jest używana do określania, która część elementu powinna być widoczna. Wartość clip jest stosowana głównie do elementów z position: absolute;. Choć właściwość ta jest obecnie uznawana za przestarzałą na rzecz clip-path, nadal może być spotykana w starszych projektach lub specyficznych przypadkach użycia. W tej lekcji omówimy działanie clip oraz jak może być wykorzystana do manipulowania widocznością elementów.

Przykład użycia właściwości clip

Poniższy kod HTML i CSS demonstruje użycie clip do ukrycia części obrazu. W przykładzie, obraz zostanie przycięty tak, aby widoczna była tylko jego centralna część.

<!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 clip w CSS3</title>
    <style>
        .clipped-image {
            position: absolute; /* Wymagane dla zastosowania clip */
            clip: rect(50px, 150px, 150px, 50px); /* Przycina obraz */
            /* Wartości rect: top, right, bottom, left */
        }
    </style>
</head>
<body>
    <h3>Obraz przed i po zastosowaniu clip</h3>
    <!-- Obraz bez zastosowania clip -->
    <img src="example.jpg" alt="Pełny obraz" style="position: relative; left: 200px;">
    <!-- Obraz z zastosowaniem clip -->
    <img src="example.jpg" alt="Przycięty obraz" class="clipped-image">
</body>
</html>

Wyjaśnienie kodu

  • position: absolute;: clip działa tylko na elementach z pozycją inną niż static. Najczęściej używane są absolute lub fixed.
  • clip: rect(50px, 150px, 150px, 50px);: Określa obszar elementu, który ma być widoczny. Wartości rect to kolejno: góra, prawa, dół, lewa strona obszaru widocznego. W tym przypadku, przycięcie zostaje zastosowane tak, aby pokazać środek obrazu o wymiarach 100x100px.

Możliwe wartości dla clip

  • auto: Domyślna wartość; cały element jest widoczny.
  • rect(top, right, bottom, left): Definiuje prostokątny obszar elementu, który ma być widoczny. Wartości mogą być podane w jednostkach (np. px, em) lub jako auto.

Podsumowanie

Chociaż clip jest obecnie uznawana za przestarzałą i zastępowana przez clip-path dla większej elastyczności i możliwości (np. przycinanie do ścieżek innych niż prostokątne), nadal może być użyteczna w specyficznych przypadkach. Zrozumienie jej działania pozwala na lepsze zrozumienie ewolucji CSS i technik manipulacji widocznością elementów.

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

Poprzedni
Następny
Scroll to Top