Skip to content

Instantly share code, notes, and snippets.

@krishna2nd

krishna2nd/dabblet.css

Forked from htmlr/dabblet.css
Created July 18, 2018 07:01
Show Gist options
  • Save krishna2nd/c95def20c26a30d647915aa39346efad to your computer and use it in GitHub Desktop.
Save krishna2nd/c95def20c26a30d647915aa39346efad to your computer and use it in GitHub Desktop.
Download ZIP
Webkit CSS3 Reflection with Box Shadow
Raw
dabblet.css
/**
* CSS 3 Reflection with Box Shadow
*/
figure {
position:relative;
display:block;
width:96px;
}
figure img {
display:block;
position:relative;
z-index:0;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
figure:after {
position:absolute;
top:0;
bottom:0;
left: 0;
right: 0;
content: "";
z-index: 1;
background:transparent;
-webkit-box-shadow: inset 0 0 10px #000000;
}
Raw
dabblet.html
<figure><img src="https://lh5.googleusercontent.com/-E091xDYZfy8/AAAAAAAAAAI/AAAAAAAAAAA/7ghMV2NsSjk/s96-c/photo.jpg" width="96" height="96" alt="(photo)" /></figure>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment