Ebben a leírásban megmutatom, hogyan is lehet csinálni egy lekerekített sarkú táblát, vagy cellát, vagy bármit.

Sokan láttunk már olyan oldalt, ahol voltak lekerekített formák. Régebben ezeket még csak képekkel tudták megoldani, ami időigényes, és türelemjáték volt. Mostanába már lehetőség vált arra, hogy csak pár sor beírással lekerekítsünk, mindent, amit szeretnénk, itt gondoljunk a táblákra, cellákra, gombokra, bevételi mezőkre, divek-re stb.

Most, hogy már megjelent a CSS3 az Internet Expoler megint játsza az emberrel a "hülyét", hiszen nagyon nem szeretne semmit se lekerekíteni, lassan már valamit tehetnének ezzel a böngészővel, ezzel ellentétben a többi böngésző egyszerűen lekezeli a dolgokat, és csinálja is a dolgát.

Na, de lássuk miről is van szó. Kerekítünk egy egyszerű css-vel:

1
2
3

div {
 border-radius: 15px;
}

Ennyire egyszerű a scriptünk, ugyan ezzel mindenhol lekerekítjük a mi kis művünket 15 pixellel. Erre is van megoldás, hogy csak bizonyos részeket kerekítsünk le:

1
2
3
4
5
6

div {
 border-radius-topleft: 15px;
 border-radius-topright: 15px;
 border-radius-bottomright: 15px;
 border-radius-bottomleft: 15px;
}

Értelemszerűen mindent kilehet ebből olvasni, Topleft(Bal felső sarok), Topright(Jobb felső sarok), Bottomright(Jobb alsó sarok) és Bottomleft(Bal alsó sarok). Ezzel meg is van oldva a munka. Ja, de mivan akkor, ha nem ismeri fel, pl: a firefox? Hát erre nagyon pici az esély, de erre is gondoltak az alkotók.

1
2
3
4
5
6

div {
 -moz-border-radius-topleft: 15px;
 -moz-border-radius-topright: 15px;
 -moz-border-radius-bottomright: 15px;
 -moz-border-radius-bottomleft: 15px;
}

Egy egyszerű kis moz- előjáróval megoldva, de még van sok más böngésző is. Mindegyiknek van valószínűleg megoldása, de mindegyiknek nem tudtam utána járni. Csak a "webkit"-es formának:

1
2
3
4
5
6

div {
 -webkit-border-top-left-radius: 15px;
 -webkit-border-top-right-radius: 15px;
 -webkit-border-bottom-left-radius: 15px;
 -webkit-border-bottom-right-radius: 15px;
}

Remélem ezzel sikerült egy egyszerűbb megoldást mutattnom nektek. Nekem hasznos volt!

Szerző: iNferNaL Hozzászólások(0)