Uso di Pseudo-elementi :before e :after di CSS per personalizzare una immagine

Creare una cornice è abbastanza facile. Basterebbe utilizzare la proprieta border. Oggi invece vediamo come posiamo decorarla con pseudo-elementi :before e :after di CSS attraverso due esempi . Per primo vediamo di realizzare una cornice intorno ad una immagine per transformarla in un vero quadro da parete . Ma nello stesso tempo vediamo di fare un bordo doppio e quello secondo ruotare un può, cosi creeremo un effetto semplice ma nello stesso momento insolito.

E l'altra cornice sara un puo di piu  complicata nela sua realizzazione ma nello stesso tempo piu interesante

La cornice inclinata con :before e :after di CSS.

Come creare una cornice ad una foto coi css

Come potrete capire dal codice css utilizeremo la tecnica abbastanza semplice. Per primo creeremo un elemento con cornice in forma di outline( proprieta css chi non sa )  con la posizione relativa(posizionamento relativo e assoluto nei css) rispetto il resto della pagina e puoi al interno di questo blocco inseriremo la nostra immagine e un aaltro blocco ma con la posizione assoluta rispetto il primo elemento con outline

<style>
.frame1 {
position: relative; /* posizionamento relativo della nostra cornice */
display: inline-block; /* Largezza del blocco è uguale alla larghezza della immagine */
margin: 10px; /* Creeremo lo spazio intorno alla immagine */
padding: 4px; /* Lo spessore dello spazio al interno */
outline: 1px solid #fff; /* Bordo bianco intorno al blocco */
}
.frame1 img {
display: block; /* Eliminiamo lo spazzio sotto l'immagine */
}
.frame1::after {
content: '';
position: absolute; /* posizionamento assoluto per cornice */
left: -2px; top: -2px; /* Spostare a sinistra e in alto */
width: 100%; height: 100%; /* Larghezza e lunghezza e uguale al genitore */
z-index: -1; /* Posizioniamo sotto la nostra immagine */
transform: rotate(-7deg); /*ruotiamo la nostra cornice */
}
.frame1, .frame1::after {
background: #dad6cf; /* colore del fondo*/
border: 2px solid #c2b59d; /* parametri della cornice */
}
</style>
<div class="frame1"><img class="id3" src="/la nostra immagine" alt=""></div>

La cornice nella cornice con un altra immagine sopra .

Ora  vediamo un effetto un po diverso e complicato perche  vediamo di ruotare non solo la cornice ma deformare anche l'immagine e puoi utilizeremo un altra immagine posizionata sopra il nostro quadro  .

Come creare una cornice

 

Per capire bene il concetto di questa cornice vi consiglio di approfondire le vostre conoscenze dei CSS

<style>
.d1{
margin-left: 100px;
width: 350px;
height: 400px;
border: 10px solid #C2B59C;
position: relative;
margin-top: 50px;
z-index: 50;
background: white;
}
.d2{
width: 100%;
height: 100%;
border: 6px solid #D9D6CF;
position: absolute;
top: -6px;
left:-5px;
background: white;
}
.d11{
margin-left: 110px;
margin-top: 55px;
width: 350px;
height: 400px;
border: 10px solid #C2B59C;
position: absolute;
top: -4px;
left:-2px;
z-index: 0;
transform: rotate(-3deg);
}
.d22{
width: 100%;
height: 100%;
border: 6px solid #D9D6CF;
position: absolute;
top: -6px;
left:-5px;
}
.d3{
width:260px;
height: 260px;
background: url(la nostra immagine di sfondo );
background-size: cover;
margin: 40px 25px;
border: 5px solid #e3e3e3;
border-radius: 5px;
box-shadow: 1px 1px 10px silver;
transform: perspective(150px) rotate3d(180,-45,-255,15deg);
z-index: 100;
}
.d33{
width:220px;
height: 220px;
background: url(la nostra immagine di sfondo );
position: absolute;
z-index: 0;
background-size: cover;
margin: 115px 35px;
border: 5px solid #e3e3e3;
border-radius: 5px;
box-shadow: 1px 1px 10px silver;
transform: perspective(150px) rotate(65deg);
}
img.prova{
position: absolute;
width: 156px;
height: 250px;
z-index: 999;
left: 200px;
top:110px;
transform: rotate(-10deg);
</style>
 
<div class="d1">
<div class="d2">
<img class="prova" src="/ immagine posizionata sopra " alt="">
<div class="d33"></div>
<div class="d3">
</div>
</div>
</div>
<div class="d11">
<div class="d22"></div>
</div>

Letto 422 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso