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;:clipdziała tylko na elementach z pozycją inną niżstatic. Najczęściej używane sąabsolutelubfixed.clip: rect(50px, 150px, 150px, 50px);: Określa obszar elementu, który ma być widoczny. Wartościrectto 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 jakoauto.
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.