Hochglanz-Effekt mit CSS3

Glanz-Effekt mit CSS darstellen

by rob_st

HTML

<div class="holzfarbe">
    <div class="high-gloss small lavagrau">
        <div class="inner diagonal-to-middle">
            <!-- <img src="http://www.rauchmoebel.de/fileadmin/user_upload/images/oberflaechen/Farben/lavagrau.jpg" /> -->
        </div>
    </div>
</div>
<div class="holzfarbe">
    <div class="high-gloss large lavagrau">
        <div class="inner diagonal-to-middle">
        </div>
    </div>
</div>
<div class="holzfarbe">
    <div class="high-gloss small lavagrau">
        <div class="inner circle-top-middle">
         
        </div>
    </div>
</div>
<div class="holzfarbe">
    <div class="high-gloss large lavagrau">
        <div class="inner circle-top-middle">
        </div>
    </div>
</div><div class="holzfarbe">
    <div class="high-gloss small lavagrau">
        <div class="inner straight">
            <!-- <img src="http://www.rauchmoebel.de/fileadmin/user_upload/images/oberflaechen/Farben/lavagrau.jpg" /> -->
        </div>
    </div>
</div>
<div class="holzfarbe">
    <div class="high-gloss large lavagrau">
        <div class="inner straight">
        </div>
    </div>
</div>

CSS

img {
    /* height: 100%; */
    width: 100%;
    z-index: 1;
}

.holzfarbe {
    margin: 10px;
}

.small, .large {
    border-radius: 5px;
    border: 1px solid black;
}

.small {
    width: 40px;
    height: 40px;
}

.large {
    width: 125px;
    height: 125px;
}

.high-gloss, .high-gloss img {
    /* box-shadow: inset 0 0 20px 0px rgba(255,255,255,1), inset 0 0 12px 0px rgba(255,255,255,0.5); */
    /* margin-top: -50%; */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 40%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

.high-gloss .inner {
    border-radius: 5px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.inner.straight {
    width: 90%;
    height: 40%;
    border-radius: 5px;
    margin-top: 5%;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(rgba(255,255,255,0)));
    background-color: transparent;
}

.diagonal-to-middle {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(35%,rgba(255,255,255,0.1)), color-stop(47%,rgba(255,255,255,0.3)), color-stop(50%,rgba(255,255,255,0.6)), color-stop(53%,rgba(255,255,255,0.3)), color-stop(65%,rgba(255,255,255,0.1)), color-stop(100%,rgba(255,255,255,0)));
}

.circle-top-middle {
    background:
        -webkit-radial-gradient(center, ellipse contain, rgba(255,255,255,0.6) 10%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0.01) 100%), ;
    background-size: 200% 60%;
    background-repeat: no-repeat;
    background-position: center -50%;
} 

.lavagrau {
    /* background-image: url('http://www.rauchmoebel.de/fileadmin/user_upload/images/oberflaechen/Farben/lavagrau.jpg'); */
    /* background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%; */
    /* background-color: #685D57; */
    background-color: rgb(90,20,95);
}