Ci sono un mucchio di effetti che possiamo applicare alle nostre foto per renderle più piacevoli o per attirare l’attenzione del visitatore.
Tra questi, uno dei più interessanti è l’effetto “vignette”:
consiste nel rendere più scuri gli angoli dell’immagine, molto spesso, per dare risalto alla sua parte centrale.
In questo tutorial voglio rendervi partecipi del “vignetting” tramite CSS.
Si tratta di sfruttare la proprietà “box-shadow”.
Normalmente la usiamo per applicare delle ombre esterne ma utilizzando il suffisso “inset“ daremo all’elemento un’ombra interna.
Questo effetto, se applicato con parsimonia e quando l’immagine lo merita, può rendere più piacevole una fotografia.
Ecco come si realizza:
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vignette Effect</title> <link rel="stylesheet" href="css/style.css"> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> </head> <body> <div id="mainContent"> <div class="headline"> <h2>Effetto Vignette</h2> </div> <div class="description"> <p>L'effetto vignette può rendere esaltanti le nostre foto, magari per presentare un portfolio dei nostri lavori più interessanti.</p> </div> <div id="vignette"> </div> </div> </body> </html>
Il CSS:
#mainContent {
width: 90%;
text-align: center;
margin: auto;
}
body {
font-family: 'Roboto', sans-serif;
background: #cecece;
background: -moz-linear-gradient(top, #cecece 0%, #848484 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cecece), color-stop(100%,#848484)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cecece 0%,#848484 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cecece 0%,#848484 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cecece 0%,#848484 100%); /* IE10+ */
background: linear-gradient(to bottom, #cecece 0%,#848484 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#848484',GradientType=0 ); /* IE6-9 */
}
#mainContent h2 {
font-size: 42px;
color: rgba(0, 0, 0, 0.5);
display: inline-block;
border-bottom: 1px solid #eee;
}
#vignette {
position: relative;
height: 400px;
display: block;
background-image: url('../img/cup.jpg');
background-size: cover;
width: 50%;
margin: 200px auto;
}
#vignette:after {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
box-shadow: inset 0px 0px 150px black; /* provate a modificare questi valori per provare nuovi effetti :); */
}
#vignette:hover:after {
box-shadow: none;
}
Date uno sguardo a questo esempio su Codepen e provate a modificarlo cambiando i valori della proprietà box-shadow.
See the Pen CSS Vignette Effect by Eugenio (@rupertone) on CodePen.0
Alla prossima 🙂
Ciao Eugenio,
ottimo uso del “box-shadow” e ottimo esempio!
Grazie a Css3 le opportunità per i creativi si sono moltiplicate!
Grazie per la lettura.
Grazie Samuele, sono molto contento che ti sia piaciuto 🙂