Mencoba font effects (Beta) Google

Mencoba font effects (Beta) Google

  28 February    Andika

---

Apakah kamu telah pernah mencoba font effects (Beta) yang telah di rilis Google? Kalau belum, Di sini saya akan berbagi kode dan cara penggunaannya.

Yang namanya versi beta, tentu font effects ini belum benar-benar siap untuk di gunakan. Terbukti, hanya sebagian efek yang baru di tambahkan. Pada postingan ini, saya akan menunjukan efek yang telah bisa di gunakan dan efek yang belum bisa di gunakan.

Efek yang belum bisa di gunakan, sengaja saya buat dalam warna merah pudar dan di coret. Ini jelas beda dengan pratinjau yang ada pada laman Google itu sendiri.

Bagi kita yang belum tahu, tentu kita menganggap semua efek yang ada telah siap untuk di coba. Tapi kenyataannya bukanlah seperti itu.

Berikut tabel rangkuman efeknya,

Pratinjau	API	Class	Dukungan
Anaglyph	anaglyph	font-effect-anaglyph	Chrome, Firefox, Opera, Safari
Brick Sign	brick-sign	font-effect-brick-sign	Chrome, Safari
Canvas Print	canvas-print	font-effect-canvas-print	Chrome, Safari
Crackle	crackle	font-effect-crackle	Chrome, Safari
Decaying	decaying	font-effect-decaying	Chrome, Safari
Destruction	destruction	font-effect-destruction	Chrome, Safari
Distressed	distressed	font-effect-distressed	Chrome, Safari
Distressed Wood	distressed-wood	font-effect-distressed-wood	Chrome, Safari
Emboss	emboss	font-effect-emboss	Chrome, Firefox, Opera, Safari
Fire	fire	font-effect-fire	Chrome, Firefox, Opera, Safari
Fire Animation	fire-animation	font-effect-fire-animation	Chrome, Firefox, Opera, Safari
Fragile	fragile	font-effect-fragile	Chrome, Safari
Grass	grass	font-effect-grass	Chrome, Safari
Ice	ice	font-effect-ice	Chrome, Safari
Mitosis	mitosis	font-effect-mitosis	Chrome, Safari
Neon	neon	font-effect-neon	Chrome, Firefox, Opera, Safari
Outline	outline	font-effect-outline	Chrome, Firefox, Opera, Safari
Putting Green	putting-green	font-effect-putting-green	Chrome, Safari
Scuffed Steel	scuffed-steel	font-effect-scuffed-steel	Chrome, Safari
Shadow Multiple	shadow-multiple	font-effect-shadow-multiple	Chrome, Firefox, Opera, Safari
Splintered	splintered	font-effect-splintered	Chrome, Safari
Static	static	font-effect-static	Chrome, Safari
Stonewash	stonewash	font-effect-stonewash	Chrome, Safari
Three Dimensional	3d	font-effect-3d	Chrome, Firefox, Opera, Safari
Three Dimensional Float	3d-float	font-effect-3d-float	Chrome, Firefox, Opera, Safari
Vintage	vintage	font-effect-vintage	Chrome, Safari
Wallpaper	wallpaper	font-effect-wallpaper	Chrome, Safari

Dari hasil uji coba, sebenarnya efek-efek yang tersedia juga bekerja pada browser Internet Explorer 11.0.9600 kecuali fire-animation.

Cara penggunaan

Cara penggunaannya sebenarnya cukup mudah, kita hanya butuh kode API yang telah di tentukan untuk mengimport CSSnya. Anggap saja saat ini kita ingin menggunakan efek Shadow Multiple pada font Source Sans Pro.

Kode font Source Sans Pro,

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

Untuk menambahkan efek Shadow Multiple, tambahkan kode &effect=API setelah kode Source Sans Pro.

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro&effect=shadow-multiple' rel='stylesheet' type='text/css'>

Untuk menampilkannya efeknya ke dalam postingan atau tempat yang di inginkan, panggil efeknya menggunakan attribut Class. Contoh,

<div class="font-effect-shadow-multiple">Tulis kalimat yang akan kamu beri efek di sini!</div>

Untuk mengabungkan beberapa efek secara bersamaan agar lebih mudah dalam memanggil efek yang di butuhkan saat akan di gunakan, caranya sama dengan Cara menggabungkan beberapa link-kode dari Google Font Yakni dengan menambahkan tanda | setelah kode API sebelumnya.

Contoh,

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro&effect=shadow-multiple|neon' rel='stylesheet' type='text/css'>

Ini adalah sebuah terobosan yang bagus agar pengguna tidak merasa bosan dalam menggunakan font, Namun sayangnya, efek harus di import lewat kode-link font tanpa bisa menggunakan jalur khusus yang mengarah langsung ke efek terkait.