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… być może w przyszłości problem zostanie rozwiązany a na razie działa to np. w Chrome czy Firefox

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()

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

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

See the Pen Untitled 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