image border okolo DIVu

Na webe mozno najst nespocet tutorialov ako spravit okolo div-u tzv. roud-corners. Co ak ale pozadujete plnohodnotne nastavovanie borderov okolo div-u, to znamena priradit kazdej strane blokoveho prvku (left, right, top, bottom) vlastny obrazok?

Jedno z rieseni je naznacene v tomto tutoriali. Ma vsak niekolko nevyhod: Zdrojove obrazky maju pevne rozmery, ktore ked na stranke prekrocite, dojde k rozpadnutiu dizajnu (pozrite si tento priklad na sirokom monitore - aspon 1200px). Okrem toho maju zdrojove obrazky velke rozmery.

Nasiel som vsak na webe jednu stranku, ktora tieto problemy riesi a tak som ju "obslehnul" :D ocistil od balastu a vysledok vam predkladam. Jasne pochopite ako sa vysledny dizajn posklada, ked si pozriete ako asi vypada zdrojovy obrazok pred rozrezanim:




Modra farba je pridana kvoli kontrastu. Nakolko ide gradient okrajov do bielej, je treba pre spravny efekt tuto farbu pridadit pozadiu stranky. Nebudem uz dalej kecat, pozrite si vysledok a nezabudnite poriadne pohybat so sirkou prehliadaca, aby ste videli ten gumovy efekt. Nevyhodou tohto riesenia je, ze na vytvorenie jedneho gumoveho okna potrebujete 15 div-ov (gllllg, semantici kde ste?).
download.

BTW moje zdrojove obrazky som vyrezal z dekoracii okien Vista Aero :D Nakoniec este porovnanie v dvoh najdolezitejsich prehliadacoch dneska (ak by niekto vedel ako opravit ten rozdielny padding menu od textu, dajte vediet).

Cheers enjoy.

Ak sa tvoj web neobide bez takehoto efektu, tak tu zlozitost mozeme obetovat. Vsak dnesne pocitace su uz dost vykonne, takze vykreslenie by nemalo sposobovat nejake delaye.

Holt CSS riesenia su niekedy krkolomne (tam kde by bola tabulka elegantna).