Marco Blog

Dnes pro vás mám dvě užitečné CSS třídy, které můžete s drobnými úpravami hromadně používat ve vašich projektech. Je určen hlavně do prostředí, kde nemůžeme spoléhat na podporu CSS3. Bez dalšího dlouhého vysvětlování... Chcete-li zaoblit rohy elementu o 1 pixel, přiřaďte mu třídu rounded-corner-1 , která je definována takto: . rounded-corner-1  {      display :  inline-block ;      background :  #fff ;      border-left :  1px  solid  #fff ;      border-right :  1px  solid  #fff ; } . rounded-corner-1 : before {      border-top :  1px  solid  #fff ;      padding-top :  1px ;      display :  block ;      content :  " " ;      position :  relative ;      top :  -1px ; } . rounded-corner-1 : after {      border-bottom :  1px  solid  #fff ;      padding-bottom :  1px ;      display :  block ;      content :  " " ;      position :  relative ;      top :  1px ; } Chcete-li zaoblit rohy elementu o 3 pixely, přiřaďte mu třídu  rounded-corner-3  ,

Možná jste někdy chtěli vytvořit webovou stránku rozvrženou do 3 sloupců . Na tom nic těžkého není. Možná jste však potřebovali, aby tato stránka neměla pevně zadané rozměry a mohla se tak roztahovat dle velikosti okna. Pokud ano, jistě oceníte následující poznatek. Zjednodušeně byste pravděpodobně měli HTML konstrukci typu: < div  id = "container">     < div  class = "third" >  Sloupec 1  </ div>     < div  class = "third">  Sloupec 2  </ div>     < div  class = "third">  Sloupec 3  </ div> </ div > a CSS : .container  {     width :  100% ; } . third  {      width :  33.3% ;      float :  left ; } Problém tohoto řešení je to, že se divy nikdy neroztáhnou přes celý obsah a vždy zde bude chybět jeden pixel úplně vpravo a to i v případě, že je šířka nadřazeného elementu dělitelná 3 beze zbytku. To je způsobeno nedostatečnou přesností  hodnoty 33.3 periodické. Pro div #containe