Font Effect ini diciptakan dengan jQuery yang memungkinkan untuk membuat Text dengan empat efek yang berbeda dan dapat dikombinasikan satu sama lainnya.

Langkah awal untuk membuatnya kita hanya perlu meletakan jQuery berikut ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'></script>

Setelah itu kita juga harus memasang script berikut ini untuk menciptakan Efek

<script src='http://sites.google.com/site/archivesiugi/for_post/Efek_Font_jQuery.js' type='text/javascript'></script>

Efek yang dibuat secara individu, biasanya dengan menunjukan tag ID atau lebih umum dengan menggunakan kelas.

Contoh:

<div id="myEfect" style="color:#000; font-family: Impact; font-size: 60px;"> Efect Outline</div>
<script> $('#myEfect').FontEffect({ outline:true }) </script>

Semua dibuat dengan cara yang sama, label dengan gaya pribadi dan kemudian diikuti dengan memanggil fungsi:

<script> $('#nameID').FontEffect({ ....... Effect ....... }) </script>

Demonstrasi

Outline

eBook si Ugi

Gradient

Effect Mirror

Outline + Shadow

Gradient + Mirror

FireFont

Ghost

Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi

Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi

Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi

Ini merupakan beberapa contoh yang digunakan dalam demonstrasi diatas:

Shades
<script>$('#myEffect').FontEffect({ shadow:true })</script>

Gradient
<script>$('#myEffect').FontEffect({ gradient:true, gradientColor:'#FFF' })</script>

Mirror
<script>$('#myEffect').FontEffect({ mirror:true,mirrorColor:'#f3f2f2',mirrorTLength:80,mirrorTSTart:.8 })</script>

Outilne + Shades
<script>$('#myEffect').FontEffect({ outline:true, shadow:true })</script>

Gradient + Mirror
<script>$('#myEffect').FontEffect({ gradient:true, mirror:true, mirrorColor:'#00FFFF',mirrorTLength:80,mirrorTSTart:.8 })</script>

Combined effects
<script>$('#myEffect').FontEffect({ outline:true, outlineColor1:'#fc0', outlineColor2:'#f00', gradient:true, gradientColor:'#f00', gradientPosition:10, gradientLength:60, gradientSteps:10 })</script>

Demikian pula, kita dapat membuat sebuah kelas CSS dan menggunakannya beberapa kali, misalnya, kita dapat mendefinisikan header untuk H2:

<h2 class='myClass'> text </h2>
<h2 class='myClass'> other text </h2>
.......
<script>$('.myClass').FontEffect({ shadow:true })

Ini adalah parameter yang dapat Anda gunakan:

outline: true mengaktifkan efek
outlineColor1: "# RRGGBB" warna sudut kiri atas
outlineColor2: "# RRGGBB" warna kanan bawah
outlineWeight: 1 | 2 | 3 menunjukkan cahaya | biasa | tebal (default adalah 1)

mirror: true mengaktifkan efek
mirrorColor: "# RRGGBB" refleksi warna
mirrorOffset: jarak ke nilai teks (default adalah -10)
mirrorHeight: refleks nilai persentase tinggi (default adalah 50)
mirrorDetail: 1 | 2 | 3 menampilkan detail tinggi | Menengah | rendah (default adalah 1)
mirrorTLength: Blending persentase nilai (default adalah 50)
mirrorTStart: 0/1 opacity awal (default adalah 0.2)

shadow: true mengaktifkan efek
shadowColor: "# RRGGBB" warna bayangan
shadowOffsetTop: posisi nilai atas dalam pixel (default adalah 5)
shadowOffsetLeft: posisi nilai yang lebih rendah dalam pixel (default adalah 5)
shadowBlur: 1 | 2 | 3 menunjukkan tidak lenyap | rendah | tinggi (default adalah 1)
shadowOpacity: shadow nilai opacity (default adalah 0,1)

gradien: true mengaktifkan efek
gradientColor: "# RRGGBB" gradien warna
gradientPosition: Posisi nilai persentase awal (default adalah 20)
gradientLength: gradien persentase nilai (default adalah 50)
gradientSteps: variasi nilai (default adalah 20)

sumber: vagabundia

Blogs Tutorial

JQuery

Text Effects

0 komentar:

Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon

Konversi Kode

Emoticon

Font Effect dengan jQuery

Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi
Buku Catatan si Ugi

Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi
Electronic Book si Ugi

Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi
Tempat Belajar dan Berbagi

0 komentar:

Post a Comment

Catatan :

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Font Effect dengan jQuery

Buku Catatan si UgiBuku Catatan si UgiBuku Catatan si UgiBuku Catatan si UgiBuku Catatan si UgiBuku Catatan si UgiBuku Catatan si UgiBuku Catatan si UgiBuku Catatan si Ugi

Electronic Book si UgiElectronic Book si UgiElectronic Book si UgiElectronic Book si UgiElectronic Book si UgiElectronic Book si UgiElectronic Book si UgiElectronic Book si UgiElectronic Book si Ugi

Tempat Belajar dan BerbagiTempat Belajar dan BerbagiTempat Belajar dan BerbagiTempat Belajar dan BerbagiTempat Belajar dan BerbagiTempat Belajar dan BerbagiTempat Belajar dan BerbagiTempat Belajar dan BerbagiTempat Belajar dan Berbagi

Next

Newer Post

Previous

Older Post

0 komentar: