Soluun pyöristetyt kulmat

Onnistuuko CSS:llä?

Onnistuuko css:llä saamaan soluun pyöristetyt kulmat vai pitääkö edelleen tehdä kuvalla?

8

1238

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • -Ridge-

      Nifty corners nimellä löytyy asiasta enemmän, joskus tuota kokeilinkin..





      Palstoitus

      body {
      background: #e6e6fa;
      margin: 10px;
      padding: 0px;
      }
      #container {
      width: 400px;
      height: 80%;
      position: absolute;
      left: 10px;
      top: 65px;
      }
      .first {
      position: absolute;
      top:41px;
      width: 100px;
      height: 100%;
      }
      .second {
      position: absolute;
      left:100px;
      top:41px;
      width: 300px;
      height: 100%;
      }
      ul {
      margin: 0px 0px 0px 25px;
      padding: 0px 0px 0px 0px;
      }
      div#nifty {
      margin: 0px 0px 0px 0px;
      background: #9BD1FA;
      width: 400px;
      }
      div#nifty_b {
      margin: 0px 0px 0px 0px;
      background: #9BD1FA;
      width: 90px;
      }
      div#nifty_c {
      margin: 0px 0px 0px 0px;
      background: #9BD1FA;
      width: 300px;
      }
      div#nifty_c p {
      margin: 10px;
      }
      div#nifty_c img {
      margin: 10px;
      }
      h1 {
      padding: 0px 0px 0px 10px;
      }
      b.rtop, b.rbottom {
      display:block;
      background: #e6e6fa}
      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
      }






      Otsikko









      linkki1
      linkki2
      linkki3
      linkki4











      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
      sed diam voluptua.

      At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

      • tuota

        Kiitos! Yritän tutkia tuota ajatuksen kanssa ja kokeilla!


    • nimetön.

      Firefoxilla onnistuu, kun pistät

      -moz-border-radius: 10;

      tai

      -moz-border-radius: 10 10 10 10;

      Luvut komennon perässä tarkoittavat neljän kulman kaaren sädettä. Siis mitä isompi luku, sitä isompi kaari. Ylimmäisessä se määrittelee kaikki kulmat samanlaisiksi, alimmaisessa kulmat voi määritellä erikseen.

      HUOM! Muistaakseni kulmien pyöristys näin ei vaikuta taustakuvaan, eli jos solussa on taustakuva, niin se "vuotaa" reunaviivan ali neliskanttisena.

      Kulmat ovat Firefox 2:ssa vielä pehmentämättömät, mutta tulevassa Firefox 3:ssa reunojen pehmennys jo löytyy.

      http://www.css3.info/preview/rounded-border.html

      Internet Explorerissa tätä ominaisuutta ei ole, joten siinä katsoen kulmat ovat neliskanttiset. Tämä on monien mielestä ihan OK, eli neliskanttiset reunat eivät haittaa, mutta Firefoxin käyttäjät saavat ekstraa.

      Muilla menetelmillä pyöristettyjen kulmien teko menee melkoiseksi kikkailuksi.

    • karvainen pappi

      Solua et pysty pyöristämään mutta kuva/kuvat/värikenttä sen sisällä. Solu on aina neliskulmanen.

    • toimeton sekatyömies
      • Höpö.

        Pikavilkaisu koodiin sen jo paljastaa.


      • päivän toivotut
        Höpö. kirjoitti:

        Pikavilkaisu koodiin sen jo paljastaa.

        Onhan google ystäväsi vai... yritin auttaa mut voit itse jatkaa etsimistä. Et taida lötää ilman kuvia mistään kyl niin on totuus. Solu on aina neliskulmanen vaika sitä yrittävät muokata. Kuvat ei. En ole nähnyt netissä pyöreitä soluja missään


      • Höpö.
        päivän toivotut kirjoitti:

        Onhan google ystäväsi vai... yritin auttaa mut voit itse jatkaa etsimistä. Et taida lötää ilman kuvia mistään kyl niin on totuus. Solu on aina neliskulmanen vaika sitä yrittävät muokata. Kuvat ei. En ole nähnyt netissä pyöreitä soluja missään

        Ihan hyvä linkki tuo oli, en minä sillä. Mutta kun linkkaaja väitti ettei se ole kuvilla teteutettu niin siitä vähän kitisin. Ja siis eihän kuvilla toteutetussa mitään vikaa ole, mutta silloin ei voi sanoa etteikö kuvia olisi käytetty.


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Persujen mukaan rasismi on huumoria

      Vaan kun koomikko kutsui Halla-ahoa fasistiksi, niin piti haastaa oikeuteen. Mihin se huumorinitaju yhtäkkiä hävisi? ⠀
      Maailman menoa
      112
      4498
    2. BOIKOTOIN - Ei mitään Suomi.fi postilaatikoita käyttöön

      Ainakaan minulle! Vai että pitäisi alkaa siellä käyädä katselemassa tammikuusta 2026 siis periaatteessa päivittäin että
      Maailman menoa
      200
      3717
    3. 202
      3011
    4. Lasse Lehtonen vaatii persuja pyytämään anteeksi aasialaisilta

      Persut ova romahduttaneet Suomen maakuvan parissa päivässä negatiiviseksi rasismillaan ja se alkaa vaikuttamaan jo Suome
      Maailman menoa
      77
      2872
    5. Hallitus on kaadettava ja Orpon on erottava

      Mikään muu hallitus ei ole oman elämäni aikana tuhonnut näin paljon tämän maan taloutta ja työllisyyttä sekä suomen main
      Maailman menoa
      60
      2747
    6. Lasse Lehtonen palasi ambulanssilennolla Suomeen

      Nyt on syytä lopettaa irvailu.
      Maailman menoa
      84
      1421
    7. 60
      1266
    8. Aitolehti Capital

      HehkuB on myynnissä, kovalla työllä saavutettu unelma joka sekin lässähti kuten kaikki mihin ryhtyy! Nyt Sewen asialle
      Kotimaiset julkkisjuorut
      238
      1092
    9. Missä kuussa

      Rakkaasi on syntynyt?
      Ikävä
      61
      1006
    10. MOT: Työmarkkinatori on olemattomien työpaikkojen hakupaikka

      Työpaikkojen tietoja ei tarkisteta, ja ainakin noin noin 10% on olemattomia työpaikkoja ja sen lisäksi eri rekryfirmat t
      Maailman menoa
      120
      1003
    Aihe