Ostatnio edytowany:

ellipse()

Autor: Virtual Patriot

Przeznaczenie funkcji ellipse()

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

Parametry funkcji ellipse()

Przykładowe zapisy

ellipse()

ellipse(50px 100px)

ellipse(at right top)

ellipse(50px 150px at 100px)

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

ellipse(50px 10em at bottom)

size

Parametr size nie jest wymaganym parametrem funkcji ellipse(). Parametr size określa rozmiar, 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

Sposób podawania

należy podać dokładnie jedną wybraną lub dokładnie dwie wybrane wartości. Gdy podamy tylko jedną wartość, wartością domyślną drugiej wartości będzie wartość closest-side. Pierwsza wartość określa rozmiar szerokości nowo powstającego eliptycznego kształtu. Druga wartość określa rozmiar wysokości nowo powstającego eliptycznego kształtu.

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)

Ważne

rozmiar nowo powstającego eliptycznego kształtu będzie zawsze dwukrotnie większy od rozmiaru, który chcemy określić. Innymi słowy wartość 50px 150px sprawi, że rozmiar szerokości nowo powstającego eliptycznego kształtu będzie równy 100px, a rozmiar wysokości nowo powstającego eliptycznego kształtu będzie równy 300px.

Wartość domyślna

closest-side

Dodatkowe dostępne wartości parametru size

closest-side

Wartość closest-side parametru size sprawia, że po określeniu wartości parametru position rozmiar szerokości lub rozmiar wysokości nowo powstającego eliptycznego kształtu uzależniony będzie od jednej najbliżej położonej krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.

farthest-side

Wartość farthest-side parametru size sprawia, że po określeniu wartości parametru position rozmiar szerokości lub rozmiar wysokości nowo powstającego eliptycznego kształtu uzależniony będzie od jednej najdalej położonej 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ść, 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

ellipse(180px 90px at center)

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

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

  1. clip-path
  2. shape-outside

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:#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 ellipse()

Firefox

nie

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

Zobacz więcej informacji o interpretacji funkcji .