PHP-Script.hu
Kiemelt hirdetés:
2018. június 24. 14:34 vasárnap, ma Iván névnap van


grafika


Videóbázis


Kategória: HTML, CSS
Kerekített sarkú doboz
2011.07.18. 15:25

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ő: useriNferNaL Hozzászólások(0) Hozzászólások Megosztás az iWiW-en Megosztás az Facebook-on Megosztás a Google Reader-ben Megosztás az Twitter-en 

Listázás:  Idő szerint:
Webprogramozás arr HTML, CSS info Kerekített sarkú doboz

Ebbe a topikba még nem érkezett hozzászólás.

Listázás:  Idő szerint:


© 2006-2018 PHP-Script.hu, Minden jog fenntartva!
Design: Rácz Gergely, Oldalmotor: Rácz Gergely
Impresszum - Oldaltörténet - Oldalszabályzat