Ahoj, vypadá to, že používáte AdBlock... :-)

Usilovně jsme pracovali na zakomponování reklamy, aby nebyla pro čtenáře rušivá. Příjmy z reklam tento web živí, bez nich bychom jej nemohli provozovat. Budeme moc rádi, když to s námi zkusíte a přidáte si nás do výjimek. Děkujeme!

MENU

Zakulacené rohy pomocí border-radius

Border-radius je nová funkce, kterou přináší CSS3, díky níž můžeme jednoduše vytvořit zakulacené okraje u rámečků. Konečně tak můžeme upustit od zastaralých a neefektivních jiných řešení. Tím myslím formou obrázku, ať už normálně 4mi obrázky, nebo pomocí CSS Sprite v obrázku jednom. Další možností bylo využití javaScriptu. Nyní toto vše ale už není potřeba. Vystačíme si s pár řádky v CSS.

Podpora prohlížečů

– border-radius je momentálně asi jedena z nejlépe podporovaných vlastností z CSS3, i když… Microsoft s IE, co si budeme povídat, opět trochu zaspal dobu

Prohlížeč Podpora od verze
IE 9+
Firefox 4+
Chrome Od nepaměti
Safari 5+
Opera Od nepaměti

Jak vidíme na obrázku, u border-radius můžeme nastavit poloměr zakulacení u všech 4 rohů podle libosti, dokonce se dá měnit i barva nebo styl rámečku stejně jako u starého, známého border

Jak na to:

Dejme tomu, že máte nějaký div se třídou rounded-corners a chcete, aby měl zakulacené rohy.

HTML

<div class="rounded-corners">Text...</div>

CSS část pak tedy může vypadat nějak takto:

.rounded-corners {
border-radius: 10px 30px 20px 60px; //levá_horní pravá_horní pravá_dolní levá_dolní
border: 2px solid #a1a1a1; //zadáváte pokud chcete barvu a šířku rámečku
}

 

VYZKOUŠEJTE TAKÉ NÁŠ GENERÁTOR ZAKULACENÝCH ROHŮ!

najdete jej na adrese: http://border-radius.pcdays.cz/

Written by:

Published on: 30.10.2012

Filled Under: Hlavní strana, Vývoj webu