Blog tentang Segala Informasi, Trik Blogger, Tutorial Windows,dan laim-lain

Thursday, 14 June 2012

Membuat Fade Text in Pada Blog Anda

 



Untuk yang satu ini saya ingin membuat acara JavaScript seperti di mana Anda bisa membawa lebih dari satu item dan melihat efek yang lain. Apa yang saya lakukan untuk melakukannya adalah untuk membuang beberapa teks dan gambar ke div dan kemudian mengambang semuanya kiri sehingga teks ini sejalan dengan gambar. Selanjutnya, saya menerapkan warna: transparan dan line-height: 0px untuk div. Ini menempatkan teks di bagian atas div dan menyembunyikan hal itu.

Untuk membuat teks muncul di hover, saya hanya mengubah warna dan garis-tingginya. Ketika Anda membawa lebih dari gambar, zoom teks ke dalam pandangan! Ini adalah trik yang cukup rapi mengingat ini semua CSS.

#ex3 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#ex3:hover {
line-height: 133px;
color: #575858;
}

#ex3 img{
float: left;
margin: 0 15px;

Copas kode diatas dalam notepad
Simpan dengan nama Style.css

<link rel="stylesheet" type="text/css" media="screen" href="link url style.css"/>

Letakan diatas <head>
<div id="ex3">
        <img src="Url gambar sobat"><p>teks yang akan ditampilkan</p>
    </div>
Letakan dibawah<body>
<head> 

<link rel="stylesheet" type="text/css" media="screen" href="link url style.css"/>

</head> 
<body> 
 <div id="ex3">
        <img src="Url gambar sobat"><p>teks yang akan ditampilkan</p>
    </div>
</body> 
 
 


Membuat Fade Text in Pada Blog Anda Rating: 4.5 Diposkan Oleh: iland host

3 comments

Click here for comments
18 June 2012 at 07:44 ×

Wah sip, anda pasti suka nih dengan programming. Ide yang sangat brilian. Sip sip.
zayaps.blogspot.com

Balas
avatar
admin
20 June 2012 at 12:10 ×

wow..
bisa aja ngakalin codenya ya..
keren.. mnatep dah...

Balas
avatar
admin
Terima kasih sudah berkomentar
Open Banner Friend:
”cooltext428984918″ Blog Iwan Tanjung


Kumpulan Tutorial Design Graphic Saung Link Another Me Ants Kaka Bali Network Tanggulangin Community Cari Jodoh Wirausaha Modal Kecil Image Photobucket Iklan Mobil Share Everything  So Beautiful Link Chequita Chiproet Banner christian tatelu
Spoiler for jangan bugil di depan kamera:
Shorten your link Jual , Sewa Mobil Jual Rumah

SPONSOR

Lima Milyar Tujuh Milyar TANPA MODAL 125x125