Przejdź do treści

Obramowanie obrazkowe {border-image-source}

Jak udekorować ramkę na stronie obramowaniem graficznym?

Ramka obrazkowa w tle

Możliwości jakie dają style, jeżeli chodzi o efekty obramowania elementów, są bardzo duże. Jednak nie zawsze jest to wystarczające. Czasami mimo wszystko chcielibyśmy urozmaicić stronę, umieszczając na niej estetycznie wyglądające ramki z graficznie wykończonymi krawędziami. W tradycyjnym podejściu zwykle przygotowuje się wtedy trzy elementy obrazkowe: górna krawędź ramki, dolna krawędź oraz boczne krawędzie w postaci grafiki powielanej w pionie.

Przykład

Tak wyglądają osobne części krawędzi obramowania (środkowy obrazek zostanie powielony w pionie, więc wystarczy, żeby miał wysokość 1px):

górna grawędz ramki
boczne krawędzie ramki
dolna krawędz ramki

Wykonanie ramki graficznej wymaga użycia następujące go kodu HTML:

<div class="ramka">
	<div class="ramka_pojemnik">
		<div class="ramka_zawartosc">
			...
		</div>
	</div>
</div>

...oraz CSS:

.ramka {
	background: url(obramowanie.gif) no-repeat top;
	padding-top: 12px;
	width: 200px;
}

.ramka_pojemnik {
	background: url(obramowanie2.gif) no-repeat bottom;
	padding-bottom: 12px;
}

.ramka_zawartosc {
	background: #92C892 url(obramowanie3.gif) repeat-y center;
	padding: 0 12px;
	color: #031;
}

Uzyskany efekt:

To jest przykład tradycyjnie wykonanego "obramowania" obrazkowego. Wymaga zagnieżdżenia w sobie aż trzech bloków i przygotowania trzech obrazków. Ramka musi mieć stałą szerokość. Natomiast wysokość automatycznie dopasowuje się do zawartości, ale za to grafika pionowych krawędzi ramki nie może być zbyt skomplikowana.

Obrazek obramowania {border-image-source}

selektor { border-image-source: url(ścieżka dostępu do obrazka) }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako obramowanie. Wpisanie "none" usunie obrazek.

Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML!

Za pomocą CSS 3 można dużo łatwiej wykonać obramowanie obrazkowe - przygotowując tylko jedną grafikę, przedstawiającą krawędzie obramowania. Nie będzie również konieczne osadzanie na stronie dodatkowych znaczników. Uzyskamy przy tym efekt samoczynnego dopasowywania się grafiki obramowania do rozmiarów ramki oraz dużo większe możliwości kompozycyjne.

Przykład {border-image-source}

border-image-source: url(punkt.gif); border-width: 32px
Bez określenia dodatkowych własności obramowania graficznego (obcięcie, szerokość, nawis, powtarzanie), obrazek jest umieszczany jedynie w narożnikach, zastępując normalne obramowanie niegraficzne.

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari
border-image-source: wartość15
2011-10-25		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25

Komentarze

Zobacz więcej komentarzy

Facebook