Lekerekített sarkok IE9-ben - CSS3

Weboldalakon sokáig nem volt egyszerű lekerekített sarkú tarületeket definiálni - pedig igény az lett volna rá. Ezért több tucat módja alakult ki annak, hogyan lehet hasonló hatást kelteni. Az IE9-ben implementált CSS3 border-radius megjelenésével ennek vége! Mostantól nagyon egyszerű tényleg lekerekített sarkokat definiálni, ráadásul szabványosan.

ie9-logo-rounded

A fentebb látható lekerekített sarkú kép valójában egy lekerekített sarkú div, háttérképpel (illetve egy screenshot róla).

Kiindulókód - még szögletes sarkokkal

A kiinduló kód valami ilyesmi:

DOCTYPE html>
<html>
  <head>
    <title>Lekerekített sarkoktitle>
    <link rel="stylesheet" type="text/css" href="style.css" />
  head>
  <body>
    <div class="wrapper"> 
    div>
  body>
html>

és:

.wrapper
{
  width : 550px;
  height : 118px;
  overflow : hidden;
  background-image : url(hatter.jpg);
  border : 0px solid transparent;
}

Ez egy sima szögletes div, a szögletes háttérképpel:

ie9-logo-nonrounded

A sarkok lekerekítése

A sarkokat a CSS3-ban definiált border-radius css elemmel lehet megadni. Mi a .wrapper osztályú diven állítjuk be ezt a tulajdonságot, mégpedig 25 pixelre. Így a div sarkai egy 25 pixel sugarú körív vonalát fogják felvenni:

.wrapper
{
  width : 550px;
  height : 118px;
  overflow : hidden;
  background-image : url(hatter.jpg);
  border : 0px solid transparent;
  
  border-radius: 25px;
}

Ezután a div szép lekerekített sarkokkal jelenik meg IE9-ben.

Nem CSS3 kompatibilis böngészők

Nem minden böngésző CSS3 kompatibilis még, vagy nem teljesen. De sok böngésző tudja a lekerekített sarkokat, csak valamilyen más, saját tulajdonságnevet használ a megadására. Amint ezekből a böngészőkből kijött/kijön az az újabb verzió, mely a szabványos nevet támogatja, figyelmen kívül fogják hagyni a nem szabványos nevű beállítást.

Hogy a lekerekített sarkok fierfoxban és chromeban is jól jelenjenek meg,érdemes a CSS további apró bővítése:

.wrapper
{
  width : 550px;
  height : 118px;
  overflow : hidden;
  background-image : url(hatter.jpg);
  border : 0px solid transparent;

  /* szabvanyos (IE9) */
  border-radius: 25px;
  /* firefox */
  -moz-border-radius: 25px;
  /* chrome */
  -webkit-border-raidus: 25px;
}

Ezzel gyakorlatilag a böngészők nagy többségével kompatibilis kódot készítettünk:

ie9-logo-rounded

Dávid Zoltán

Dávid Zoltán Mérnök Informatikusként végeztem a BME-n, jelenleg webfejlesztéssel és gépi tanulással foglalkozom.
2010.11.12. 0:00:00 | Permalink | Hozzászólások: 0 | Tárgyszavak: ,


  • Jogosultságosztás ACL-lel

    Balássy György (MS RD, ASP.NET MVP, MCTS) Előzmény: telepítő alkalmazás jól működik angol Windowson, elszáll magyaron. Vajon mi lehet az oka? Némi búvárkodás után egyáltalán nem meglepő eredményre jutottam: a Felhasználók. Tovább »

  • Kritikus 0day ASP.NET sebezhetőség és gyors védekezés

    Balássy György (MS RD, ASP.NET MVP, MCTS) Ahogy korábban már írtam róla, két hacker elég komoly hibát fedezett fel, amely az ASP.NET-es alkalmazások által használt titkosítást érinti. Sajnos a sebezhetőség részleteit csak pénteken hozták nyilvánosságra, ráadásul egy kész eszközt is közreadtak a kihasználására, sőt előtte a Microsofttal sem közölték a pontos módszert, így most a rossz fiúknak két teljes napjuk van, mielőtt a legtöbb webhely gazdája észbe kap (micsoda “véletlen” időzítés). Fontos, hogy a hiba alapvetően az összes ASP.NET-es webhelyet érinti, legyen az egyedi fejlesztésű, vagy kész rendszer, DotNetNuke vagy SharePoint ugyanúgy borulhat. Az üzemeltetőknek gyorsan kell lépniük! Tovább »


Írja meg Ön is véleményét!


Hozzászólásokat csak regisztrált, bejelentkezett felhasználóktól tudunk elfogadni!

Hozzászólások