Skip to content

Instantly share code, notes, and snippets.

@LibertysYarn
Created May 27, 2013 02:34
Show Gist options
  • Save LibertysYarn/5654908 to your computer and use it in GitHub Desktop.
Save LibertysYarn/5654908 to your computer and use it in GitHub Desktop.
Retro image effect - from line25.com
<div class="retro">
<img src="images/retrofy-me.jpg" alt="Retro is cool!" />
</div>
.retro {
-webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
display: table;
}
.retro img {
-webkit-filter: sepia(20%) brightness(10%) contrast(130%);
position: relative; z-index: -1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment