tekst oblewający obrazek

Dopasowanie tekstu do kształtu obrazka, ale nie tylko – CSS

Czas czytania: 2 minut

Jak sam tytuł mówi tym razem zajmę się dopasowaniem układu tekstu do kształtu obrazka. Chociaż nie tylko bo właściwość shape-outside  daje nam o wiele większe pole do manewru. Czyli dobrze już czujecie będę modyfikować ułożenie tekstu na stronie z pomocą CSS. Efekt będzie praktycznie taki sam / bądź zbliżony do tego jaki można uzyskać na różnych grafikach.

O co nam chodzi

Na początek jednak obrazek poglądowy. Bo jak widać pewna przeglądarka jeszcze za bardzo sobie nie radzi…

dopasowanie kształtu treści do obrazka

Do wykonania efektu przyda nam się oczywiście więcej innych właściwości CSS 🙂 . Pamiętajcie też, że efekt końcowy może się troszkę różnić w zależności od tego jaką przeglądarkę wykorzystujecie. Jest tak dlatego, że przeglądarki inaczej interpretują te funkcje. Jednak jak wspomniałam to dość nowy efekt – poza tym nie wszędzie musi on występować.

Z jakich właściwości będę korzystać

Do uzyskania efektu użyjemy następujących właściwości:

  • shape-outside – wpływa na sposób w jaki tekst oblewa obraz
  • shape-margin – określa odstęp tekstu od grafiki
  • shape-image-threshold

Właściwość CSS shape-outside

Wartości przyjmowane przez shape-outside:

  • default domyślny cały region
  • circle(): służy do tworzenia okrągłych kształtów.
  • ellipse(): służy do uzyskiwania kształtów eliptycznych.
  • inset(): do tworzenia prostokątnych kształtów.
  • polygon(): do tworzenia dowolnego kształtu z 3 lub więcej wierzchołkami.
  • url(): identyfikuje, który obraz powinien być używany do zawijania tekstu.
  • initial: obszar pływaka pozostaje niezmieniony.
  • inherit: dziedziczy wartość kształtu z zewnątrz od rodzica.

Przykładowo shape-outside z wartośią circle() :

See the Pen
shape-outside: circle
by Aura (@Julka85)
on CodePen.


W przypadku powyższego przykładu aby uzyskać efekt ładnego zaokrąglonego tekstu ustawiłam parametry następująco dla grafiki:

img {
 width: 300px;
 height: 300px;
 padding-right: 12px;
 float: left;
 shape-outside: circle(50%); 
}

Jak widać nasz obraz posiada właściwość: shape-outside: circle(50%);

Na sam tekst nic już nie muszę nakładać shape-outside: circle(50%); dodany do obrazka załatwi sprawę.

Z zastosowaniem ellipse():

See the Pen
shape-outside: ellipse
by Aura (@Julka85)
on CodePen.

.okalajacy2 img{
    width: 300px;
    height: 300px;
    float: left;
    box-shadow: none;
    shape-outside: ellipse(100px 235px at 68% 26%);
}

Dostosowywanie do różnorodnej przestrzeni np. trójkąta – polygon()

Innym przykładem może być oblanie np. trójkąta:

See the Pen
dyMvYox
by Aura (@Julka85)
on CodePen.

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
    </p>
</div>
.main {
    width: 500px;
    height: 200px;
}

.left {
    -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
    float: left;
    width: 40%;
    height: 12ex;
    background-color: lightgray;
    -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    float: right;
    width: 40%;
    height: 12ex;
    background-color: lightgray;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
    text-align: justify;
}

Dużo ciekawszy przykład znajduje się na stronie:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

Mój wpis wzorowany jest na:

Źródło: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside

Dodatkowe tagi:

tekst oblewający obrazek ilustrację
oblanie, oscylacja tekstem obrazka
tekst wokół ilustracji