Oldal: 1 / 4 123 ... UtolsóUtolsó
Eredmény: 1 - 10 (35) összesen

Téma: Lekerekített sarkú div-ek

  1. #1
    Új tag
    Csatlakozott
    10-10-20
    Hozzászólás
    15
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás 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?



  2. #2
    Bölcs
    Csatlakozott
    10-01-15
    Hely
    Győr
    Hozzászólás
    589
    Begyűjtött 32 köszönetet
    30 hozzászólásával

    Alapbeállítás 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.


    Utoljára módosítva: scs által : 2010-10-23 18:10

  3. #3
    Új tag
    Csatlakozott
    10-10-20
    Hozzászólás
    15
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Lekerekített sarkú div-ek

    Idézet dragon1993 eredeti hozzászólása Hozzászólás megtekintése
    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.



  4. #4
    Bölcs
    Csatlakozott
    09-12-31
    Hozzászólás
    620
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Lekerekített sarkú div-ek

    Idézet Burnee eredeti hozzászólása Hozzászólás megtekintése
    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



  5. #5
    Új tag
    Csatlakozott
    10-10-20
    Hozzászólás
    15
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Lekerekített sarkú div-ek

    Idézet Sapipeti eredeti hozzászólása Hozzászólás megtekintése
    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>




  6. #6
    Bölcs Harder logója
    Csatlakozott
    07-05-05
    Hely
    Budapest
    Hozzászólás
    1.874
    Begyűjtött 169 köszönetet
    110 hozzászólásával

    Alapbeállítás 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.



  7. #7
    Új tag Norek logója
    Csatlakozott
    08-05-25
    Hely
    Miskolc (Nyékládháza)
    Hozzászólás
    36
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás 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.



  8. #8
    Új tag
    Csatlakozott
    10-10-20
    Hozzászólás
    15
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Lekerekített sarkú div-ek

    Idézet Norek eredeti hozzászólása Hozzászólás megtekintése
    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.



  9. #9
    Bölcs
    Csatlakozott
    08-01-02
    Hozzászólás
    1.271
    Begyűjtött 82 köszönetet
    53 hozzászólásával

    Alapbeállítás re: Lekerekített sarkú div-ek

    Idézet Burnee eredeti hozzászólása Hozzászólás megtekintése
    Jelenleg nekem is ez a legjobb ötletem, de ennél elegánsabbat szeretnék.
    Talán ez:
    http://fetchak.com/ie-css3/



  10. #10
    Bölcs
    Csatlakozott
    08-01-02
    Hozzászólás
    1.271
    Begyűjtött 82 köszönetet
    53 hozzászólásával

    Alapbeállítás re: Lekerekített sarkú div-ek

    Idézet Harder eredeti hozzászólása Hozzászólás megtekintése
    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.



Oldal: 1 / 4 123 ... UtolsóUtolsó

A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •