Lekerekített sarkú div-ek
Sziasztok!
Elegáns, kényelmesen kezelhető és böngészőfüggetlen(!) megoldást keresek html és css (esetleg javascript - framework is) felhasználásával, arra hogy a div-ek sarkai lekerekítetten jelenjenek meg.
- a háttérszín/kép is csak a lekerekítésig töltse ki a div-et
- a div mérete dinamikus(!)
- a div-nek lehessen keretet adni (nem feltétlen style="border:..."), ami szintén a lekerekített vonalat követi
A '-moz-border-radius'-hoz hasonló -böngészőfüggetlen- megoldás lenne a legideálisabb.
Ötlet?
re: Lekerekített sarkú div-ek
Nekem ezt haverom csinálta wii.webkaloz.info css-el és kép keverékel és legjobb tudomásom szerint böngésző független.
re: Lekerekített sarkú div-ek
Idézet:
dragon1993 eredeti hozzászólása
Nekem ezt haverom csinálta...
Köszi, de sajnos ez abszolút nem az, amit én keresek. Ebben van egy kép, ami lekerekítettre van rajzolva és ennyi.
Egyedi megoldásokra ez tökéletes, de ahol dinamikus a tartalom és ezáltal a div mérete is, már használhatatlan.
re: Lekerekített sarkú div-ek
Idézet:
Burnee eredeti hozzászólása
Köszi, de sajnos ez abszolút nem az, amit én keresek. Ebben van egy kép, ami lekerekítettre van rajzolva és ennyi.
Egyedi megoldásokra ez tökéletes, de ahol dinamikus a tartalom és ezáltal a div mérete is, már használhatatlan.
Táblázattal és képekkel meg tudod oldani:
sarok keret sarok
keret tartalom keret
sarok keret sarok
re: Lekerekített sarkú div-ek
Idézet:
Sapipeti eredeti hozzászólása
Táblázattal és képekkel meg tudod oldani:
sarok keret sarok
keret tartalom keret
sarok keret sarok
Jelenleg nekem is ez a legjobb ötletem, de ennél elegánsabbat szeretnék.
Valami olyasmit, mint ez:
HTML kód:
<html>
<head>
<style type="text/css">
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
.rs1{margin: 0 2px}
.rs2{margin: 0 1px}
div.container{ margin: 0 10%;background: #9BD1FA}
</style>
</head>
<body>
<div class="container">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<h1 align="center">Hi!</h1>
<p>This is an implementation of the Nifty Corners With big corners.</p>
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>
<br /><br />
<div class="container">
<b class="rtop">
<b class="rs1"></b> <b class="rs2"></b>
</b>
<h1 align="center">Hi!</h1>
<p>This is an implementation of the Nifty Corners With small corners.</p>
<b class="rbottom">
<b class="rs2"></b> <b class="rs1"></b>
</b>
</div>
</body>
</html>
re: Lekerekített sarkú div-ek
A hxxp://www.curvycorners.net/ megoldását találtuk kollegáimmal a legjobbnak, elég sok ilyet végignéztünk már.
re: Lekerekített sarkú div-ek
Kód:
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
Ezt a hármat szoktam egyszerre használni. Ezek együttesen lefedik a normálisabb böngészőket, viszont internet explorer különböző verzióiban nem nagyon tesztelgettem még. A 6-ban biztos hogy nem jó, az újabbaknál már esélyes.
re: Lekerekített sarkú div-ek
Idézet:
Norek eredeti hozzászólása
Kód:
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
Ezt a hármat szoktam egyszerre használni. Ezek együttesen lefedik a normálisabb böngészőket, viszont internet explorer különböző verzióiban nem nagyon tesztelgettem még. A 6-ban biztos hogy nem jó, az újabbaknál már esélyes.
Ezt én is teszteltem, sajnos IE 8-ban sem működik.
re: Lekerekített sarkú div-ek
Idézet:
Burnee eredeti hozzászólása
Jelenleg nekem is ez a legjobb ötletem, de ennél elegánsabbat szeretnék.
Talán ez:
http://fetchak.com/ie-css3/
re: Lekerekített sarkú div-ek
Idézet:
Harder eredeti hozzászólása
A hxxp://www.curvycorners.net/ megoldását találtuk kollegáimmal a legjobbnak, elég sok ilyet végignéztünk már.
Ebben IE és Opera support nincs. Nálam legalábbis minden szögletes.