Skip to content

Instantly share code, notes, and snippets.

@richard512
Last active September 7, 2015 13:11
Show Gist options
  • Save richard512/1440af1d17d5f3b7290f to your computer and use it in GitHub Desktop.
Save richard512/1440af1d17d5f3b7290f to your computer and use it in GitHub Desktop.
Make a Vignette with CCS3
.vignette {
-webkit-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
box-shadow: inset 0px 0px 85px rgba(0,0,0,0.4);
line-height: 0; /* ensure no space between bottom */
display: inline-block; /* don't go wider than image */
}
.vignette img {
position: relative;
z-index: -1; /* position beneath */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment