Skip to content

Instantly share code, notes, and snippets.

@grtner
Forked from daneden/dabblet.css
Created May 7, 2012 16:53
Show Gist options
  • Save grtner/2628928 to your computer and use it in GitHub Desktop.
Save grtner/2628928 to your computer and use it in GitHub Desktop.
Glossy overlay
/* Glossy overlay */
html {
min-height: 100%;
background: -webkit-linear-gradient(#000, #445);
}
figure {
width: 162px;
height: 162px;
margin: 24px auto;
position: relative;
box-shadow: 0 2px 5px rgba(0,0,0,.4);
border-radius: 5px;
}
figure img {
display: block;
border-radius: 5px;
}
figure:after {
position: absolute;
pointer-events: none;
content:'';
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 5px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,.4), rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 50%);
-webkit-mask-image: -webkit-linear-gradient(#000, transparent);
}
<figure><img src=http://placekitten.com/162></figure>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment