Adam RELOADED's: Membuat Berbagai Macam efek Tulisan

Friday, July 16, 2010

Membuat Berbagai Macam efek Tulisan

Friday, July 16, 2010 |

Posted by : Adam_RELOADED |

Edit Post

Membuat Berbagai Macam Effek Tulisan - Bagaimana sih cara membuat tulisan dengan effek-effek yang mencolok mata, seperti effek terbakar, effek bayangan dan lain sebagainya ? Jawabannya yaitu dengan menggunakan fasilitas CSS.

Bagaimana sih cara membuat text menjadi bereffek menggunakan CSS itu?

Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Karena tidak semua “Browser” bisa menampilkan effek-effek tadi, jadi Sobat harus tahu betul perlu tidaknya menampilkan effek pada tulisan. Berikut daftar Browser yang support atau tidak support pada effek tulisan dengan CSS,

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 Sobat, sudah mantap untuk segera membuat effek tersebut, Sobat bisa langsung ikuti langkah-langkah berikut ini, perhatikan kode css di bawah 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)

Di bawah 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: #666;                

background: #000;                 

text-shadow: 0px 1px 0px #ccc;

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 MENCOBA -

Category Script Code

Adam RELOADED's

Membuat Berbagai Macam efek Tulisan

0 Comment:

Post a Comment

Pencarian . . . .

Messenger Status . . . .

Followers

STMIK AMIKOM Yogyakarta