Praktikum 10 - Membuat Ads Banner [Part 2]

Tujuan

Belajar membuat Ads Banner berbasis HTML5.

Alat

Text Editor
Browser

Bahan

spritesheet.png
spritesheet.css

Dasar Teori

CSS linear-gradient adalah sebuah visual effect yang dihasilkan oleh perubahan dan pergeseran warna (gradasi) diantara 2 warna atau lebih. Arah gradasi atau perubahan warna ini dapat terjadi secara vertikal (dari atas ke bawah atau sebaliknya) dan secara horizontal (dari kiri ke kanan atau sebaliknya).

Teknik horizontal centering di CSS merupakan penggunaan beberapa properti untuk menyelaraskan elemen horizontal. Beberapa properti yang digunakan seperti margin, position dan lain sebagainya.

Tugas Praktikum

tirukan petunjuk praktikum yang diberikan

Petunjuk Praktikum

1. Mengaplikasikan CSS Linear Gradient

2. Menambahkan sprite berikutnya

3. Me-resize sprite menggunakan CSS

Hasil Praktikum

Kesimpulan

Untuk mendapat gambar yang berlayer pada spritesheet kita bisa menggunakan css linear-gradient untuk mengatur gradasi warna yang sesuai dengan spritesheet. Kemudian apabila kita ingin me-resize spritesheet menggunakan css, kita cukup mengatur ukuran div dengan merubah nilai pada width dan height dan kemudian mengatur letak posisi gambar dan ukuran dari background yang diinginkan.

Referensi

http://www.mohhasbias.com/prak-10-membuat-ads-banner-part-2/