Ostatnio edytowany:

rect()

Autor: Virtual Patriot

Przeznaczenie funkcji rect()

Za pomocą funkcji rect() możemy określić kształt w postaci prostokąta.

Parametry funkcji rect()

Przykładowe zapisy

rect(15px, 350px, 150px, 45px)

rect(0, 100px, 100px, 0)

rect(1em, 20em, 10em, 1em)

cutTop

Parametr cutTop jest wymaganym parametrem funkcji rect(). Parametr cutTop określa wielkość obcięcia nowo powstającego prostokątnego kształtu względem górnej krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub wartość auto

Warto wiedzieć, że

wartość auto wskazuje na wartość 0

Wartość domyślna

brak

visibleLeft

Parametr visibleLeft jest wymaganym parametrem funkcji rect(). Parametr visibleLeft określa wielkość obszaru, który powinien pozostać widoczny względem lewej krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub wartość auto

Warto wiedzieć, że

wartość auto wskazuje na wartość rozmiaru szerokości obszaru pierwotnego, którego kształt chcemy zmienić

Wartość domyślna

brak

visibleTop

Parametr visibleTop jest wymaganym parametrem funkcji rect(). Parametr visibleTop określa wielkość obszaru, który powinien pozostać widoczny względem górnej krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub wartość auto

Warto wiedzieć, że

wartość auto wskazuje na wartość rozmiaru wysokości obszaru pierwotnego, którego kształt chcemy zmienić

Wartość domyślna

brak

cutLeft

Parametr cutLeft jest wymaganym parametrem funkcji rect(). Parametr cutLeft określa wielkość obcięcia nowo powstającego prostokątnego kształtu względem lewej krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub wartość auto

Warto wiedzieć, że

wartość auto wskazuje na wartość 0

Wartość domyślna

brak

rect(45px, 400px, 250px, 90px)

zmiana kształtu obszaru wnętrza elementu HTML za pomocą funkcji rect()

Właściwości CSS dla funkcji rect()

  1. clip

Przykład funkcji rect()

  clip:rect(15px, 350px, 150px, 45px);
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Obszar przykładowego elementu "div" został przycięty do kształtu przypominającego kształt prostokąta, ponieważ do wspomnianego elementu "div" została dodana właściwość "clip" wraz z wartością w postaci funkcji "rect()", w której to funkcji zostały użyte następujące wartości: "15px, 350px, 150px, 45px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        clip:rect(15px, 350px, 150px, 45px);
        position:absolute;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

Interpretacja funkcji rect()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak