Come creare una cornice ad una foto con i CSS
2 Commenti - Categoria: CSS
Creare una cornice alle foto è sempre oggetto di discussione nei vari forum di grafica e webdesign di tutto il mondo. Oggi voglio mostrarvi come ottenere un semplice ma efficace effetto cornice alle foto utilizzando soltanto alcune regole CSS all’interno di una classe.
Lo scopo di questo tutorial sarà quello di realizzare una cornicetta bianca con un bordino che ne idenfichi il perimetro e uno sfondo bianco che ci darà l’effetto cornice.
Il codice CSS per creare la cornice
.cornice{
padding:10px;
border:1px solid #999;
background-color:#FFF;
}
Ho realizzato la classe .cornice che dall’alto verso il basso definisce:
- 10px di padding su tutti e 4 i lati
- 1px di bordo di tipo solido di colore grigio
- sfondo bianco
A questo già completo effetto gli si può aggiungere un altro effetto sfrtuttando i CSS3 e la regola box-shadow, già vista in un precedente articolo, e trasformando la classe cosi:
.cornice{
padding:10px;
border:1px solid #999;
background-color:#FFF;
-moz-box-shadow:0 0 7px #333;
-webkit-box-shadow:0 0 7px #333;
}
Assegnate la classe a tute le vostre immagini per avere l’effetto! Ecco la differenza:
Foto senza alcun effetto
Foto con codice CSS ma senza CSS3
Foto con aggiunta di CSS3 non visibile su IE
Questo articolo è dedicato ad un mio corsista online di nome Fernando F. di Priverno (LT). 
Ruslan
Molto interessante,però mi potresti illuminare come faccio a fare la cornice trasparente?Se è possibile?
Andrea Leti
in che senso trasparente? si vedrebbe lo stesso il colore di sfondo…non credo sia un bell’effetto.
A meno che non crei un livello sopra l’altro giocando con lo z-index e il livello inferiore assume una opacità del 10/20%…
è una idea…