Link Nudging Versi CSS3

CSS3 Link Nudging
Assalamu'alaikum ..
Sobat bloggers, sebelumnya saya sudah posting CSS & jQuery Link Nudging, Namun kali ini berbeda, kali ini menggunakan CSS3 .
Lansung aja sob Cekidot ..

Code CSS3


Berikut adalah Code CSS3, Silahkan kalian masukan di atas Tag ]]></b:skin>
ul.nudging li a {
  text-decoration:none;
  display:block;
  overflow:hidden;
  padding:5px 10px;
  color:white;
  background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  -webkit-background-size:200% 100%;
  -moz-background-size:200% 100%;
  background-size:200% 100%;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}

.nudging li a:hover {
  background-position:100% 100%;
  padding-left:15px;
}
Ada pertanyaan dari Sobat Bloggers, yaitu dari Alam Perwira, yaitu, klo mau kasih ke Label gimana sob ?
Penerapanya cukup mudah kok sob, anda cukup Hilangkan Code yang berwarna Biru, Itu adalah ID dari CSS3 tersebut, Bila yang berwarna biru adalah untuk Active, Sedangkan Yang berwarna Hijau adalah Saat di Hover/di sorot dengan crusor. Lah kalo berwarna Merah itu apa sob ?  yang berwarna Merah adalah tampilan Background Pada Link yang di beri Nudging, Kalian bisa menghapusnya, sebenarnya itu kurang penting.

Masih bingung nih sob ..
Contoh Penerapan di dalam Blog saya yaitu :

.post h3 {
    color: #333333;
    font-size: 16px;
    font-family: 'Piedra', cursive;
    font-weight: normal;
    text-decoration: none;
    margin: 0 0 5px;
    padding: 10px 0 0;
        text-shadow:0 1px 0px #FFF,0 0 3px #FFF,0 0 5px #FFF,0 0 30px #FFF,0 3px 5px #FFF;
        text-decoration:none;
        display:block;
        overflow:hidden;
        padding:5px 10px;
        color:white;
        background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
        -webkit-background-size:200% 100%;
        -moz-background-size:200% 100%;
        background-size:200% 100%;
        -webkit-transition:all 0.26s ease-out;
        -moz-transition:all 0.26s ease-out;
        -ms-transition:all 0.26s ease-out;
        -o-transition:all 0.26s ease-out;
        transition:all 0.26s ease-out;
}
Hover Mode/Saat di sorot oleh Crusor :

.post h3 a:hover {
    color: #CF152A;
    text-decoration: none;
        background-position:100% 100%;
        padding-left:15px;
}

Contoh penerapan Lain, yaitu menjawab Pertanyaan Alam Perwira, Memasang Link Nudging Pada Label :

        #label1 .widget-content ul li :hover {
          text-decoration:none;
          display:block;
          overflow:hidden;
          padding:5px 10px;
          color:white;
          background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
          -webkit-background-size:200% 100%;
          -moz-background-size:200% 100%;
          background-size:200% 100%;
          -webkit-transition:all 0.26s ease-out;
          -moz-transition:all 0.26s ease-out;
          -ms-transition:all 0.26s ease-out;
          -o-transition:all 0.26s ease-out;
          transition:all 0.26s ease-out;;
        }
Kalian juga bisa dengan Menggunakan Kode CSS Di bawah ini, saya dapatkandari Google :
#label1 .widget-content ul li :hover {margin-left: 10px;
    padding-left: 5px; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.40))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%);
    -moz-transition: all 0.70s ease-out;  /* FF4+ */
    -o-transition: all 0.70s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.70s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.70s ease-out;  /* IE10? */display: block;


Code Berwarna ungu Di atas adalah ID dari Label yang kamu punya, Misal di Blog kamu IDnya label2, maka Tulisan berwarna Ungu di atas ganti menjadi label2.

Sekian dlu ya sobat, kalo kurang Jelas Komentar ya, dan Semoga bisa jawab pertanyaan Alam Perwira.
Wassalamu'alaikum wr. wb.

9 ... Skip ke Kotak Komentar

12 Februari 2012 07.47

wew.. dipostingin nih.. :)
thanks berat yoh sob.. :)

12 Februari 2012 09.23

haha .
Kan buat jawab Pertanyaan Sobat ..

12 Februari 2012 09.38

mantab sob
absen siang

12 Februari 2012 10.24

Oke sob .. :D

12 Februari 2012 11.54

Terima kasih sahabat atas berbagi tipsnya nih..
banyak belajar di sini serta follow 112 agar lebih banyak ilmu an tips yang didapatkan disini

12 Februari 2012 12.58

Pena hadir dan absen siang sob..
Pena pakai apa gitu dulu, hanya beda caranya saja sob jadi ada nuggingnya gitu

12 Februari 2012 13.53

@Keperawatan : Sama2 Sobat .
@Pena : iya sobat ..

13 Februari 2012 13.53

wah kalo diblog ane keliatan nya udah gak mungkin dipake kaya ginian
tapi nice posting dah, 4 jempol buat mas f403

13 Februari 2012 14.30

Bisa kok sob, klo sobat belum pernah pake CSS beginien pasti Bisa .. :D
Thanks Jempolnya .. :D

Tambahkan Komentar Anda

Peraturan :
1. Dilarang berkomentar dengan kata-kata yang kotor, Pornografi, SARA
2. Dilarang Poskan Spam
3. Dilarang poskan URL yang tidak perlu
Sekian Pemberitahuan Dari Saya
Hati-hati dengan Komentar Anda, anda Komentar Bukan Spam, Saya Pasti akan Follow anda, This Blog Dofollow

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat - Converted By [./Forbiden-403]