Showing posts with label Code Snippet. Show all posts
Showing posts with label Code Snippet. Show all posts

Tuesday, September 25, 2012

Tombol Share Dengan Effect Hover CSS3

Hover they

Buat Yang Mau Scriptnya Terain Email Kamu dan Akan Saya Kirim Scriptnya FULL :D Thanks :D
Sciptnya http://tny.cz/66c5726c
Posted by at No comments:
Labels: , ,

Monday, September 10, 2012

Top Menu Slider Dengan Effect CSS3

Top Menu Slider Dengan Effect CSS3

Scriptnya Saya Simpan Sudah Dengan Tempat Peletakan Scriptnya Jadi Sobat Tinggal Copy/Paste Pada Tempat Yang Semestinya :D, Dan Juga Sobat Bisa Langsung Copy/Paste Semua Scriptnya Dan Simpan Di Gadget HTML/Java Script Pada Blog Sobat :D

DEMO

Ini Dia Scriptnya :

<head>
<style> 
a { text-decoration: none; 
color: #2e2e2e; 
} 
body { 
 background: #2e2e2e;
 margin: 0; 
 padding: 0; 
} 

ul { 
 font-family: Helvetica, Arial, sans-serif; 
 list-style: none; 
 margin: 0; 
 padding: 12px 0; 
 text-align: center; 
} 

ul li { 
 color: #fff; 
 font-size: 10px; 
 letter-spacing: 2px; 
 padding: 12px 0; 
 text-transform: uppercase; 
} 

#menu { 
 background: #222; 
 display: none; 
 width: 100%; 
} 

#bar { 
 background: #eee; 
 box-shadow: 0 0 5px #000; 
 -mox-box-shadow: 0 0 5px #000; 
 -webkit-box-shadow: 0 0 5px #000;
 height: 50px; 
 width: 100%; 
} 

h1 { 
 font-family: Helvetica, Arial, sans-serif; 
 font-size: 12px; 
 font-style: bold; 
 letter-spacing: 4px; 
 margin: 0; 
 padding: 18px; 
 text-align: center; 
 text-transform: uppercase; 
}

</style>
</head>
<body>
<div id="menu">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Services</li></a>
<a href="#"><li>Work</li></a>
<a href="#"><li>Contact</li></a>
</ul>
</div>

<div id="bar">
<a href="#"><h1>Menu</h1></a>
</div>
   
<script>
$(document).ready(function(){
$("#bar a").click(function(){ 
          event.preventDefault();
$("#menu").slideToggle("slow");
});
});
    </script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</body>


NB.
  Bila Ada Yang Ingin Ditanyakan Silahkan Komentar Di Postingan Ini Atau Bisa Lewat Email : nurmansyahrully@gmail.com , Facebook : facebook.com/ggeessbbooll , Twitter : @RullyMNH , Selamat Mencoba Dan Selalu Sukses Untuk Kalian Semua :D
Posted by at No comments:
Labels: , , ,

Thursday, August 30, 2012

Game Kutu Loncat Dengan Effect HTML5 JavaScript dan CSS3

Game Kutu Loncat Dengan Menuggunakan HTML5Kutu Loncat
Aww, browserna gote gk ada HTML5!

game over!

you scored 0 points

Restart

0
Mau Scriptnya ? Kamu Bisa Komentar dan Masukan E-mail Kamu dan Nanti Akan Kami Kirim Ke E-mail Kamu !
Posted by at No comments:
Labels: , , ,

Saturday, August 25, 2012

Cara Membuat Widget Alexa Rangking Di Blog

Cara Membuat Widget Alexa Rangking Di Blog, Tutorial Cara Membuat Widget Alexa Rangking Di Blog, Membuat Widget Alexa Rangking Di Blog, Widget Alexa Rangking Di Blog, Cara Membuat Widget Alexa Rangking Pada Blog, Cara Membuat Widget Alexa Rangking Pada Blogspot, Cara Membuat Widget Alexa Rangking Pada Blogger, Cara Membuat Widget Alexa Rangking Di Blog Dengan Mudah, How To Make  Widget Alexa Rangking On Blog

Langsung Aja Ke Tutorialnya :

Caranya :
1. Login Ke Akun Blogger Sobat
2. Masuk Ke Tataletak
3. Buat Gadget dan Pilih HTML/Java Script
4. Buka Tab Baru Pada Browser dan Masuk Ke alexa.com
5. Masukan URL Blog Sobat Lalu Enter.

6. Klick Get Details, Lalu ada Menu Ged Widget Klick!
7. Lalu Klick Build Widget
8. Nanti Ada 3 Pilihan Bentuk Widgetnya Lalu Copy/Paste Script Widgetnya Ke dalam Dadget HTML/Java Script Yang Tadi Di Buat, Save Dan Liat Hasilnya :D
Selamat Mencoba ^_^


Posted by at No comments:
Labels: , , , ,

Wednesday, August 22, 2012

Cara Membuat Effect Pop Up Pada Gambar/Foto Di Blog


Cara Membuat Effect Pop Up Pada Gambar, Membuat Effect Pop Up Pada Gambar, Effect Pop Up Pada Gambar, Effect Pop Up Untuk Gambar, Tutorial Cara Membuat Effect Pop Up Pada Foto, Effect Foto, Foto Effect, Pop Up Effect, Edit Foto, Cara Membuat Effect Pop Up Pada Foto, Membuat Effect Pop Up Pada Foto, Effect Pop Up Pada Foto, Effect Pop Up Untuk Foto Dengan Simple Dan Mudah Di Pahami

Effect Pop Up Untuk Gambar/Foto Ini Bisa Juga Di Gunakan Untuk Membuat Gallery Foto.
Langsugn Aja Dah Ke Tutorialnya.
Caranya :
1. Login Ke Akun Blogger Sobat
2. Buat Postingan/Entry Baru
3. Beri Judul ( Jika Ingin Membuat Gallery Foto )
4. Lalu Copy/Paste Script Di Bawah Ke Dalam Page HTML :
<style>
.thumbnail{
position: relative; 
z-index: 0; 
}

{
background-colo
.thumbnail:hove
rr: transparent;
z-index: 50;
}

uk gambar pop up*/
position: absolute;
background-c
.thumbnail span{ /*aturan css un
tolor: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
 up*/
border-width:
visibility: hidden;
}

.thumbnail span img{ /*aturan css untuk gambar po
p 0;
padding: 2px;
}

 /*aturan css untuk gambar pop up pada saat hover*/
visibility: visible;
.thumbnail:hover span
{top: 0;
left: 60px; /*posisi dimana gambar pop up akan diletakkan secara horizontal */

}
</style>
5. Jika Sudah Tambahkan Lagi Script HTMLnya Di Bawah Script Yang Tadi Di Kopas :
<a class="thumbnail" href="Link Tujuan Gambar"><img src="Link Foto Pertama Yang Kecil" width="100px" height="66px" border="0" /><span><img src="Link Foto Kedua Yang Besar" /><br />Beautifulness of Bali, Indonesia</span></a>

a class="thumbnail" href="Link Tujuan Gambar"><img src="Link Foto Pertama Yang Kecil" width="100px" height="66px" border="0"/><span><img src="Link Foto Kedua Yang Besar" /><br />Bali beautiful sunset</span></a>

6. Save Dan Lihat Hasilnya :D

Selamat Mencoba dan Berkreasi ^_^

Jika Tidak Ada Yang Di Mengerti Bisa Tinggalkan Komentar Di Postingan Ini :D dan Insyaallah Saya Bisa Membantu :D
Posted by at No comments:
Labels: , , ,

Tuesday, August 21, 2012

Cara Membuat Gallery Foto Di Blog Dengan CSS

Gallery Foto, Foto Gallery, Cara Membuat Foto Gallery, Cara Membuat Gallery Foto, Cara Membuat Gallery, Tutorial Membuat Gallery Foto, Tutorial Membuat Foto Gallery, Cara Membuat Gallery Foto Di Blog, Cara Membuat Gallery Foto Dengan, Cara Membuat Foto Gallery Di Blogspot Dengan Mudah.


Contoh/Example :



Langsung Saja Masuk Ke Intinya Ok :D:
1. Login Ke Akun Blogspot/Blogger Sobat,
2. Buat Postingan/Entry Baru Untuk Membuat Gallery Foto Blog Sobat,
3. Jika Sudah Membuat, Beri Judul Dengan Judul Yang Anda Inginkan,
4. Masuk Ke Bagian HTML, Lalu Copy/Paste Script Didalam Kotak Note Di Bawah Ke Dalam Bagian HTML Postingan Anda :
CSS Code :
5. Jika Sudah Enter 1X dan Masukan Kode HTML Di Bawah :
HTML Code :

<ul id="gallery">
<li><a href="Link Tujuan Foto">
<img src="Link Foto Yang Ingin Dimasukan" alt="#1" title="Foto1" /></a></li>
<li><a href=" Link Tujuan Foto ">
<img src=" Link Foto Yang Ingin Dimasukan " alt="#2" title="Foto2" /></a></li>
<li><a href=" Link Tujuan Foto ">
<img src=" Link Foto Yang Ingin Dimasukan " alt="#3" title="Foto3" /></a></li>
<li><a href=" Link Tujuan Foto ">
<img src=" Link Foto Yang Ingin Dimasukan " alt="#4" title="Foto4" /></a></li>
<li><a href=" Link Tujuan Foto ">
<img src="Link Foto Yang Ingin Dimasukan " alt="#5" title="Foto5" /></a></li>
<li><a href=" Link Tujuan Foto ">
<img src=" Link Foto Yang Ingin Dimasukan " alt="#6" title="Foto6" /></a></li>
<li><a href=" Link Tujuan Foto ">
<img src=" Link Foto Yang Ingin Dimasukan " alt="#7" title="Foto7" /></a></li>
</ul>

6. Simpan Postingan/Entry Dan Sobat Tinggal Buat Menu Navigasi Yang Mengarah Ke Postingan Yang Di Buat Itu :D.

Sekian Dulu Tutorial Hari Ini Dari Saya Mohon Maaf Bila Kurang Di Mengerti dan Jika Ada Yang Tidak Di Mengerti Bisa Komentar Saja dan Insyaallah Saya Bisa Membantunya :D
Selamat Mencoba ^_^
Posted by at No comments:
Labels: , , , ,

Thursday, June 7, 2012

5 Style Download Buttons Dengan CSS



Demo



== Style 1 ==
- CSS:

<style>
.dropbutton {
    /* main class */
    height: 48px;
    width: 200px;
    font: bold 16px/48px arial;
    margin-bottom: 60px;
    position: relative;
}


/* ===============================
   ========= BLUE STYLE =========
   ===============================
   ================================================== */

.blue:first-child {
    /* styling for the left part */
    padding: 7px;
    float: left;
    width: 32px;
    height: 32px;
    /* border radius */
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#87deff), to(#40a9fd));
    background: -moz-linear-gradient(#87deff, #40a9fd);
    background-color: #40a9fd;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #008af5;
}

.dropbutton:hover .blue:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#b1eaff), to(#68bcff));
    background: -moz-linear-gradient(#b1eaff, #68bcff);
    background-color: #68bcff;
}

.dropbutton:active .blue:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#68bcff), to(#87deff));
    background: -moz-linear-gradient(#68bcff, #87deff);
    background-color: #87deff;
}

.blue {
    /* styling for the right part */
    height: 46px;
    width: 151px;
    float: left;
    text-align: center;
    /* border radius */
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#87deff), to(#40a9fd));
    background: -moz-linear-gradient(#87deff, #40a9fd);
    background-color: #40a9fd;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #008af5;
    border-left: 0;
}

.dropbutton:hover .blue {
    background: -webkit-gradient(linear, left top, left bottom, from(#b1eaff), to(#68bcff));
    background: -moz-linear-gradient(#b1eaff, #68bcff);
    background-color: #68bcff;
}

.dropbutton:active .blue {
    background: -webkit-gradient(linear, left top, left bottom, from(#68bcff), to(#87deff));
    background: -moz-linear-gradient(#68bcff, #87deff);
    background-color: #87deff;
}

.blue  a {
    /* link styling */
    color: #fbfbfb;
    font: bold 16px/32px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #008af5;
}


/* ====================================
   ====== DARK STYLE (DROPDOWN) =======
   ====================================
   ================================================== */

.dark {
    width: 120px;
    height: 31px;
    padding: 7px 6px;
    margin-left: 58px;
    position: absolute;
    clear: both;
    z-index: -1;
    -webkit-transition: top .6s linear;
    /* text */
    color: #fbfbfb;
    font: bold 12px/15px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    /* border radius */
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), color-stop(.1, #5c5c5c), to(#838383));
    background: -moz-linear-gradient(#2b2b2b, #5c5c5c 10%, #838383);
    background-color: #ccc;
    /* shadows and highlights */
    -webkit-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;
    -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px -1px rgba(255, 255, 255, 0.4) inset;
    /* border */
    border: 1px solid #000;
    border-top: 0;
}

.dropbutton:hover .dark { top: 48px }

.dark img { float: left }

.dark span {
    color: #e5e5e5;
    font-weight: normal;
}
</style>

- HTML :

<div class="dropbutton">
    <div class="blue">
            <img src="http://iwantaneff.in/t/arrow.png" />
    </div>
    <div class="green">
            <a href="#">Download now!</a>
    </div>
    <div class="dark">
        <img src="http://iwantaneff.in/t/file.png" />
        Version 3.0 <br />
        <span>255 MB</span>
    </div>
</div>



== Style 2 ==
- CSS :

.dropbutton {
    /* main class */
    height: 48px;
    width: 200px;
    font: bold 16px/48px arial;
    margin-bottom: 60px;
    position: relative;
}


/* ===============================
   ========= BLACK STYLE =========
   ===============================
   ================================================== */

.black:first-child {
    /* styling for the left part */
    padding: 7px;
    float: left;
    width: 32px;
    height: 32px;
    /* border radius */
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#818181), to(#242424));
    background: -moz-linear-gradient(#818181, #242424);
    background-color: #222;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #000;
}

.dropbutton:hover .black:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#a2a2a2), to(#3d3d3d));
    background: -moz-linear-gradient(#a2a2a2, #3d3d3d);
    background-color: #555;
}

.dropbutton:active .black:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#3d3d3d), to(#818181));
    background: -moz-linear-gradient(#3d3d3d, #818181);
    background-color: #777;
}

.black {
    /* styling for the right part */
    height: 46px;
    width: 151px;
    float: left;
    text-align: center;
    /* border radius */
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#818181), to(#242424));
    background: -moz-linear-gradient(#818181, #242424);
    background-color: #222;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #000;
    border-left: 0;
}

.dropbutton:hover .black {
    background: -webkit-gradient(linear, left top, left bottom, from(#a2a2a2), to(#3d3d3d));
    background: -moz-linear-gradient(#a2a2a2, #3d3d3d);
    background-color: #555;
}

.dropbutton:active .black {
    background: -webkit-gradient(linear, left top, left bottom, from(#3d3d3d), to(#818181));
    background: -moz-linear-gradient(#3d3d3d, #818181);
    background-color: #777;
}

.black  a {
    /* link styling */
    color: #fbfbfb;
    font: bold 16px/32px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}


/* ====================================
   ====== LIGHT STYLE (DROPDOWN) ======
   ====================================
   ================================================== */

.light {
    width: 120px;
    height: 31px;
    padding: 7px 6px;
    margin-left: 58px;
    position: absolute;
    clear: both;
    z-index: -1;
    -webkit-transition: top .6s linear;
    /* text */
    color: #333;
    font: bold 12px/15px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    /* border radius */
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#bababa), color-stop(.1, #e4e4e4), to(#f2f2f2));
    background: -moz-linear-gradient(#bababa, #e4e4e4 10%, #f2f2f2);
    background-color: #ccc;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px -1px rgba(255, 255, 255, 1) inset;
    -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 1) inset;
    box-shadow: 0 1px -1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #bbb;
    border-top: 0;
}

.dropbutton:hover .light { top: 48px }

.light img { float: left }

.light span {
    color: #555;
    font-weight: normal;
}



-HTML :


<div class="dropbutton">
    <div class="black">
            <img src="http://iwantaneff.in/t/arrow.png" />
    </div>
    <div class="orange">
            <a href="#">Download now!</a>
    </div>
    <div class="light">
        <img src="http://iwantaneff.in/t/box.png" />
        ZIP File <br />
        <span>25 KB</span>
    </div>
</div>



== Style 3 ==
- CSS :

.dropbutton {
    /* main class */
    height: 48px;
    width: 200px;
    font: bold 16px/48px arial;
    margin-bottom: 60px;
    position: relative;
}


/* ===============================
   ======== PURPLE STYLE =========
   ===============================
   ================================================== */

.purple:first-child {
    /* styling for the left part */
    padding: 7px;
    float: left;
    width: 32px;
    height: 32px;
    /* border radius */
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#cba7f5), to(#9b45f4));
    background: -moz-linear-gradient(#cba7f5, #9b45f4);
    background-color: #9b45f4;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #6a14c3;
}

.dropbutton:hover .purple:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#dcbefe), to(#a75ff2));
    background: -moz-linear-gradient(#dcbefe, #a75ff2);
    background-color: #a75ff2;
}

.dropbutton:active .purple:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#b97afc), to(#cba7f5));
    background: -moz-linear-gradient(#b97afc, #cba7f5);
    background-color: #cba7f5;
}

.purple {
    /* styling for the right part */
    height: 46px;
    width: 151px;
    float: left;
    text-align: center;
    /* border radius */
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#cba7f5), to(#9b45f4));
    background: -moz-linear-gradient(#cba7f5, #9b45f4);
    background-color: #9b45f4;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #6a14c3;
    border-left: 0;
}

.dropbutton:hover .purple {
    background: -webkit-gradient(linear, left top, left bottom, from(#dcbefe), to(#a75ff2));
    background: -moz-linear-gradient(#dcbefe, #a75ff2);
    background-color: #a75ff2;
}

.dropbutton:active .purple {
    background: -webkit-gradient(linear, left top, left bottom, from(#b97afc), to(#cba7f5));
    background: -moz-linear-gradient(#b97afc, #cba7f5);
    background-color: #cba7f5;
}

.purple  a {
    /* link styling */
    color: #fbfbfb;
    font: bold 16px/32px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #6a14c3;
}


/* ====================================
   ====== DARK STYLE (DROPDOWN) =======
   ====================================
   ================================================== */

.dark {
    width: 120px;
    height: 31px;
    padding: 7px 6px;
    margin-left: 58px;
    position: absolute;
    clear: both;
    z-index: -1;
    -webkit-transition: top .6s linear;
    /* text */
    color: #fbfbfb;
    font: bold 12px/15px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    /* border radius */
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), color-stop(.1, #5c5c5c), to(#838383));
    background: -moz-linear-gradient(#2b2b2b, #5c5c5c 10%, #838383);
    background-color: #ccc;
    /* shadows and highlights */
    -webkit-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;
    -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px -1px rgba(255, 255, 255, 0.4) inset;
    /* border */
    border: 1px solid #000;
    border-top: 0;
}

.dropbutton:hover .dark { top: 48px }

.dark img { float: left }

.dark span {
    color: #e5e5e5;
    font-weight: normal;
}



- HTML :


<div class="dropbutton">
    <div class="purple">
            <img src="http://iwantaneff.in/t/arrow_black.png" />
    </div>
    <div class="yellow">
            <a href="#">Try it now!</a>
    </div>
    <div class="dark">
        <img src="http://iwantaneff.in/t/file_red.png" />
        FREE TRIAL <br />
        <span>30 days</span>
    </div>
</div>  



== Style 4 ==
- CSS :

.dropbutton {
    /* main class */
    height: 48px;
    width: 200px;
    font: bold 16px/48px arial;
    margin-bottom: 60px;
    position: relative;
}


/* ===============================
   ========= GREY STYLE ==========
   ===============================
   ================================================== */

.grey:first-child {
    /* styling for the left part */
    padding: 7px;
    float: left;
    width: 32px;
    height: 32px;
    /* border radius */
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#c6c6c6));
    background: -moz-linear-gradient(#fbfbfb, #c6c6c6);
    background-color: #ccc;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #bbb;
}

.dropbutton:hover .grey:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
    background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
    background-color: #ddd;
}

.dropbutton:active .grey:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
    background: -moz-linear-gradient(#d5d5d5, #fafafa);
    background-color: #fbfbfb;
}

.grey {
    /* styling for the right part */
    height: 46px;
    width: 151px;
    float: left;
    text-align: center;
    /* border radius */
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#c6c6c6));
    background: -moz-linear-gradient(#fbfbfb, #c6c6c6);
    background-color: #ccc;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #bbb;
    border-left: 0;
}

.dropbutton:hover .grey {
    background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
    background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
    background-color: #ddd;
}

.dropbutton:active .grey {
    background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
    background: -moz-linear-gradient(#d5d5d5, #fafafa);
    background-color: #fbfbfb;
}

.grey  a {
    /* link styling */
    color: #333;
    font: bold 16px/32px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
}

/* ====================================
   ====== LIGHT STYLE (DROPDOWN) ======
   ====================================
   ================================================== */

.light {
    width: 120px;
    height: 31px;
    padding: 7px 6px;
    margin-left: 58px;
    position: absolute;
    clear: both;
    z-index: -1;
    -webkit-transition: top .6s linear;
    /* text */
    color: #333;
    font: bold 12px/15px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    /* border radius */
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#bababa), color-stop(.1, #e4e4e4), to(#f2f2f2));
    background: -moz-linear-gradient(#bababa, #e4e4e4 10%, #f2f2f2);
    background-color: #ccc;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px -1px rgba(255, 255, 255, 1) inset;
    -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 1) inset;
    box-shadow: 0 1px -1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #bbb;
    border-top: 0;
}

.dropbutton:hover .light { top: 48px }

.light img { float: left }

.light span {
    color: #555;
    font-weight: normal;
}


- HTML :


<div class="dropbutton">
    <div class="grey">
            <img src="http://iwantaneff.in/t/arrow.png" />
    </div>
    <div class="grey">
            <a href="#">Download now!</a>
    </div>
    <div class="light">
        <img src="http://iwantaneff.in/t/file_blue.png" />
        Updated!<br />
        <span>version 2.3.1</span>
    </div>
</div>  


== Style 5 ==
- CSS :

.dropbutton {
    /* main class */
    height: 48px;
    width: 200px;
    font: bold 16px/48px arial;
    margin-bottom: 60px;
    position: relative;
}


/* ===============================
   ========== RED STYLE ==========
   ===============================
   ================================================== */

.red:first-child {
    /* styling for the left part */
    padding: 7px;
    float: left;
    width: 32px;
    height: 32px;
    /* border radius */
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#ff9782), to(#d83c22));
    background: -moz-linear-gradient(#ff9782, #d83c22);
    background-color: #d83c22;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #c93f27;
}

.dropbutton:hover .red:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#ffbdb0), to(#ee6048));
    background: -moz-linear-gradient(#ffbdb0, #ee6048);
    background-color: #ee6048;
}

.dropbutton:active .red:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#e75138), to(#ff7053));
    background: -moz-linear-gradient(#e75138, #ff7053);
    background-color: #ff9782;
}

.red {
    /* styling for the right part */
    height: 46px;
    width: 151px;
    float: left;
    text-align: center;
    /* border radius */
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#ff9782), to(#d83c22));
    background: -moz-linear-gradient(#ff9782, #d83c22);
    background-color: #d83c22;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #c93f27;
    border-left: 0;
}

.dropbutton:hover .red {
    background: -webkit-gradient(linear, left top, left bottom, from(#ffbdb0), to(#ee6048));
    background: -moz-linear-gradient(#ffbdb0, #ee6048);
    background-color: #ee6048;
}

.dropbutton:active .red {
    background: -webkit-gradient(linear, left top, left bottom, from(#e75138), to(#ff7053));
    background: -moz-linear-gradient(#e75138, #ff7053);
    background-color: #ff9782;
}

.red  a {
    /* link styling */
    color: #fbfbfb;
    font: bold 16px/32px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #c93f27;
}



/* ====================================
   ====== LIGHT STYLE (DROPDOWN) ======
   ====================================
   ================================================== */

.light {
    width: 120px;
    height: 31px;
    padding: 7px 6px;
    margin-left: 58px;
    position: absolute;
    clear: both;
    z-index: -1;
    -webkit-transition: top .6s linear;
    /* text */
    color: #333;
    font: bold 12px/15px arial, helvetica, sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    /* border radius */
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#bababa), color-stop(.1, #e4e4e4), to(#f2f2f2));
    background: -moz-linear-gradient(#bababa, #e4e4e4 10%, #f2f2f2);
    background-color: #ccc;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px -1px rgba(255, 255, 255, 1) inset;
    -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 1) inset;
    box-shadow: 0 1px -1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #bbb;
    border-top: 0;
}

.dropbutton:hover .light { top: 48px }

.light img { float: left }

.light span {
    color: #555;
    font-weight: normal;
}


- HTML :


<div class="dropbutton">
    <div class="red">
            <img src="http://iwantaneff.in/t/arrow_black.png" />
    </div>
    <div class="blue">
            <a href="#">Buy it now!</a>
    </div>
    <div class="light">
        <img src="http://iwantaneff.in/t/box.png" />
        Special Offer <br />
        <span>25,99$</span>
    </div>
</div>

Ket .
Sobat Tinggal Memilih Style Mana , dan Tinggal Menambahkan Link ! Mudahkan Kalo Sobat Kurang Ngerti Bertanyalah Agar Mengerti ! ^_^ Terima Kasih .
Posted by at No comments:
Labels: , , , ,
Subscribe to: Posts (Atom)