Az új böngésző verziók már olyan különleges CSS tulajdonságokat is megtudnak jeleníteni, mint a különböző HTML elemek lekerekítése, vagy a színátmenetek megjelenítése. Ezek látványos elemek, amelyek egyedi megjelenést adnak a weboldalnak. A sarkok lekerekítése CSS-el nagyon egyszerű kóddal megoldható, és látványos az eredménye akár képeknél akár gomboknál vagy szövegdobozoknál használjuk. Érdemes egységes design-t kialakítani a sarkok lekerekítése közben.
Weboldal készítésnél gyakran használjuk a különböző CSS formázásokat, amelyek a weboldal megjelenését szabályozzák.
Sarkok lekerekítés CSS kódja
Először a sarkok lekerekítése CSS-el módját mutatom be, amely a border-radius tulajdonság.
A border-radius CSS kódja
Ennél a kódnál a terület mind a négy sarkának az értékét külön-külön meg tudjuk adni. Így akár eltérő vagy ellentétes formákat (ovális, ellipszis) is létre lehet hozni.
Ha mind a négy sarkot egyforma méretűre szeretnénk beállítani, akkor egyszerűbb, ha egy értékkel adjuk meg a lekerekítés értékét.
A rövidebb css kód
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Kör rajzolása CSS kóddal
Kört is tudunk rajzolni az alábbi módon:
border-radius: 225px 225px 225px 225px;
-moz-border-radius: 225px 225px 225px 225px;
-webkit-border-radius: 225px 225px 225px 225px;
Bővebb HTML és CSS információkat találsz a W3Schools css weboldalán.