Soluun pyöristetyt kulmat

Onnistuuko CSS:llä?

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

8

1153

    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. Ensitreffit Jenni laukoo viinilasin ääressä suorat sanat Jyrkin aikeista: "Mä sanoin, että älä"

      Voi ei… Mitä luulet: kestääkö Jennin ja Jyrkin avioliitto vai päättyykö eroon? Lue lisää: https://www.suomi24.fi/viihde
      Ensitreffit alttarilla
      27
      2870
    2. Ymmärrän paremmin kuin koskaan

      Roikut kädessäni ja vedät puoleesi. Näen kuitenkin tämän kaiken lävitse ja kaikkien takia minun on tehtävä tämä. Päästän
      Tunteet
      33
      2525
    3. 148
      2274
    4. Hullu liikenteessä?

      Mikä hullu pyörii kylillä jos jahti päällä? Näitä tosin kyllä riittää tällä kylällä.
      Kiuruvesi
      54
      2239
    5. Niina Lahtinen uudessa elämäntilanteessa - Kotiolot ovat muuttuneet merkittävästi: "Nyt on...!"

      Niina, tanssejasi on riemukasta seurata, iso kiitos! Lue Niinan haastattelu: https://www.suomi24.fi/viihde/niina-lahti
      Suomalaiset julkkikset
      24
      1860
    6. Kun Venäjä on tasannut tilit Ukrainan kanssa, onko Suomi seuraava?

      Mitä mieltä olette, onko Suomi seuraava, jonka kanssa Venäjä tasaa tilit? Ja voisiko sitä mitenkään estää? Esimerkiks
      NATO
      390
      1696
    7. Ano Turtiainen saa syytteet kansankiihoituksesta

      Syytteitä on kolme ja niissä on kyse kirjoituksista, jotka hän on kansanedustaja-aikanaan julkaissut Twitter-tilillään
      Maailman menoa
      104
      1642
    8. Pyhäinpäivän aamua

      Oikein hyvää huomenta ja rauhallista päivää. ❄️😊🥱☕❤️
      Ikävä
      309
      1548
    9. Kunta ostaa kivitipun

      Kunnanjohtajan tuleva uusi ostokohde
      Lappajärvi
      135
      1459
    10. Varokaa! Lunta voi sataa kohta!

      Vakava säävaroitus Lumisadevaroitus Satakunta, Uusimaa, Etelä-Karjala, Keski-Suomi, Etelä-Savo, Etelä-Pohjanmaa, Pohjanm
      Maailman menoa
      13
      1446
    Aihe