CSS3 image object

image avec ombre, vignettage, contour, reflet

by toubia95

HTML

<img class="modern-image" src="toto.jpg" />

CSS

html {
    padding: 50px;
}

.modern-image {
    background:blue;
    display: block;
    width: 300px;
    height: 100px;
    
    border: 10px solid #e9e9e9;
    -moz-border-bottom-colors: #999 #e9e9e9;
    -moz-border-right-colors: #999 #e9e9e9;
    -moz-border-top-colors: #ddd #e9e9e9;
    -moz-border-left-colors: #ddd #e9e9e9;
    
    box-shadow:inset 0 50px 50px rgba(255,255,255,0.3), inset 0 0 20px rgba(0,0,0,0.5), 6px 6px 4px rgba(0,0,0,0.4);
}