CSS3 Text dan CSS3 Font

Assalamu'alaikum wr.wb.

A. Pengertian 

    CSS3 berisi beberapa fitur teks baru. Dalam bab ini kita akan belajar tentang sifat-sifat teks berikut:

• text-overflow
• word-wrap
• word-break 

B. Alat dan Bahan

• Laptop
• SublimeText (Teks editor)
• Browser
• OS linux

C. Tujuan 

      Bertujuan untuk mengetahui dan mempelajari macam-macam text dan font. Yang dapat digunakan untuk memperindah tampilan dari web.

D. Tahap Pelaksanaan

     1. CSS-Text

• CSS3 text-overflow properti menentukan konten bagaimana meluap yang tidak ditampilkan harus memberi isyarat kepada pengguna.  Jika kata terlalu panjang untuk muat di dalam area, mengembang luar. 
• Contoh :
• Buka menu dan ketikkan sublime text
• Buka Sublime Text dan masukkan coding seperti dibawah ini.

Pembuatan css untuk text-overflows

Pemanggilan dari text-overflows

• Properti word-wrap memungkinkan Anda untuk memaksa teks untuk membungkus - bahkan jika itu berarti pemisahan itu di tengah kata:

• CSS3 word-break properti menetapkan aturan melanggar garis.

Pemanggilan class dari css yang dibuat dan

 

Juga pemanggilan class pada word-break

• Hasil keseluruhan dari coding diatas yaitu seperti dibawah ini.

   2. CSS-Font

 

   Dalam CSS3 @font-face aturan harus terlebih dahulu menetapkan nama untuk font (misalnya myFirstFont), dan kemudian arahkan ke file font.

Contoh menggunakan Teks Bold yaitu :

• Buka menu dan ketikkan Sublime Text
• Buka sublime text dan masukkan coding seperti dibawah ini.

• Hasil dari coding diatas akan menghasilkan seperti dibawah ini. Font yang digunakan yaitu menggunakan font arial.

E. Kesimpulan

   Dari pemaparan diatas dapat disimpulkan bahwa penggunaan text-flows pada tampilan web akan menghasilkan tatanan text yang lebih teratur. 

F. Referensi

•  http://www.w3schools.com/css/css3_text_effects.asp

Sekian dan Terimakasih.

SMK Bisa!!

Wasalamu'alaikum wr.wb.