Autor publikacji
Virtual Patriot - Administrator

circle()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji circle()

Za pomocą funkcji circle() możemy określić kształt w postaci koła.

Parametry funkcji circle()

Przykładowe zapisy

circle()

circle(100px)

circle(at right top)

circle(150px at 100px)

circle(25% at 40% 20%)

circle(10em at bottom)

radius

Parametr radius nie jest wymaganym parametrem funkcji circle(). Parametr radius określa rozmiar promienia, jaki powinien posiadać nowo powstający okrągły 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 (width) obszaru pierwotnego, którego kształt chcemy zmienić oraz względem aktualnego rozmiaru wysokości (height) obszaru pierwotnego, którego kształt chcemy zmienić, według wzoru: sqrt(width2 + height2) / sqrt(2) * radius

Wartość domyślna

closest-side

Dodatkowe dostępne wartości parametru radius

closest-side

Wartość closest-side parametru radius sprawia, że rozmiarem promienia nowo powstającego okrągłego kształtu będzie długość od środka nowo powstającego okrągłego kształtu do najbliżej położonej krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.

farthest-side

Wartość farthest-side parametru radius sprawia, że rozmiarem promienia nowo powstającego okrągłego kształtu będzie długość od środka nowo powstającego okrągłego kształtu do najdalej położonej krawędzi obszaru pierwotnego, którego kształt chcemy zmienić.

position

Parametr position nie jest wymaganym parametrem funkcji circle(). Parametr position określa miejsce, gdzie powinien znaleźć się środek nowo powstającego okrągłego 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 okrągłego 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 okrągłego 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

circle(120px at center)

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

Występowanie funkcji circle()

  1. clip-path
  2. shape-outside

Przykład funkcji circle()

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

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:circle(120px at 65% 50%);
        -webkit-clip-path:circle(120px at 65% 50%);
        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 circle()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .