Kruhový obrázek
Různé možnosti vytvoření kruhového obrázku.
Někdy se může hodit mít na stránce obrázek kulatý, jaké existují možnosti?
Překreslení v grafickém editoru
Nejtrivialnější možnost je obrázek překreslit. Problém je, že to není moc universální (co až nebude kulatý vzhled žádoucí?).
Kulaté okraje (border-radius
)
Od Internet Exploreru 9 lze použít CSS vlastnost border-radius
. Stačí ji nastavit buď v polovině šířky obrázku, nebo jako 50 %.
#obrazek {border-radius: 50%}
Překrytí obrázekm
Pro starší prohlížeče je funkční řešení vytvořit obrázek s průhledným kruhem unitř a původní obrázek takto překrýt.
HTML
<div class='prekryti'>
<span></span>
<img src='obrazek.png' width=100 height=100>
</div>
CSS
img {display: block;}
.prekryti {position: relative;}
.prekryti span {background: url(prekryt.png); width: 100px; height: 100px; position: absolute}
Komentáře