Zaoblené rohy bez obrázků - Krutá realita

Zaoblené rohy bez obrázků

27.03.2005

zaoblene-rohy

Dlouho jsem hledal způsob, jak zaoblit rohy u DIVu bez použití obrázku, a po přečtení Filův blog a přeskočení na vynikající návod Nifty Corners jsem se konečně dočkal.

Uvedená technika sice vyžaduje použití CSS i Javascriptu, ale funguje perfektně i ve starém šrotu jako je Internet Explorer 6. Podpora moderních prohlížečů (Firefox, Opera) je samozřejmostí.

form.png [2843 bytes]

Ukázka zdrojového kódu

<style type="text/css"> body{padding: 20px;background-color: #377CB1; font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif} h1,h2,p{margin: 0 10px} h1{font-size: 250%;color: #FFF} h2{font-size: 200%;color: #f0f0f0} p{padding-bottom:1em} h2{padding-top: 0.3em} div#nifty{ margin: 0 10%;background: #9BD1FA} </style> <link rel="stylesheet" type="text/css" href="niftyCorners.css"> <link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print"> <script type="text/javascript" src="nifty.js"></script> <script type="text/javascript"> window.onload=function(){ if(!NiftyCheck()) return; Rounded("div#nifty","#377CB1","#9BD1FA"); } </script> </head> <body>   <div id="nifty"> ...text... </div>

Zdroj: pro.html.it/esempio/nifty/nifty1js.html

Příklady ke stažení

Všechny příklady můžete stáhnout i z mého webu nifty.zip [37kB]

(‹Předchozí | Následující›)
Další články

Přidat komentář

:-D 8-) :-) ;-) :-o :-( :evil: :idea:

Pro příspěvky je vyžadována podpora obrázků

Pro ověření zde prosím napište text, který vidíte na obrázku

Re: Zaoblené rohy bez obrázků od f

27.03.2005 #

diky za radu

Re: Zaoblené rohy bez obrázků od Hellish

27.03.2005 #

Já tedy nevím, ale přijde mi to jako kanón na vrabce. Je to jistě nouzové řešení, pokud z nějakého důvodu není možné použít obrázky. Ale žádný takový důvod mě nenapadá.

Re: Zaoblené rohy bez obrázků od markon

27.03.2005 #

Problém s obrázky je, že se musí kreslit, otáčet atd. Tohle je i pro začátečníka snadné použít.

Re: Zaoblené rohy bez obrázků od Mortalis

27.03.2005 #

Diky za tip. Sice jsou ty obliny trochu zubate :-), ale porad je to mnohem elegantnejsi, nez tam cpat obrazky.

Re: Zaoblené rohy bez obrázků od Filosof

27.03.2005 #

Filův blog se dá i skloňovat.. :-)

Zvlastni od pako

05.04.2005 #

Me to funguje dobre, jen pokud uvnitr neni odkaz. Pokud tam je a ja nej najedu, zaobleni se mi rozsype na jednotlive carky...

Re: Zaoblené rohy bez obrázků od OK

11.02.2008 #

Dnes už to funguje i bez toho javascriptu - alespoň mě ... 8-)