Autor publikacji: Virtual Patriot - Administrator

ellipse()

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

Zobacz również: w3.org - the ellipse function (LV1)

Przeznaczenie funkcji `ellipse()`

Za pomocą funkcji ellipse() możemy określić kształt w postaci elipsy.

Parametry funkcji `ellipse()`

            rx ry position

Przykładowe zapisy

ellipse()

ellipse(100px)

ellipse(50px 100px)

ellipse(at right top)

ellipse(50px 150px at 100px)

ellipse(300px 25% at 40% 20%)

ellipse(50px 10em at bottom)

rx

Parametr rx nie jest wymaganym parametrem funkcji ellipse(). Parametr rx określa rozmiar promienia na poziomej osi X, jaki powinien posiadać nowo powstający eliptyczny kształt.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty
Wartości procentowe: wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru pierwotnego, którego kształt chcemy zmienić
Wartość domyślna: brak

Dodatkowe dostępne wartości parametru `rx`

                  closest-side, farthest-side

closest-side: Wartość closest-side parametru rx sprawia, że rozmiarem promienia na poziomej osi X nowo powstającego eliptycznego kształtu będzie długość od środka nowo powstającego eliptycznego kształtu do najbliżej położonej na poziomej osi X krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.
farthest-side: Wartość farthest-side parametru rx sprawia, że rozmiarem promienia na poziomej osi X nowo powstającego eliptycznego kształtu będzie długość od środka nowo powstającego eliptycznego kształtu do najdalej położonej na poziomej osi X krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.

ry

Parametr ry nie jest wymaganym parametrem funkcji ellipse(). Parametr ry określa rozmiar promienia na pionowej osi Y, jaki powinien posiadać nowo powstający eliptyczny kształt.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty
Wartości procentowe: wartości procentowe liczone są względem aktualnego rozmiaru wysokości obszaru pierwotnego, którego kształt chcemy zmienić
Wartość domyślna: closest-side

Dodatkowe dostępne wartości parametru `ry`

                  closest-side, farthest-side

closest-side: Wartość closest-side parametru ry sprawia, że rozmiarem promienia na pionowej osi Y nowo powstającego eliptycznego kształtu będzie długość od środka nowo powstającego eliptycznego kształtu do najbliżej położonej na pionowej osi Y krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.
farthest-side: Wartość farthest-side parametru ry sprawia, że rozmiarem promienia na pionowej osi Y nowo powstającego eliptycznego kształtu będzie długość od środka nowo powstającego eliptycznego kształtu do najdalej położonej na pionowej osi Y krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.

position

Parametr position nie jest wymaganym parametrem funkcji ellipse(). Parametr position określa miejsce, gdzie powinien znaleźć się środek nowo powstającego eliptycznego kształtu.

Dostępne wartości: wartości pozycjonujące lub dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty
Sposób podawania: po słowie kluczowym at należy podać dokładnie jedną wybraną lub dokładnie dwie wybrane wartości. Gdy podamy tylko jedną wartość, wtedy wartością domyślną drugiej wartości będzie wartość center. Pierwsza wartość odpowiada za przesunięcie (środka nowo powstającego eliptycznego kształtu) w poziomie względem lewej krawędzi obszaru pierwotnego, którego kształt chcemy zmienić (wartości dodatnie przesuwają w prawo, wartości ujemne przesuwają w lewo). Druga wartość odpowiada za przesunięcie (środka nowo powstającego eliptycznego kształtu) w pionie względem górnej krawędzi obszaru pierwotnego, którego kształt chcemy zmienić (wartości dodatnie przesuwają w dół, wartości ujemne przesuwają w górę).
Wartości procentowe: wartości procentowe liczone są względem aktualnego rozmiaru obszaru pierwotnego, którego kształt chcemy zmienić (pierwsza wartość liczona jest względem aktualnego rozmiaru szerokości wspomnianego obszaru, a druga wartość liczona jest względem aktualnego rozmiaru wysokości wspomnianego obszaru)
Wartość domyślna: center

zmiana kształtu obszaru wnętrza elementu HTML za pomocą funkcji ellipse() — `ellipse(180px 90px at center)`

Występowanie funkcji `ellipse()`

Przykład funkcji `ellipse()`

  clip-path:ellipse(180px 90px at center);

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 elipsy, ponieważ do wspomnianego elementu "div" została dodana właściwość "clip-path" wraz z wartością w postaci funkcji "ellipse()", w której to funkcji zostały użyte następujące wartości: "180px 90px at center".

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-path:ellipse(180px 90px at center);
        -webkit-clip-path:ellipse(180px 90px at center);
        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 `ellipse()`

: tak
: tak
: tak
: tak
: nie
: tak

Zobacz więcej informacji o interpretacji funkcji ellipse().