Kurs języka HTML i CSS

Poradnik webmastera

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

CSS3 - border-image-source

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 Podaje adres grafiki będącej obramowaniem
Dziedziczenie nie
Wartości adres URL
Wartość domyślna brak
Przykład border-image-source: url(grafika.png);
Składnia JavaScript object.style.borderImageSource="url(grafika.png)"

Aby wskazać adres, należy wpisać w definicji stylu border-image-source: url(grafika.png);

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

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

Jak widać, jest ona skrócona o człon -source.

Grafika będąca obramowaniem powinna być plikiem w fomacie PNG, w którym część niewypełniona obrazem jest przezroczysta. Przykładem jest grafika dostępna w W3C.

Grafika obramowania

Przykładowy kod:

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

użyty w definicji pojemnika spowoduje, że grafika ta będzie stanowiła obramowanie. Użyjmy jej w dwóch pojemnikach o różnych wymiarach:

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.

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.

Możemy tworzyć zresztą bardziej efektowne ramy:

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.

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