Blog Request tutorial? klik disini!

  • Membuat Efek Background Scrolling Dengan CSS

    Ditulis oleh: Rully Febrian
    1387 kali dibaca
    12 Jun / 2014 11:22

    Hallo teman-teman apa kabar, pada artikel ini kita akan membuat sebuah efek background yang menarik dengan menggunakan CSS. Selain untuk halaman website teknik ini juga bisa digunakan untuk halaman presentasi atau untuk deskripsi produk. Untuk membuatnya teman-teman hanya mengatur elemen dengan memberikan padding di suatu sisi sekitar 50% sehingga mendorong konten kesisi lain  dan mengatur background yang lebarnya sekitar 50% yang posisinya berlawan dengan konten. Setelah itu teman-teman mengatur background-attachment menjadi fixed. Untuk lebih jelas silahkan teman-teman membuat layout HTMLnya seperti dibawah ini:

     

    Membuat-Efek-Background-Scrolling-dengan-CSS

    Membuat-Efek-Background-Scrolling-dengan-CSS

     

    Simpan kode diatas dan coba buat illustration_03 dan illustration_04 dengan konten yang sama. Buatlah style.css seperti berikut:

    Membuat-Efek-Background-Scrolling-dengan-CSS

     

    Untuk download hasilnya silahkan teman-teman klik disini.

    Membuat-Efek-Background-Scrolling-dengan-CSS

     

    Demikian tutorial ini semoga bermanfaat dan menambah pengetahuan teman-teman dalam menguasai CSS. Terimakasih






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155