CSS3 Glowing Text Effect

Oke, menindaklanjuti postingan saya yang kemarin. yang kebetulan membahas tentang cara penggunaan Text-Shadow. Kali ini saya akan membahas tutorial yang masih berhubungan dengan text shadow.

Penggunaan text shadow ternyata nggak cuma segitu aja
Kita bisa melakukan sedikit trik sehingga text kita bisa tampil lebih menarik. Salah satunya adalah Glowing Effect. Triknya cukup sederhana, kita hanya perlu menambahkan nilai bayangan lagi dan dipisahkan dengan koma . Lebih jelasnya ikuti terus ya....

Okay, to the tuts :D
Masih ingat dengan cara penggunaan syntax text-shadow yang kemarin sudah saya bahas??
Nah, untuk menerapkan trik glowing text effect ini, nilai yang kita isi hanya blur-nya saja. Nilai x-offset (horizontal) dan y-offset (vertikal) -nya kita beri nilai 0 (nol).

Get Ready Readers!!
Buat coba2 aja, kita buat kata "Teks Percobaan" lalu diberi tag <span>
Ini contohnya:

<span>Teks Percobaan</span>

Kemudian kita tambahkan text-shadow nya dengan menambahkan tag style di tag span. Kita mulai dengan warna hitam dulu ya?

<span style='text-shadow: 0px 0px 5px black;'>Teks Percobaan</span>

Teks Percobaan

Mulai keliatan??
Berikutnya, kita tinggal menambahkan nilai text-shadow lagi. Ingat, dipisah dengan koma.
Caranya, syntax text-shadow tadi, kita tambahin dengan nilai seperti berikut:

text-shadow: 0px 0px 5px black, 0px 0px 10px black;

(nilai blur kedua usahakan lebih besar dari nilai blur sebelumnya, tapi jangan terlalu jauh. Ya..kira2 jaraknya antara 2-5px lah. Ini akan membuat bayangan menyebar dengan terlihat rapi)

Teks Percobaan

Bisa ditambahin lagi

text-shadow: 0px 0px 5px black, 0px 0px 10px black, 0px 0px 15px black;

Teks Percobaan

Haha, berhasil nggak??
Sekarang mungkin keliatan jelek, berikutnya tinggal kamu yang coba cari warna sendiri. Jangan lupa sesuaikan sama background, terus warna teks samakan dengan warna bayangan (tapi kalo menurutmu lebih bagus dengan warna lain, silahkan :D ). Sisanya, tinggal kamu yang menentukan!
Oiya, nilai bayangan bisa kita tambah lagi. Sesuaikan aja ama kebutuhan kita (tapi saya belom tau, ada batas maksimumnya apa nggak. kalo ada yg tau, komen aja ya).

Nah, buat contohnya, bisa liat teks eksperimen saya berikut:

text-shadow:  #5CE4FF 0px 0px 4px, #5CE4FF 0px 0px 6px, #5CE4FF 0px 0px 10px, #5CE4FF 0px 0px 20px;

hasilnya:

TEKS EKSPERIMEN :)

Simple Glowing Text Effect

*bener2 tanpa gambar lho* hehehe

Silakan berkreasi :D Semoga berhasil !!

Kalo ada yang nggak dipahami, atau ada yang ingin share, atau ada yang mau mengoreksi tutorial diatas,
monggoooo komentarnya ya =)

<ZepT>

Tutorial Penggunaan Text Shadow CSS3

Coba liat Header Blog saya (Judul Blog dan Descriptionnya), mungkin biasanya orang akan menggunakan gambar untuk membuat effek teks seperti itu. Namun dengan perkembangan CSS yang saat ini begitu cepat, kita bisa mengurangi penggunaan gambar dan meminimalisir size page. Sehingga halaman situs kita tetap tampil menarik walaupun sedikit gambar.

Membuat efek teks dengan CSS3 sebenernya nggak begitu susah kok. Tips saya, dalam mempelajari syntax2 seperti HTML, CSS, sampai PHP sekalipun, kita cuma perlu teliti dan sabar. Kita harus mengenali betul karakteristik dan fungsi dari setiap baris kode. Jika kita telaten, pasti akan bisa dengan sendirinya.

Tadinya saya mau langsung ngasih tutorial tentang Glowing Text Effect atau Efek Teks Bercahaya dengan CSS3. Tapi berhubung kayaknya banyak yang belum ngerti, jadi saya terangin sedikit ya

Oke, kita mulai...
Mungkin sebelumnya anda bisa ngeliat salah satu contoh penggunaan text-shadow di blog teman saya, Johanes. Disitu juga udah disinggung sedikit mengenai pengenalan text-Shadow.

Nah, buat yg belom ngerti, saya jelasin sedikit ya...
coba liat gambar syntax text shadow berikut

[Sori ya gambarnya jelek...hehe]

Penjelasannya kira2 seperti ini:

• syntax berwarna hitam adalah perintah untuk menampilkan text shadow (bayangan teks), kemudian
• Warna merah adalah besar jarak bayangan secara horizontal, (bila nilai kita isi angka lebih dari "1", maka posisi bayangan akan semakin ke kanan. Tapi bila kita isi lebih dari "-1", maka sebaliknya, posisi bayangan akan semakin ke kiri)
• Warna biru adalah panjang jarak bayangan secara vertikal. (pengisian nilainya sama dengan yang sebelumnya. Bisa negatif, atau postitif. Bila positif posisi bayangan akan semakin ke bawah, dan bila negatif akan semakin ke atas)
• Hijau adalah tingkat blur (kekaburan bayangan). (semakin besar nilai blur, bayangan akan semakin kabur/tidak jelas. Tapi bila semakin kecil, maka bayangan akan semakin jelas/tegas)
• Dan warna ungu adalah warna bayangan. (bisa menggunakan RGB, Heksa, atau HSL. Gampangnya sih pake heksa aja)

Oke, kemudian...

1. Contoh Pertama

Kita akan membuat syntax text shadow dengan nilai sebagai berikut: text-shadow: 1px -2px 3px #000000;

hasilnya-->

text-shadow: 1px -2px 3px #000000;

Nah, bayangan yang muncul akan ke arah kanan 1pixel (horizontal), ke atas -2pixel (vertikal), dan tingkat kekaburan/blur 3pixel.

2. Memasukkan Syntax Text-Shadow ke dalam Teks

(Sebelumnya, untuk yang belum tau. Kode CSS Template Blogger normalnya ditempatkan setelah kode <b:skin><![CDATA[  dan sebelum kode </bskin> )

Misalnya kita ingin efek bayangan ditambahkan ke bagian header blog kita. Kode header title normalnya adalah "h1", jadi coba cari kode h1 tersebut di edit HTML (utk pengguna blogger). kamu akan liat kode seperti ini-->

.header h1 {syntax css...} 

[kode mungkin berbea tiap template, tapi intinya nggak beda jauh] 

Kemudian, kita tinggal memasukkan syntax text-shadow di dalam kurung kurawal tersebut. Jadinya (contoh aja)-->

.header h1 {
font-size: 40px;
font-family: arial, serif;
color: #737373;
text-shadow: 1px -2px 3px #000000;
line-height:1.2em;
letter-spacing:1px;
}

----save dan preview. hasilnya???? Oke nggak??

Lha trus, gimana kalo kita mau nambahin text shadow di  description header, atau lainnya? Nggak beda jauh kok sama cara barusan. Cuma, perhatiin kode CSSnya aja, yang mana yang mau ditambahkan text-shadow.

3. Text Shadow di Tengah-Tengah Kalimat

Nah, kalo untuk penggunaan text shadow di kata2 tertentu atau ditengah2 kalimat??

Cukup simpel kok. Kita bisa memanfaatkan kode HTML "span" di tengah2 kalimat dan masukkan syntax text-shadownya di dalam tag "style". Contoh penggunaanya=>

Sebelum

ini adalah sebuah kalimat biasa dan hanya kata ini yang diberi text shadow

Setelah

ini adalah sebuah kalimat biasa dan hanya <span style='text-shadow:1px -3px 3px #000000;'>kata ini<span> yang diberi text shadow

Hasilnya

ini adalah sebuah kalimat biasa dan hanya kata ini yang diberi text shadow

Catatan!

tag style bisa diganti dengan class, atau id. Tapi kalo dijelasin sekarang bakal lebih ribet lagi. hehehe

nanti Insyaallah akan saya jelasin sedikit di lain posting :D

Sekarang, tinggal kamu yang berkreasi!!

---

---

Silahkan dicoba sendiri ya....

kalo ada yang kurang paham atau ada penjelasan yang nggak jelas, silahkan ditanya.....

[next ----> Glowing Text Effect With CSS3]

Ditunggu komentarnya ya???

<ZepT>

Let's Choose The Right Browser

Udah lama nggak posting nih. Kangen juga rasanya... Haha, akhir2 ini sibuk ngedesain templatenya. Hehe, maklum baru ngarti HTML & CSS... Itu juga baru dasarnya sih :D
Ya setidaknya hasilnya juga nggak jelek2 amat lah :P

Let's get to the topic,
Choose The Right Browser,  bukannya "Pilih Browser yang kanan"...
Tapi pilih browser yang BENAR.

Diantara sekian banyak browser, pasti kawan sudah kenal dengan IE, Safari, Firefox, Netscape atau yang sekarang lagi ngetrend "Crhome". Masing masing browser tentunya memiliki keunggulan dan kekurangannya masing2.

Jika kawan berkunjung, pasti kawan yang memakai browser XX (nanti tau) akan tanya, "lah, kok bentuknya nggak jelas ya?", dan komentar lainnya

Ini bukan salah saya, yang salah ya si browser itu....
Kalo kawan mau dapetin kenyamanan dan tampilan maksimal saat browsing, gunakanlah browser yang tepat...
Nah, di bawah ini adalah perbandingan fitur beberapa browser bedasarkan hasil test :

Safari 4 (Win)

Firefox 3.5 (Win)

Google Chrome (Win)

Opera 10 (Win)

Internet Explorer 6, 7 & 8

Coba kawan bandingkan....
Sudah tau kan kenapa kadang di browser anda suka ada bagian yang nggak muncul dengan baik...

Makanya sekarang saya lebih milih pake Chrome, selain bisa menampilkan halaman web dengan baik, programnya enteng banget alias nggak boros2in memory, untuk belajar web designing juga bagus kok. Apalagi ada HTML Inspector-nya....

Sekarang, tinggal anda yang memilih... Browser mana yang terbaik menurut anda....

Ada yang nggak setuju?
monggo saran dan kritiknya.... :D

<ZepT>

Ayo Gabung Di Linkstoxx !!

Linkstoxx adalah jaringan sosial pertama yang membayar anda untuk mengundang teman. Setiap bulan, Linkstoxx melibatkan sejumlah uang yang akan dibagi diantara anggota sesuai dengan jumlah teman mereka, loyalitas mereka, dan partisipasi mereka dalam kelompok diskusi atau grup. Linkstoxx akan membayar setiap anggotanya dengan mata uang Euro yang mana sistem payoutnya dilakukan secara otomatis dikirim ke Paypal anda setiap akhir bulan.

Nah, kalo kurang percaya bisa dilihat dari bukti pembayaran berikut :
- Payout pertama : 30 Agustus 2010

- Payout kedua : 29 September 2010

Ya... bukan punya saya sendiri sih...

Saya juga baru tau kalo ada situs seperti ini yang membayar kita dengan euro. Tapi, kalo mau tau lebih lanjut bisa langsung kunjungi aja mas Ichsan. 

Kalo gabung di Linkstoxx dengan referral orang lain, kamu bisa langsung dapet € 0,14 diakunmu sebagai bonus. Tapi jika anda daftar tanpa referral, maka kamu tidak akan mendapat apa2.
Karena Linkstoxx pake bahasa Prancis biar lebih gampang silahkan ikutin tutorial berikut untuk mendaftar di Linkstoxx.

Cara Daftar Linkstoxx :
1. Klik banner di bawah ini:

2. Isi kolom yang disediakan:

Pilih Inscription

Keterangan :
- Homme = Laki-laki
- Femme = Perempuan

3. Setelah itu login ke email yang telah anda daftarkan. Linkstoxx akan mengirim sebuah link ke email kamu, berupa link aktivasi

4. Masukkan kode aktivasi yang sudah diterima melalui email di kolom ini :

Pilih Confirmer

5. Setelah itu akan tampil secara langsung email dan password anda (simpan dan ingat) untuk login di Linkstoxx.

6. Nah,  Sekarang kamu bisa langsung mendapatkan € 0,14 karena udah ngendaftar dengan referrer saya. Pilih Gestion Des Paiements untuk mengisi email paypal anda.

7. Lalu, masukkan email Paypal kamu di kolom berikut :

Pilih Appliquer Les Preferences De Paiements

8. Selesai. Sekarang tinggal anda yang memperbanyak kegiatan di situs ini supaya pundi-pundi euro semakin bertambah :D

Ingat!!!
Daftar sendiri = tidak dapat apa2
Daftar dengan referralku = € 0,14 / mungkin lebih :D

Sumber: Ichsan025104

Trik Mudah Mengamankan Flashdisk dari Virus

Yo Bloggers Indonesia!!
How are you today??

Pada posting kali ini, saya mau sedikit membicarakan tentang keamanan file di Flashdisk. Nah, pasti pada penasaran gimana sih cara yang paling mudah, cepat, dan aman utuk nyimpen file di flashdisk, atau di media storage/penyimpanan lainnya. Karena selama ini, rata2 kita hanya mengandalkan kemampuan scanner dari antivirus untuk membersihkan file dari virus.

Flashdisk,
Siapa coba yang saat ini nggak kenal ama si mungil satu ini. Dengan alat yang tidak jauh lebih besar dari jempol orang dewasa terebut, kita bisa menyimpan berbagai file yang kita inginkan dengan mudah tanpa perlu menghiraukan ukuran file yang akan disimpan. Tidak seperti disket yang biasanya cuma bisa nyimpen 3-4mb.
Namun, hal inilah yang justru malah dimanfaatkan virus untuk menerobos masuk ke system komputer kita. Karena flashdisk mudah dibawa dan sering dicolok sana-sini. Itulah yang menyebabkan flashdisk rentan sekali terhadap serangan virus.

Solusinya?
Setau saya, dalam dunia komputer nggak ada yang 100%. Semua pasti punya celah. Jadi nggak ada solusi yang bener2 ampuh. Tapi bukan berarti kita malah diem aja nggak berdaya. Kita masih bisa mencegah kok? Ingat, mencegah lebih baik daripada mengobati :D heheheh

Nah, salah satu cara pencegahannya yang paling mudah adalah dengan memasang “segitiga ajaib” di folder :D

…..
Hah? Apaan tuh??

Hehe
Mungkin jika anda pengguna SmadAV, hal ini mungkin sudah biasa. Biasanya waktu kita men-scan pake SmadAV, tanpa sepengetahuan kita folder “Δ Smad-Lock Δ” secara otomatis telah tercopy. SmadAV telah men-klaim kalo folder ini adalah folder paling aman asal jangan me-rename sama sekali folder ini. Oiya, juga ada folder Autorun.inf yang juga membantu mengamankan komputer kita dari virus autorun (mungkin nggak perlu dijelasin lagi kan :)

Oke, sebenernya sih, kita bisa kok me-rename folder tersebut sesuai yang kita mau. Misalnya: Δ Folderku Δ ,dsb
Intinya, jangan menghapus symbol “segitiga” yang ada. Hal ini bisa menghilangkan fungsi ajaibnya…. hehe
Segitiga ini berfungsi untuk mengecoh virus sehingga virus mengira kalo itu bukanlah folder. Jadi, setiap file yang ada di folder yang sudah diberi “segitiga ajaib” ini bisa dibilang aman!!

Berikut hasil riset saya:

Sebuah File *.exe sengaja saya taruh di luar folder yang ber- Δ. Beberapa waktu kemudian (setelah saya colok2 di sembarang wanet), discan kembali dengan antivirus saya (dengan AVG), ternyata ada virus yang nemplok di file *.exe tersebut. Sedangkan file yang terdapat di dalam folder ber-Δ masih seperti saat baru dicopy.

Kesimpulan saya:
Cara ini benar-benar ampuh untuk mencegah tertularnya file kita dari virus. Walau tetap memiliki sedikit kelemahan.

Kelemahannya:
1. “Mencegah tertular”, berarti file yang sebelumnya sudah tertular atau sudah diselipkan virus, apabila dimasukkan ke dalam folder ber-Δ ini. Virusnya masih akan terselip di file tersebut. Tapi tetap tidak akan menulari file lainnya.
2. File yang berekstensi .exe dan sejenisnya, harus dikeluarkan dari folder ini terlebih dahulu. Jadi tidak bisa langsung dibuka dari folder ini. Kecuali file yang berekstensi seperti *.doc, *.mp3, dsb

Tips dari saya:
1. File yang akan dicopy sebaiknya tetap discan terlebih dahulu
2. TETAP WASPADA!! Karena virus selalu mengintai data kita :P

Sekian dulu ya posting dari saya! Semoga menghibur… eh, semoga bermanfaat!!
Ketemu lagi di posting selanjutnya!
Jangan pelit komen ya :P