Andi's Blog: Blog Stuff

Tampilkan postingan dengan label Blog Stuff. Tampilkan semua postingan

Membuat Efek Tulisan Dengan CSS Text Shadow

Write comment

Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.

Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.

Safari 3.1 (Mac/Win)	yes, but no multiple shadows
Safari 4 (Mac/Win)	yes, full support
Opera 9.5 (Mac/Win/Lin)	yes, full support
Firefox 2/3 (Mac/Win/Lin)	no
Firefox 3.1/3.5 (Mac/Win/Lin)	yes, full support
Google Chrome 1 (Win)	no
Google Chrome 2 (Win)	yes, full support
IE 7/8 (Win)	no
Shiira (Mac)	yes, but no multiple shadows
Safari on iPhone	yes, but no multiple shadows
Opera Mini 4.1	yes, no blur radius

Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

color: #000; background: #fff; text-shadow: 1px 1px 1px #424242;

color : #000 adalah warna dasar tulisan
background: #fff adalah warna latar
1px 1px 1px #424242 untuk warna bayangannya (shadow)

Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

	`color: #000; background: #fff; text-shadow: 2px 2px 3px #000;`
	`color: #000; background: #fff; text-shadow: 2px 2px #000;`
	`color: #000; background: #fff; text-shadow: 2px -2px 3px #000;`
	`color: #000; background: #666; text-shadow: 0px 1px 1px #fff;`
	`color: #666; background: #000; text-shadow: 0px 1px 0px #ccc;`
	`color: #fff; background: #666; text-shadow: 0px 1px 1px #000;`
	`color: #fff; background: #000; text-shadow: 1px 1px 6px #fff;`
	`color:#FFE9C7;` `background:#FF6C17; text-shadow: 2px 2px 2px #A6250C;`
	`color:#823210;` `background:#FF6C17; text-shadow:1px 1px 1px #FF9924;`
	`color: #fff; background: #fff; text-shadow: 1px 1px 4px #000;`
	`color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;`

Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup. Thumbs-up

Optimalkan Feedburner Dengan Memasang Pageflip

Write comment

Menjawab pertanyaan sobat Taufik pada komentarnya di postingan elegant style template, yang menanyakan cara membuat gambar di pojok kanan atas seperti kertas di lipat dan memasang feedburner di dalamnya. Mungkin maksudnya cara membuat pageflip kali ya, semoga benar perkiraan saya.

Dan kebetulan saya belum pernah buat postingan ini, tidak ada salahnya kita bahas sama-sama, walaupun tutorial ini sudah basi dan usang. Buat yang belum tau apa itu pageflip, bisa melihat contoh demonya disini.

Gambar hidup yang dipojok kanan atas itulah yang disebut pageflip, jika disorot dengan mouse akan terbuka dan jika di klik akan menuju ke halaman yang dimaksud. Dan halaman yang dimaksud tersebut adalah feed kita yang sudah kita daftarkan di feedburner. Dibawah ini adalah 2 gambar yang akan kita gunakan untuk membuat pageflip.

Sebelumnya saya mohon maaf jika saya mengambil gambar pageflip ini tanpa seijin yang empunya. Karena saya sendiri tidak tau persis siapa yang mempunyai hak paten atas gambar pageflip ini, dan saya mengambilnya lewat search engine. Begitu saya lihat, sangat banyak gambar yang sama sehingga saya tidak tau dan tidak bisa mencantumkan sumber pemilik gambar yang asli.

Buat sobat blogger, ini tutorialnya semoga bermanfaat :

Setelah login ke blogger, langsung saja tuju Edit HTML.
Letakkan kode css berikut ini sebelum kode ]]></b:skin>

#pageflip { position: relative }
#pageflip img { border:none; width:50px; height:52px; z-index:99; position: absolute; right:0; top:0; -ms-interpolation-mode:bicubic }
#pageflip .msg_block { width:50px; height:50px; position:absolute; right:0; top:0;
background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/S1sO-qUjmxI/AAAAAAAACwU/DrjPrO1XXaU/page%20flip_thumb%5B1%5D.png?imgmax=800) no-repeat right top; text-indent:-9999px }
Copy semua kode script yang ada disini dan kemudian letakkan setelah kode ]]></b:skin>
Kemudian letakkan kode berikut ini tepat setelah kode <body>

<div id='pageflip'>
<a href='http://feeds.feedburner.com/blog-zone' target='_blank'>
<img alt='' src='http://lh6.ggpht.com/_7Y9pl24WpQY/S1sO3NyCTSI/AAAAAAAACwM/6DxgJaTzsdc/page%20flip%20image_thumb%5B1%5D.png?imgmax=800'/>
<span class='msg_block'/>
</a>
</div>
Simpan Template.

Keterangan :

Ganti tulisan yang berwarna merah dengan ID feedburner sobat.
Tulisan yang berwarna biru adalah alamat url dari gambar pageflip, coba di klik untuk mengetahui gambar yang dimaksud.

Silahkan sobat kreasikan sendiri gambarnya dan jika ingin membuat pageflip dengan tujuan halaman yang lain sobat tinggal ganti kode <a href='http://feeds.feedburner.com/blog-zone' target='_blank'> dengan alamat url yang lain, misalnya alamat url untuk mengajak pengunjung blog menjadi referral sobat dalam suatu bisnis online yang sobat ikuti.

Semoga tutorial ini bisa bermanfaat, selamat mencoba !

Andi's Blog

Membuat Efek Tulisan Dengan CSS Text Shadow

Optimalkan Feedburner Dengan Memasang Pageflip

Kategory

Blog Archive