Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - obramowania

CSS3 - border-image-slice

Email Drukuj PDF

Tematy: border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius | border-radius | box-shadow | border-image-source | border-image-width | border-image-outset | border-image-repeat | border-image-slice | border-image | box-decoration-break

Dane w pigułce
Zastosowanie Określa wycinek brzegu wchodzący do obramowania
Dziedziczenie nie
Wartości liczba
Wartość domyślna brak
Przykład border-image-slice: 27
Składnia JavaScript object.style.borderImageSlice="27"

Aby zdefiniować sposób powtarzania, należy wpisać w definicji stylu border-image-slice: liczba;

Stylu tego w kanonicznej postaci W3C nie obsługuje poprawnie żadna przeglądarka - trzy przeglądarki, Firefox, Chrome i Opera, posługują się zmodyfikowaną wersją i konieczne jest użycie prefiksów -moz-, -webkit- i -o-, np.:

border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
-moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;

kolorowe-tlo

Obrazek ma rozmiary 81x81 pikseli i dzieli się na 9 części, każda 27x27 pikseli - umownie niech mają numery od 1 do 9, licząc rzędami. Gdy w definicji podamy ... 27 repeat (przyjmujemy tutaj powielanie rombów, a nie ich rozciąganie), obramowania będą miały dopasowane do rombów rozmiary (obszary 2, 4, 6 i 8), zaś środek będzie pusty - pojawi się w nim zawartość ramki. Czerwone linie na ilustracji pokazują wirtualny podział obrazka (ilustracja pochodzi z webowej aplikacji Border Image Generator).

kolorowe-tlo

Podziałowi takiemu odpowiada poniższy pojemnik:

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit. Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque humanitate provinciae longissime absunt, minimeque ad eos mercatores saepe commeant atque ea quae ad effeminandos animos pertinent important, proximique sunt Germanis, qui trans Rhenum incolunt, quibuscum continenter bellum gerunt.

Gdybyśmy przyjęli większą wartość niż wymiary rombów, np. ... 35 repeat, widoczne w obramowaniu romby zostaną przycięte (pokazują to czerwone linie, bliżej siebie niż poprzednio, a dalej od brzegów obrazka) i niejako się zleją w obramowaniu.

kolorowe-tlo

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit. Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque humanitate provinciae longissime absunt, minimeque ad eos mercatores saepe commeant atque ea quae ad effeminandos animos pertinent important, proximique sunt Germanis, qui trans Rhenum incolunt, quibuscum continenter bellum gerunt.

Gdybyśmy z kolei przyjęli mniejszą wartość niż wymiary rombów, np. ... 20 repeat, widoczne w obramowaniu romby zostaną poszerzone o sąsiadujące fragmenty narożników (pokazują to czerwone linie, dalej od siebie niż poprzednio), które zostaną włączone do obramowania. Ale jednocześnie obcięte zostaną rożki tych rombów (te od strony centrum obrazka), które znajdą się w środkowym obszarze, tam gdzie jest treść.

kolorowe-tlo

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit. Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque humanitate provinciae longissime absunt, minimeque ad eos mercatores saepe commeant atque ea quae ad effeminandos animos pertinent important, proximique sunt Germanis, qui trans Rhenum incolunt, quibuscum continenter bellum gerunt.

Oczywiście możemy manipulować wszystkimi wartościami z osobna - widać jednak, że trzeba uważnie dopasowywać do siebie fizyczne rozmiary obrazka i jego fragmentów oraz wartości w definicji obramowania.

Pomijamy w tym miejscu objaśnienie innych parametrów definicji.

Interpretacja: Firefox, Opera, Chrome.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V