Berikut kode untuk membuat botol air.

Kode CSS:
body { margin: 10% 10% ; }
li.water-bottle { float:left;margin-right:15px;}
ul { list-style-type:inline; }
.bottle { background: #ddd; width:100px;border-radius:30px 30px 6px 6px; height:200px; padding:6px;box-shadow: 3px 3px 3px #efefef;margin-bottom:4px;}
.bottle:hover { background: #eee;box-shadow: 2px  2px 2px #efefef;}
.cap { background: #ddd; margin:0 25px;width:60px;border-radius:8px 8px 10px  12px; height:35px;border-top:1px solid #ddd; border-bottom:2px dotted #efefef;}
.cap-top { background:#ededed; height:6px; border-radius:10px 10px 0 0; }
.cap-seal { margin-top:20px;background:#ccc; height:6px; border-radius: 0 0 10px 10px; }
.water-full { background: lightblue ;width:100px;margin-top:10px;height:190px; z-index:1;border-radius:28px 28px 10px 10px;}
.water-medium { background: lightblue; width:100px;height:120px;margin-top:80px; z-index:1;border-radius:28px 28px 10px 10px;}
.water-low { background: lightblue ;width:100px;height:75px; margin-top:125px;z-index:1;border-radius:28px 28px 10px 10px;}
.water-empty { background: lightblue ;width:100px;height:15px; margin-top:185px;z-index:1;border-radius:28px 28px 10px 10px;}
Kode HTML:
<body>
    <ul>

    <li class="water-bottle">
        <div class="cap">
            <div class="cap-top">
            </div>
            <div class="cap-seal">
            </div>
        </div>
       <div class="bottle">
            <div class="water-empty"> </div>
        </div>
    </li>
          <li class="water-bottle">
        <div class="cap">
            <div class="cap-top">
            </div>
            <div class="cap-seal">
            </div>
        </div>
       <div class="bottle">
            <div class="water-low"> </div>
        </div>
    </li>
    <li class="water-bottle">
        <div class="cap">
            <div class="cap-top">
            </div>
            <div class="cap-seal">
            </div>
        </div>
       <div class="bottle">
            <div class="water-medium"> </div>
        </div>
    </li>

        <li class="water-bottle">
        <div class="cap">
            <div class="cap-top">
            </div>
            <div class="cap-seal">
            </div>
        </div>
       <div class="bottle">
            <div class="water-full"> </div>
        </div>
    </li>
   </ul>

</body>
Berikut Hasilnya

6 comments

6 Januari 2012 23.25

Wahh...
Keren Mas :)

6 Januari 2012 23.26

Mantep gan...
Mampir ke blog ane ya gan...
http://get-full.blogspot.com/

7 Januari 2012 00.06

Blog Nie Mantap x

7 Januari 2012 00.06

Botol air css3, kerennn bro,
sini mampir, follow me, followback you,
http://fahrinclimber.blogspot.com/

7 Januari 2012 02.36

Keren :D
Nambah Ilmu :D
Ajarin ane blogazine donk kang :D

8 Januari 2012 03.38

mantaap gan :D

Posting Komentar

Konversi Kode
[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar