Kulatý obrázek

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í?).

Ilustrační obrázek

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%}

Ilustrační obrázek

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}

Ukázka

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS mapa s popisky

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Kreslení v CSS

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře