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

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 {
    displayinline-block;
    background#fff;
    border-left1px solid #fff;
    border-right1px solid #fff;
}

.rounded-corner-1:before{
    border-top1px solid #fff;
    padding-top1px;
    displayblock;
    content" ";
    positionrelative;
    top-1px;
}

.rounded-corner-1:after{
    border-bottom1px solid #fff;
    padding-bottom1px;
    displayblock;
    content" ";
    positionrelative;
    top1px;
}

Chcete-li zaoblit rohy elementu o 3 pixely, přiřaďte mu třídu rounded-corner-3 , která je definována takto:

.rounded-corner-3 {
    displayinline-block;
    background#fff;
    border-left2px solid #ddd;
    border-right2px solid #ddd;
    positionrelative;
    z-index2;
}

.rounded-corner-3:before{
    width100%;
    height100%;
    padding2px 0;
    border1px solid #ddd;
    border-left:0;
    border-right:0;
    displayblock;
    content" ";
    z-index-1;
    positionabsolute;
    top-2px;
    bottom0px;
}

.rounded-corner-3:after{
    width100%;
    height100%;
    border1px solid #ddd;
    border-left:0;
    border-right:0;
    padding2px 0;
    displayblock;
    content" ";
    z-index-1;
    positionabsolute;
    top-1px;
    left-1px;
    bottom0px;
}


Jak vidíte, zaoblení o 3px potřebuje trochu více kódu, ale výsledek stojí za to.

Demo pro 1px: http://jsfiddle.net/marakoss/FRsG6/

Obě verze fungují od IE8 (kvůli absenci podpory pseudoelementů :before a :after)

Doufám, že vám tento trik ušetří mnoho času.

Komentáře

Populární příspěvky z tohoto blogu

Jak vytáhnout zvuk z videa pomocí VLC? Návod

Tipy a Triky pro WDTV live

"Must Have" aplikace pro Mac OSX