Immagini tonde con CSS3
Molto simpatico questo sistema (che ho rubato a digital inspiration) per realizzare immagini tonde.
L’idea è quella di inserire un ritratto, o qualunque altra immagine si desideri, all’interno di una cornice circolare, senza modificare l’immagine originale (che diamo per scontato sia quadrata).
Il codice è quello riportato qui di seguito, basta sostituire l’url dell’immagine con quella desiderata. Ottimo per ritratti, ad esempio per riportare l’immagine dell’autore di un articolo, o qualunque altro utilizzo la fantasia suggerisca.
Si può eventualmente giocare sugli attributi height e width della classe .circle per meglio adattarli all’immagine di cui si dispone.
<div style=”circle: url(‘http://upload.wikimedia.org/wikipedia/it/d/dd/JannacciClarkent.228-1-.jpg’)”>
</div>
<style>
.circle {
display: block;
width: 150px;
height: 150px;
margin: 1em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
border-radius: 99em;
border: 5px solid #eee;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
</style>
ciao, ma il codice va inserito nel foglio di stile? a me non funziona.
grazie!
chiara
ciao, nella forma indicata qui è da inserire direttamente nella pagina.
Con poche modifiche puoi adattarlo per inserirlo nel foglio di stile
ciao, grazie della risposta. ma io sono agli inizi. sto usando wordpress e non riesco ad utilizzare il codice. ti ringrazio per la disponibilità!
Se stai usando WordPress allora è decisamente opportuno inserirlo nel foglio di stile.
Solo come indicazione di massima, devi aggiungere nel foglio di stile del tema che stai usando il codice indicato, dandogli un nome, che poi userai quando vuoi applicare quello stile alla fotografia nel tag img.
So che detto così non è chiarissimo, ma in poche righe non è facile essere molto più precisi…