Autor publikacji: Virtual Patriot - Administrator

shape-outside

Data publikacji: Listopad 01 2014
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - shape-outside property (LV1)

Przeznaczenie właściwości `shape-outside`

Za pomocą właściwości shape-outside możemy określić kształt obszaru interesującego nas elementu HTML.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `shape-outside`

przeznaczenie: pływający element HTML
pozycja: static, relative
dziedziczenie: nie
wartość initial: none
wyjątki initial: brak
animowanie: tak, lecz tylko wartość inset(), circle(), ellipse() oraz polygon()

Interpretacja właściwości `shape-outside`

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

Zobacz więcej informacji o interpretacji właściwości shape-outside.

Opis wartości właściwości `shape-outside`

none

Wyjaśnienie

Wartość none jest domyślną wartością właściwości shape-outside.

Domyślnie obszar elementu HTML nie posiada zmienionego kształtu.

Przykład

  shape-outside:none;

float

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, 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, 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#float" posiada swój pierwotny kształt.

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;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
        border-bottom-right-radius:40%;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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>

margin-box

Wyjaśnienie

Za pomocą wartości margin-box właściwości shape-outside możemy sprawić, że kształt obszaru interesującego nas elementu HTML zostanie ograniczony do zewnętrznych krawędzi marginesów zewnętrznych tego elementu HTML (uwzględniając przy tym ewentualne zaokrąglenia rogów).

Przykład

  shape-outside:margin-box;

float

Kształt obszaru przykładowego elementu "div#float" został ograniczony do zewnętrznych krawędzi marginesów zewnętrznych przykładowego elementu "div#float", ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-outside" wraz z wartością "margin-box".

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;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:margin-box;
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
        border-bottom-right-radius:40%;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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>

border-box

Wyjaśnienie

Za pomocą wartości border-box właściwości shape-outside możemy sprawić, że kształt obszaru interesującego nas elementu HTML zostanie ograniczony do zewnętrznych krawędzi obramowania tego elementu HTML (uwzględniając przy tym ewentualne zaokrąglenia rogów).

Przykład

  shape-outside:border-box;

float

Kształt obszaru przykładowego elementu "div#float" został ograniczony do zewnętrznych krawędzi obramowania przykładowego elementu "div#float", ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-outside" wraz z wartością "border-box".

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;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:border-box;
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
        border-bottom-right-radius:40%;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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>

padding-box

Wyjaśnienie

Za pomocą wartości padding-box właściwości shape-outside możemy sprawić, że kształt obszaru interesującego nas elementu HTML zostanie ograniczony do zewnętrznych krawędzi marginesów wewnętrznych tego elementu HTML (uwzględniając przy tym ewentualne zaokrąglenia rogów).

Przykład

  shape-outside:padding-box;

float

Kształt obszaru przykładowego elementu "div#float" został ograniczony do zewnętrznych krawędzi marginesów wewnętrznych przykładowego elementu "div#float", ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-outside" wraz z wartością "padding-box".

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;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:padding-box;
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
        border-bottom-right-radius:40%;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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>

content-box

Wyjaśnienie

Za pomocą wartości content-box właściwości shape-outside możemy sprawić, że kształt obszaru interesującego nas elementu HTML zostanie ograniczony do krawędzi obszaru zawartości tego elementu HTML (uwzględniając przy tym ewentualne zaokrąglenia rogów).

Przykład

  shape-outside:content-box;

float

Kształt obszaru przykładowego elementu "div#float" został ograniczony do krawędzi obszaru zawartości przykładowego elementu "div#float", ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-outside" wraz z wartością "content-box".

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;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:content-box;
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
        border-bottom-right-radius:40%;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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>

inset()

Wyjaśnienie

Za pomocą właściwości shape-outside oraz funkcji inset() możemy określić kształt prostokąta (opcjonalnie z zaokrąglonymi rogami), do którego powinien zostać ograniczony kształt obszaru interesującego nas elementu HTML.

Przykład

  shape-outside:inset(0 50px 100px 0);

float

Kształt obszaru przykładowego elementu "div#float" został ograniczony do kształtu przypominającego kształt prostokąta, ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-outside" wraz z wartością w postaci funkcji "inset()", w której to funkcji zostały użyte następujące wartości: "0 50px 100px 0".

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;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:inset(0 50px 100px 0);
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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>

circle()

Wyjaśnienie

Za pomocą właściwości shape-outside oraz funkcji circle() możemy określić kształt koła, do którego powinien zostać ograniczony kształt obszaru interesującego nas elementu HTML.

Przykład

  shape-outside:circle(100px);

float

Kształt obszaru przykładowego elementu "div#float" został ograniczony do kształtu przypominającego kształt koła, ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-outside" wraz z wartością w postaci funkcji "circle()", w której to funkcji została użyta wartość "100px".

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;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:circle(100px);
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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>

ellipse()

Wyjaśnienie

Za pomocą właściwości shape-outside oraz funkcji ellipse() możemy określić kształt elipsy, do którego powinien zostać ograniczony kształt obszaru interesującego nas elementu HTML.

Przykład

  shape-outside:ellipse(50px 100px);

float

Kształt obszaru przykładowego elementu "div#float" został ograniczony do kształtu przypominającego kształt elipsy, ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-outside" wraz z wartością w postaci funkcji "ellipse()", w której to funkcji zostały użyte następujące wartości: "50px 100px".

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;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:ellipse(50px 100px);
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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>

polygon()

Wyjaśnienie

Za pomocą właściwości shape-outside oraz funkcji polygon() możemy określić kształt wielokąta, do którego powinien zostać ograniczony kształt obszaru interesującego nas elementu HTML.

Przykład

  shape-outside:polygon(0 0, 100px 100px, 0 200px);

float

Kształt obszaru przykładowego elementu "div#float" został ograniczony do kształtu przypominającego kształt wielokąta, ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-outside" wraz z wartością w postaci funkcji "polygon()", w której to funkcji zostały użyte następujące wartości: "0 0, 100px 100px, 0 200px".

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;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:polygon(0 0, 100px 100px, 0 200px);
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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>

obrazek

Wyjaśnienie

Za pomocą właściwości shape-outside oraz dowolnego sposobu definiowania obrazka w języku CSS możemy określić, który obrazek posiada nieprzezroczysty obszar, do którego powinien zostać ograniczony kształt obszaru interesującego nas elementu HTML.

Przykład

  shape-outside:url(https://webkod.pl/files/css/obrazek-06.png);

float

Kształt obszaru przykładowego elementu "div#float" został ograniczony do kształtu nieprzezroczystego obszaru posiadanego przez obrazek znajdujący się pod adresem "https://webkod.pl/files/css/obrazek-06.png", ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-outside" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "https://webkod.pl/files/css/obrazek-06.png".

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;
      }

      #blok {
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:url(https://webkod.pl/files/css/obrazek-06.png);
        float:left;
        width:200px;
        line-height:200px;
        text-align:center;
        font-size:1.8em;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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, 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>

wzorzec wartości

Wyjaśnienie

Za pomocą właściwości shape-outside oraz z góry zdefiniowanego wzorca wartości możemy określić kształt obszaru interesującego nas elementu HTML.

Składniki wzorca wartości właściwości `shape-outside`

            shape area

Przykładowe zapisy

padding-box

circle(100px)

circle(100px) padding-box

ellipse(100px 75px at 15px 60px) content-box

shape

Składnik shape nie jest wymaganym składnikiem wzorca wartości właściwości shape-outside. Składnik shape określa kształt obszaru wskazanego przez składnik area.

area

Składnik area nie jest wymaganym składnikiem wzorca wartości właściwości shape-outside. Składnik area określa obszar, do którego powinien zostać ograniczony kształt obszaru interesującego nas elementu HTML.

Przykład

  shape-outside:circle(150px at 0 0) border-box;

float

Kształt obszaru przykładowego elementu "div#float" został ograniczony do obszaru wyznaczonego przez zewnętrzne krawędzie obramowania przykładowego elementu "div#float", a następnie obszar wyznaczony przez zewnętrzne krawędzie obramowania przykładowego elementu "div#float" został ograniczony do kształtu przypominającego kształt koła, ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-outside" wraz z następującymi wartościami: "circle(150px at 0 0) border-box".

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;
      }

      #blok {
        padding:1em;
        font-size:0.8em;
        background-color:#7DCDE8;
      }

      #float {
        shape-outside:circle(150px at 0 0) border-box;
        float:left;
        font-size:1.8em;
        margin:1em;
        border:1em solid white;
        padding:2em;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <div id="float">float</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, 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, 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>