Hy Teman" kali ini saya akan share hasil dari ekperimenku yaitu Cara Membuat Headline Dengan Efek Hover Disamping Scrollbar . Nah yang diatas itu udah ada ss headlinenya , berikut dengan ss efek hovernya.
Nah gimana keren kan? kayanya engga deh :v , nih kalo yang mau buat tinggal ikuti caranya aja. CSSnya taro diatas ]]></b:skin>
Code :
#headline {
z-index: 1000;
border-radius: 15px;
position: fixed;
width: 375px;
height: 130px;
background: rgba(41, 41, 43, 0.77);
border: 5px solid #f03;
color:#fff;
top: 100px;
right: -335px;
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
-ms-transition:1s;
}
#headline:hover{
z-index: 1000;
border-radius: 15px;
position: fixed;
width: 375px;
height: 130px;
background: rgba(41, 41, 43, 0.77);
border: 5px solid #f03;
top: 100px;
right: 0px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
-ms-transition:0.5s;
}
#headline h2{
font-family: cursive;
letter-spacing:1.5pt;
height: 10px;
width: 210px;
margin-bottom: 0px;
margin-left: -90px;
color:#fff;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
font-size: 14pt;
}
#headline li a:visited{color:#fff;}
#headline li{margin-bottom: 4px;
margin-left: 50px;
border-bottom: 1px dotted #f03;
padding: 0 0 0px 9px;
font-family: Blackadder ITC;
}
Dan ini HTMLnya taro diatas </body>
Code :
<div id='headline'>
<h2>Headline</h2>
<ul><li><a href='http://rplaxe.blogspot.com/2013/07/update-status-facebook-keren.html'>Update Status Facebook</a></li>
<li><a href='http://rplaxe.blogspot.com/2013/08/cara-instal-tempilan-windows-7-seperti.html'>Instal Teamplate Ubuntu Untuk Windows 7</a></li>
<li><a href='http://rplaxe.blogspot.com/2013/08/mau-dowload-microsoft-office-2013.html'>Download Microsoft Office 2013</a></li>
</ul>
</div>
*Note : Warna biru : Url postingan yang dituju
Warna merah : Kata kata yang tampil dalam headline tersebut
Terimakasih
0 Komentar untuk "Membuat Headline Disamping Scrollbar "