Dopasowywanie tekstu do kształtu obrazka – CSS

tekst oblewający obrazek

Kategoria wpisu Kurs CSS, Kursy, Tekst, Tło Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Jak sam tytuł mówi tym razem zajmę się dopasowaniem tekstu do kształtu obrazka. Nie tego jednak w formie grafiki lecz będę pracować na żywym tekście (czyli takim, który w każdej chwili będziemy mogli edytować).

Do wykonania efektu wykorzystam dość nowe  właściwości CSS 🙂 . Efekt może się więc różnić w zależności od tego jaką przeglądarkę wykorzystujecie. Ogólnie jeszcze w ogóle nie spotkałam się z tym efektem na komercyjnych stronach. Jednak jak wspomniałam to dość nowy efekt – poza tym nie wszędzie musi on występować.

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

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

okrongLorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae.

 

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

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

okrongLorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae.

 

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

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

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.

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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *