Membuat Raindrop dengan CSS3

Keajaiban CSS3..
Sementara caru bisa dinikmati oleh pengguna firefox saja, utk chrome & safari silakan codenya diganti sendiri :em0100:



Source: http://mozilla.seanmartell.com/raindrop/

HTML Code:

---

<div class="logo">
        <div class="raindrop0"></div>
        <div class="raindrop1"></div>
        <div class="raindrop2"></div>
        <div class="raindrop3"></div>
        <div class="raindrop4"></div>
        <div class="raindrop5"></div>
        <div class="raindrop6"></div>
        <div class="raindrop7"></div>
        <div class="raindrop8"></div>
</div>

---

CSS

Code:

---

.logo {
        position: relative;
        width: 256px;
        height: 256px;
        margin: 20px auto;
}

.raindrop0 {
        position: absolute;
        top: 64%;
        left: 0px;
        width: 100%;
        height: 50%;
        -moz-border-radius: 100%;
        background: transparent -moz-radial-gradient(50% 50%, ellipse farthest-corner, rgba(0,0,0,0) 0%, rgba(0,105,149,0.4) 37%, rgba(80,80,80,0.1) 47%, rgba(80,80,80,0) 58%);
}

.raindrop1 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        -moz-border-radius-bottomright: 100%;
        -moz-border-radius-topright: 100%;
        -moz-border-radius-bottomleft: 100%;
        background: transparent -moz-radial-gradient(20% 20%, rgba(255,255,255,1) 22%, rgba(255,255,255,0.2) 30%, rgba(74,193,186,0.5) 45%, rgba(0,168,243,0.7) 65%, rgba(255,255,255,1) 100%);
}

.raindrop2 {
        position: absolute;
        top: 3%;
        left: 3%;
        width: 94%;
        height: 94%;
        -moz-border-radius-bottomright: 100%;
        -moz-border-radius-topright: 100%;
        -moz-border-radius-bottomleft: 100%;
        background: transparent -moz-radial-gradient(30% 55%, circle cover, rgba(0,105,149,0) 70%, rgba(0,105,149,0.8) 80%);
}

.raindrop3 {
        position: absolute;
        top: 3%;
        left: 3%;
        width: 94%;
        height: 94%;
        -moz-border-radius-bottomright: 100%;
        -moz-border-radius-topright: 100%;
        -moz-border-radius-bottomleft: 100%;
        background: transparent -moz-radial-gradient(50% 10%, ellipse cover, rgba(0,105,149,0) 73%, rgba(0,105,149,0.3) 80%);
}

.raindrop4 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        -moz-border-radius-bottomright: 100%;
        -moz-border-radius-topright: 100%;
        -moz-border-radius-bottomleft: 100%;
        -moz-box-shadow:
                inset rgba(124, 197, 238, 1) 0px 0px 48px;
}

.raindrop5 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        -moz-border-radius-bottomright: 100%;
        -moz-border-radius-topright: 100%;
        -moz-border-radius-bottomleft: 100%;
        background: transparent -moz-radial-gradient(30% 30%, ellipse cover, rgba(0,105,149,0) 50%, rgba(255,255,255,0.9) 72%, rgba(255,255,255,0.6) 90%);
}

.raindrop6 {
        position: absolute;
        top: 35%;
        left: 10%;
        width: 80%;
        height: 60%;
        -moz-transform: matrix(1, -0.5, 0, 1, 0, 0);
        background: transparent -moz-radial-gradient(73% 73%, ellipse farthest-corner, rgba(145,240,234,0.8) 6%, rgba(145,240,234,0.1) 25%, rgba(145,240,234,0) 30%);
}
.raindrop7 {
        position: absolute;
        top: 45%;
        left: 20%;
        width: 75%;
        height: 55%;
        -moz-transform: matrix(1, -0.5, 0, 1, 0, 0);
        background: transparent -moz-radial-gradient(73% 73%, ellipse farthest-corner, rgba(255,255,255,1) 6%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 30%);
}

.raindrop8 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        -moz-border-radius-bottomright: 100%;
        -moz-border-radius-topright: 100%;
        -moz-border-radius-bottomleft: 100%;
        -moz-box-shadow:
                inset rgba(191, 235, 255, 0.8) 0px 0px 12px;
}

---

Baca juga beberapa artikel terkait berikut ini :