Praktikum 11 - Menggunakan Google Fonts

1. Tujuan

• Belajar menggunakan external font dari Google Fonts

2. Alat

• Text Editor
• Browser

3. Bahan

• spritesheet.png
• spritesheet.css

4. Dasar Teori

Google Font adalah salah satu layanan yang disediakan Google untuk memudahkan web developer dalam menghasilkan desain yang menarik dengan meyediakan font-font gratis. Fitur ini dapat anda akses pada alamat: https://www.google.com/fonts. Google menyediakan 3 cara, yakni dengan menggunakan tag <link>, perintah CSS @import, dan dengan JavaScript. Ketiga cara ini relatif tidak terlalu berbeda dari cara penggunaanya. Anda tinggal copy paste kode tersebut ke halaman HTML. Untuk kali ini, saya akan menggunakan cara dengan tag <link>.

5. Hasil Praktikum

Praktikum 10 - Membuat Ads Banner (Part 2)

1. Tujuan

• Belajar membuat Ads Banner berbasis HTML5.

2. Alat

• Text Editor
• Browser

3. Bahan

• spritesheet.png
• spritesheet.css

4. Dasar Teori

Efek Linear Gradient atau gradasi warna linear adalah sebuah visual effect yang dihasilkan olehperubahan dan bergeseran warna (gradasi) diatara 2 warna atau lebih. Arah gradasi atau perubahan warna ini dapat terjadi secara vertical (dari atas ke bawah atau dari bawah ke atas), secara horizontal (dari kiri ke kanan atau kanan ke kiri). Salah satu teknik horizontal centering untuk image adalah dengan menggunakan property text-align: center;. property ini bisa digunakan pada elemen HTML yang memiliki property display: block. untuk membuatnya horizontal center, maka container perlu di set text-align: center

5. Petunjuk Praktikum

1. Mengaplikasikan CSS Linear Gradient



2. Menambahkan sprite berikutnya



3. Me-resize sprite menggunakan CSS

6. Hasil Praktikum 

8. Referensi

• Creating an HTML5 Banner Ad with GreenSock (GSAP)