Autor publikacji: Virtual Patriot - Administrator

rect()

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the rect function (CSS2 - LV2.2)

Przeznaczenie funkcji `rect()`

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

Parametry funkcji `rect()`

            cutTop, visibleLeft, visibleTop, cutLeft

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

zmiana kształtu obszaru wnętrza elementu HTML za pomocą funkcji rect() — `rect(45px, 400px, 250px, 90px)`

Występowanie funkcji `rect()`

clip #rect()

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:#7DCDE8;
      }
    </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()`

: tak
: tak
: tak
: tak
: tak
: tak