[CSS] Graficzna (obrazkowa) ramka elementu - jak?

[Wooyek]

Moje pytanie dotyczy sytuacji, kiedy chcemy aby jakiďż˝ element strony (np.
menu, czy sidebar) mia� obrazkow� ramk� - przyk�adem niech b�dzie kwadrat z
cieniem na wszystkich bokach, czy kwadrat z "podartymi" brzegami.

Rozwi�zanie, jakie do tej pory stosowa�em to div "nag��wkowy" z g�rnym
brzegiem jako t�o, nast�pnie div "g��wny" z t�em (repeat-y) i zawarto�ci�
strony, a na koniec div "stopkowy" podobny do "nag��wkowego".

Zastanawiam si�, czy nie da�oby si� tego rozwi�za� jako� z poziomu CSS, bez
wstawiania do HTML tych dw�ch dodatkowych div-�w?
--
Michal "Wooyek" Lalik // wooyek na gmail.com // www.wooyek.pl //

[Mirosław Zalewski]

listopad roku pamiętnego 2009, prawdopodobnie 15. Wielka mądrość na
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Wooyek:

> Moje pytanie dotyczy sytuacji, kiedy chcemy aby jakiś element strony
> (np. menu, czy sidebar) miał obrazkową ramkę - przykładem niech
> będzie kwadrat z cieniem na wszystkich bokach, czy kwadrat z
> "podartymi" brzegami.
>
> Rozwiązanie, jakie do tej pory stosowałem to div "nagłówkowy" z
> górnym brzegiem jako tło, następnie div "główny" z tłem (repeat-y) i
> zawartością strony, a na koniec div "stopkowy" podobny do
> "nagłówkowego".
>
> Zastanawiam się, czy nie dałoby się tego rozwiązać jakoś z poziomu
> CSS, bez wstawiania do HTML tych dwóch dodatkowych div-ów?

Pseudoelementy ::before i ::after.
Można w ten sposób zrobić też zaokraglone rogi dla elementu:
http://virtuelvis.com/gallery/css/rounded/

Tylko jeśli chcesz zachować kompatybilność z pewnymi starymi
przeglądarkami, to w sumie i tak nic nie zrobisz (niby można przez
expressions dodawać kolejne elementy do stylowania, ale prostsze wydaje
mi się stworzenie niesemantycznego HTML-a).
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

[porneL]

Tak, za pomoc� border-image, ale to zadzia�a tylko w Firefoksie 3.1,
Safari 4, Operze 11 i IE 14.

--
http://pornel.net
this.author = new Geek("porneL");