Gloss effect css3

Gloss effect with css

by arjuncc

HTML

<figure class="gallery-icon">
    <img src="http://dribbble.com/system/users/4467/screenshots/133628/shot_1300559268.jpg?1300630328" />
</figure>


<!-- img fro dribbble all rights reserved to his creator -->

CSS

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

body{
    background:#F3F3F3;
}

.gallery-icon:before{
    content:'';
    position:absolute;
    width:130%;
    height:45%;
    top:-15%;
    right:-5%;
    background:rgba(255,255,255,0.3);/*opera don't support gradient yet*/
    background:
        -webkit-gradient(
        linear,
        left top, left bottom,
        from(rgba(255,255,255,0.1)),
        to(rgba(255,255,255,0.3))
        );
    
    background:
        -moz-linear-gradient(
        top,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.3)
        );
    background:
        linear-gradient(
        top,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.3)
        );
    ;
    /* Webkit */
    -webkit-transform:rotate(10deg);
    -webkit-border-bottom-left-radius: 200px 20px;
    -webkit-border-bottom-right-radius: 200px 10px;
    -webkit-border-top-right-radius: 5px 100px;
    /* Firefox */
    -moz-transform:rotate(10deg);
    -moz-border-radius-bottomleft:200px 20px;
    -moz-border-radius-bottomright:200px 10px;
    -moz-border-radius-topright:5px 100px;
    /* CSS3 */
    transform:rotate(10deg);
    border-bottom-left-radius:200px 20px;
    border-bottom-right-radius: 200px 10px;
    border-top-right-radius:5px 100px;
}

.gallery-icon{
    position:relative;
    overflow:hidden;
    border:6px solid #FFF;
    box-shadow:0 1px 4px #ACACAC, 0 0 0 1px #DADADA;
    -webkit-box-shadow:0 1px 4px #ACACAC, 0 0 0 1px #DADADA;
    -moz-box-shadow:0 1px 4px #ACACAC, 0 0 0 1px #DADADA;
    width:400px;
    height:300px;
}

JavaScript

// original: http://jsfiddle.net/addyosmani/SuYb8/