Przejdź do treści

Obramowanie

Nawis obramowania obrazkowego

(CSS 3 - interpretuje Opera 15, Chrome)

selektor { border-image-outset: nawis }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "nawis" należy podać wartość szerokości wystającej poza krawędź tradycyjnego obramowania, wyrażoną w jednostkach długości lub jako liczba naturalna (podająca wielokrotność szerokości obramowania).

Możliwe jest przy tym podanie:

  • jednej wartości - określa jednakową szerokość nawisu poza wszystkie krawędzie obramowania
  • dwóch wartości - pierwsza określa szerokość nawisu poza górną i dolną krawędź obramowania, natomiast druga - poza lewą i prawą
  • trzech wartości - pierwsza określa szerokość nawisu poza górną krawędź obramowania, druga - poza lewą i prawą, natomiast trzecia - poza dolną
  • czterech wartości - ustala oddzielne szerokości nawisów poza kolejne krawędzie obramowania: górną, prawą, dolną, lewą

Nawis obramowania obrazkowego to jego część wystająca na zewnątrz poza krawędzie tradycyjnego obramowania elementu. Dodanie nawisu nie wpływa na położenie elementu - element najpierw jest renderowany w określonym miejscu na stronie, a dopiero potem jest do niego ewentualnie dorysowywany nawis. Skutkiem tego może być zmniejszenie się faktycznie widocznego marginesu elementu, oddzielającego go do sąsiednich bloków. Jeżeli szerokość marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza granicami strony. Dlatego ustalając nawis obramowania obrazkowego zawsze warto jednocześnie zadbać o nadanie odpowiedniej wartości marginesu.

Jeżeli "border-image-slice: 124", to wartość nawisu obramowania obrazkowego można zilustrować następująco:

Nawis wystaje poza krawędzie tradycyjnego obramowania elementu.

Źródło: CSS Backgrounds and Borders Module Level 3

Przykład:

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-outset: 7px; border-width: 15px
Połączenie szerokości obramowania i nawisu tylko częściowo wystającego poza jego krawędzie.

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 15px; border-image-outset: 15px
Jeżeli element nie posiada tradycyjnego obramowania, nawis będzie wystawał poza krawędzie samego elementu.

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 15px
Dla porównania to samo, ale bez nawisu.

Komentarze

Zobacz więcej komentarzy