Home » » Tooltip Terbang Dengan Kode Css3

Tooltip Terbang Dengan Kode Css3

Written By mas mahfid on Tuesday, January 29, 2013 | 11:48 PM

Author : mas mahfiduntuk mengenal lebih jauh tentang mas mahfid silahkan klik link Info Blog

masmahfidorang yang selalu ingin tahu ,mencoba sesuatu yang di anggap orang lain sulit dan berusaha untuk menjadi bisa Sobat sedang membaca artikel tentang Tooltip Terbang Dengan Kode Css3. Silahkan tinggalkan jejak di kolom Komentar untuk mempermudah mas mahfid berkunjung kembali ke blog sobat.
Mungkin sobat blogger sudah pernah mendengar tentang tooltip yang bisa terbang ,keren memang akan tetapi berpengaruh ngak dengan masalah looding blog ...? Jawabannya pasti ya...karena penggunaan tooltip dengan penggunaan Jquery pasti akan berpengaruh dengan looding blog.Nah untuk Postingan kali ini INFO BLOG akan membuat bagaimana cara membuat tooltip dengan kode CSS juga bisa terbang Sebagai contoh coba sobat arahkan kursor sobat kearah link di bawah ini
Setelah melihat contohnya dan sobat ingin juga tahu cara membuatnya silahkan ikuti secar detil tutorialnya di bawah ini
  1. Cari kode]]></b:skin> lalu simpan kode css 3 berikut tepat di atas ]]></b:skin>
     a.tooltip {outline:none;text-decoration:none;border-bottom:dotted 1px blue;} a.tooltip strong {line-height:30px;} a.tooltip > span { width:250px; padding: 10px 20px; margin-top: -1000px; margin-left: 10px; opacity:0;  z-index: 10; position: absolute; font-family: Arial; font-size: 12px; font-style: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 2px 2px 2px #999; -moz-box-shadow: 2px 2px 2px #999; box-shadow: 2px 2px 2px #999; -webkit-transition-property:opacity, margin-top, visibility, margin-left; -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -moz-transition-property:opacity, margin-top, visibility, margin-left; -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, visibility, margin-left; -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; transition-property:opacity, margin-top, visibility, margin-left; transition-duration:0.4s, 0.3s, 0.4s, 0.3s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; } /*a.tooltip > span:hover,*/ a.tooltip:hover > span { opacity: 1; text-decoration:none; visibility: visible; overflow: visible; margin-top:-10px; display: inline; margin-left: 10px; } a.tooltip span b { width: 15px; height: 15px; margin-left: 20px; margin-top: -19px; display: block; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: inset -1px 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; display: none\0/; *display: none; } a.tooltip > span { color: #000000; background: #FBF5E6; background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBF5E6', endColorstr='#FFFFFF',GradientType=0 ); border: 1px solid #FF9933; } a.tooltip span b { background: #FBF5E6; border-top: 2px solid #000099; border-right: 2px solid #000099; }
  2. Silahkan Save dulu template sobat
  3. Untuk memsukkan kode HTML nya silahkan sobat gunakan kode di bawah ini:
    <a href="Link tujuan" class="tooltip"> Judul  <span> — Isi tooltip akan tampil disini </span> </a>
Share this article :

0 komentar:

Post a Comment

Silahkan Berkomentar sesuai Judul Artikel

artikel terbaru

close
close
close
 
Support : Your Link | Your Link | Your Link
Copyright © 2013. Info Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger