Příspěvky

Zobrazují se příspěvky z duben, 2011

CSS trik: Zaoblení rohů elementu o 1px a 3px bez použití obrázků

Obrázek
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;
}

CSS Tip: 33% šířky elementu

Obrázek
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 </