Tampilkan postingan dengan label Tips. Tampilkan semua postingan
Membuat Pola Background website ala Twitter Profile
Salah satu trend webdesain adalah mempercantik halaman background web
dengan pola. Pola ini bisa berupa garis,ukiran, titik atau
kombinasinya. Jika anda ingin tahu contoh website yang menggunakan pola
background ini adalah buntu.com dan http://www.Codeacademy.com. Nah intinya kita ingin membuat website seperti itu.
Kelebihan teknik ini ukuran filenya sangat kecil dibanding dengan menggunakan background image full wallpaper. Teknik ini juga sering disebut CSS sprite. Agar anda tidak kebingungan mencari pola background yang menarik, silahkan kunjungi http://subtlepatterns.com.
Tutorial ini adalah kelanjutan dari tutorial sebelumnya yang membahas tentang typografi web dengan Googlewebfont.Saya akan mengajarkan membuat background pola dengan dua cara yaitu cara statis dan cara dynamis.
1. Buat tiga tombol link untuk masing masing backround.
3. Buat fungsi PHP untuk mengubah background
Inti dari kode diatas adalah gunakan pola yang terpilih, jika tidak ada yang dipilih gunakan pola default yaitu shattered.png.
4. panggil fungsi didalam code CSS seperti ini
Artikel By : candra.web.id
Kelebihan teknik ini ukuran filenya sangat kecil dibanding dengan menggunakan background image full wallpaper. Teknik ini juga sering disebut CSS sprite. Agar anda tidak kebingungan mencari pola background yang menarik, silahkan kunjungi http://subtlepatterns.com.
Tutorial ini adalah kelanjutan dari tutorial sebelumnya yang membahas tentang typografi web dengan Googlewebfont.Saya akan mengajarkan membuat background pola dengan dua cara yaitu cara statis dan cara dynamis.
Cara statis
Untuk cara ini berikut adalah langkah langkahnya- Buka http://subtlepatterns.com
- Pilih pola yang cocok lalu download
- extract file pola (format png) kedalam folder background.
-
1
2
3
| body{background: url('background/namapola.png') repeat} |
Mengganti background secara dynamis
Anggaplah kita ingin membuat website seperti twitter. Pengguna twitter bebas mengganti halaman latar dengan pola background yang telah disediakan. Nah, kita juga bisa kok membuat yang mirip dengan twitter. Dalam contoh ini, ceritanya kita hanya menyediakan 3 pola background yaitu grey, noisy dan shattered. 3 file ini harus anda download dulu di http://subtlepatterns.com.1. Buat tiga tombol link untuk masing masing backround.
1
2
3
4
| <h3>Change Background</h3><a href='index.php?bg=grey' class='btn btn-primary '>Grey</a><a href='index.php?bg=grid' class='btn btn-success '>Noisy </a><a href='index.php?bg=shattered' class='btn btn-danger '>Shattered</a> |
1
2
3
4
5
6
7
| function set_background($bg) {if(!empty($bg)) { echo "background: url('background/$bg.png') repeat; } else { echo "background: url('background/shattered.png') repeat; }} |
4. panggil fungsi didalam code CSS seperti ini
1
2
3
4
| if(isset($_GET[bg])){ $_SESSION['bg']=$_GET['bg'];}set_background($_SESSION['bg']); |
Tampilan dari halaman
Demo Background dengan pola (CSS Sprite)
Source code & Demo
Silahkan lihat DEMOnya DISINI. download source codenya sendiri disini. Bagi anda yang sudah mendownload source code tutorial typografi web dengan Googlewebfont tidak perlu lagi mendownload karena code pada tutorial ini sudah menjadi satu dengan tutorial tersebut.Artikel By : candra.web.id
Cara Membuat Gadget Windows 7 Sendiri (HTML)
Tapi kalau punya lebih gak apa-apa sih, malah dianjurkan). Apakah anda termasuk dalam kategori tersebut? Saya yakin anda termasuk dalam kategori diatas, malahan melebihi pengetahuan penulis.
5 Trik Mempercepat Koneksi Internet
Penggunaan Internet sekarang ini sudah menjadi kebutuhan pokok di Indonesia dewasa ini, bagi para penikmat Online. Kebutuhan tersebut dapat berupa Browsing, Sharing, Social Networking, Dowload dsb. Disamping itu, dilihat dari sisi kecepatan akses juga memungkinkan pengguna untuk mendapatkan Informasi lebih cepat dan efisien.
Banyak keluhan khususnya bagi para pelanggan Internet Service provider (ISP) akan lambatnya koneksi Internet baik pengguna selluler ataupun Modem PC. GSM ataupun CDMA sekarang ini juga hampir memiliki tingkatan sama dalam hal kecepatan akses dan Receiving Information dari Website.
