css3 glossy & reflection

css3 光泽和倒影

HTML

<div class="glossy-reflection">
    <span class="image-wrap" style="position:relative; display:inline-block; width:150px; height:150px;background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Playing_card_spade_A.svg/2000px-Playing_card_spade_A.svg.png) no-repeat center center;">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Playing_card_spade_A.svg/2000px-Playing_card_spade_A.svg.png" style="opacity: 0;">
    </span>
</div>

CSS

body{padding:20px 50px;background-color:#000;}
.glossy-reflection .image-wrap {
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
 
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
 
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
 
.glossy-reflection .image-wrap:before {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
 
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
 
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
 
.glossy-reflection .image-wrap:after {
    position: absolute;
    content: ' ';
    width: 100%;
    height: 30px;
    bottom: -31px;
    left: 0;
 
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
 
    background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
    background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);