CSS3 SHADOWS AND CSS3 FONTS (FO).

Untuk artikel kali ini, saya akan membahas tentang css3 shadows, text, dan fonts.
Dengan CSS3 kamu dapat menambahkan efek bayangan pada text dan element.

CSS3 Shadows terdiri dari 2 properties yaitu:
    text-shadow - untuk memberikan efek shadow/ bayangan pada tulisan.
    box-shadow - untuk memberikan efek shadow/ bayangan pada box.

Begini contoh penerapan text - shadow:

Cara penulisannya:

Red untuk menentukaan warna bayangannya dan 5 px di gunakan untuk memberikan efek blur pada bayangannya.

Kita juga dapat memberikan efek multiple shadows dengan cara memberikan tanda koma.
Contoh:


Penulisan warna juga dapat digunakan dengan warna hexa.

Maka hasil yang akan di hasilkan menjadi seperti ini:


Box-Shadow

Contoh penerapan box shadow:


Cara penulisannya:


Buatlah terlebih dahulu divnya, berikan lebar dan tingginya. setelah itu kita dapat memberikan shadownya dengan syntax: box - shadow.

Kita juga dapat membuat shadownya menjadi blur dengan cara yang sama  seperti text- shadow tadi dengan cara menambahkan 5px setelah 10px sehingga syntaxnya menjadi seperti ini:

box-shadow :10px 10px 5px navy;

Sekian tentang css3 Shadows, Sekarang saya akan membahas tentang css3 fonts.

 CSS3 FONTS

Dengan CSS3 @font-face kita dapat menggunakan font yang kita inginkan.
Cara penggunaan font-face:

Pertama - tama, kita harus memiliki file font yang ingin kita gunakan terlebih dahulu. Pastika bahwa file font yang ingin kita gunakan berada dalam satu folder dengan file kita sepert ini:
Disini saya menggunakan file font roboto sebagai contoh.

Begini cara penulisannya:

 

Berikan nama untuk font family tersebut terlebih dahulu, disini saya memberikan namanya font coba.

Setelah itu buat class coba dengan menyertakan font-family font coba nya.
Kita juga dapat mengatur font-weight, font-sizenya.
 

 

 

Maka hasil yang akan di hasilkan adalah:

 

Yeay, kita berhasil mengganti fontnya menjadi font roboto.
Sekian dan terimakasih. Semoga Bermanfaat.