Skip to content

Instantly share code, notes, and snippets.

@jordandobson
Created November 25, 2010 09:28
Show Gist options
  • Save jordandobson/715124 to your computer and use it in GitHub Desktop.
Save jordandobson/715124 to your computer and use it in GitHub Desktop.
Examples of adding a Vignette to Photos with CSS3 Gradients. Code sampled from: http://cl.ly/3Nxc
/* Border & Vignette Setup */
figure{
position: relative;
display: block;
line-height: 0;
width: 500px;
height: 333px;
margin-bottom: 2em;
border: 1em solid #fff;
-webkit-box-shadow: 0 .1em .3em rgba(0,0,0,.25);
-moz-box-shadow: 0 .1em .3em rgba(0,0,0,.25);
}
figure::before{
content: "";
position: absolute;
top: -1em;
bottom: -1em;
left: -1em;
right: -1em;
}
figure::before,
figure img{
outline: 1px solid #ccc;
}
figure.vignette img{
z-index: 1;
position: relative;
display: block;
width: 100%;
height: 100%;
}
/* Overlay Method */
figure.overlay::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
z-index: 2;
pointer-events: none; /* "all" disables mouse access to image */
/* Mozilla Setting */
background-image: -moz-radial-gradient(
center, circle contain, rgba(0,0,0,0) 125px, rgba(0,0,0,.5) 250px
);
/* Webkit Setting */
background-image: -webkit-gradient(
radial, 50% 50%, 125, 50% 50%, 250, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))
);
}
/* Overlay & Inset Method */
figure.overlay.inset::after{
/* Mozilla Settings */
-moz-box-shadow: inset 0 0 150px rgba(0,0,0,.75);
/* Webkit Setting */
-webkit-box-shadow: inset 0 0 150px rgba(0,0,0,.75);
}
/* Mask Method */
figure.mask{
background-color: #000;
}
figure.mask img{
-webkit-mask-box-image: -webkit-gradient(
radial, 50% 50%, 125, 50% 50%, 250, from(#fff), to(rgba(0,0,0,.33))
);
}
<h2>Original</h2>
<figure>
<img src="http://farm5.static.flickr.com/4154/5176805856_17bef58c00.jpg" />
</figure>
<h2>Overlay Vignette Method</h2>
<figure class="vignette overlay">
<img src="http://farm5.static.flickr.com/4154/5176805856_17bef58c00.jpg" />
</figure>
<h2>Overlay Vignette &amp; Inset Shadow Method</h2>
<figure class="vignette overlay inset">
<img src="http://farm5.static.flickr.com/4154/5176805856_17bef58c00.jpg" />
</figure>
<h2>Mask Vignette Method <small>for Webkit Only</small></h2>
<figure class="vignette mask">
<img src="http://farm5.static.flickr.com/4154/5176805856_17bef58c00.jpg" />
</figure>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment