Autor Zpráva
srigi
Profil
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.
ShiraNai7
Profil
Elegantní, ale stojí to za ty desítky divů ve zdorojovém kódu? :-)
srigi
Profil
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).
joe
Profil
1) Alespoň 8 divů by se dalo odstranit a to jsem se na to díval tak půl minuty ;)
2) Nefunguje to v IE6, resp. funguje, ale je tam mezera.
3) Na počtu divů a vnoření textu u tagů nezáleží, ale proč to dělat složitě, když to jde jednoduše.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: