Skip to main content

Membuat Background Gradient Dengan CSS

Image
By M. Ridho
Background Gradient
Salah satu kelebihan CSS3 adalah kita bisa membuat warna gradasi (gradient) hanya dengan menggunakan kode CSS. Warna gradient ini biasa digunakan untuk latar belakangn ( background ) website.

Selain itu, warna gradient juga biasa digunakan untuk background menu dan title di sidebar. Seperti pada blog ini, menggunakan gradient pada background menu dan title widget di sidebar.

Sayangnya penulisan kode css untuk membuat gradient ini berbeda untuk masing-masing browser. Jika warna gradient yang Anda buat bisa ditampilkan untuk browser Mozilla Firefox belum tentu bisa untuk browser-browser yang lainnya. tetapi itu tidaklah masalah, pada postingan ini Saya akan memberikan kode membuat background gradient dengan css untuk semua browse. Untuk membuat warna gradasi seperti gambar diatas, kita membutuhkan warna dengan kode #FFFFFF ( Putih ) dan #131B8A (Biru), sehingga kode pada CSS adalah seperti dibawah ini :

/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);

/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #131B8A));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #131B8A 100%);
 
Labels:

Comments

Post a Comment

Popular posts from this blog

Membuat Fungsi Sederhana dengan PHP

By
Dalam pemrograman PHP berbasis orientasi objek, kita akan mengenal istilah function (fungsi). Sebenarnya apa yang disebut function dalam pemrograman php ? Sebuat pertanyaan yang pasti pernah terbersit dalam pemikiran para pemula dalam pemrograman php. Function secara umum bisa diartikan dengan sekumpulan perintah yang sudah kita susun untuk membuat sebuah pola tertentu yang bisa kita panggil dan kita gunakan sewaktu - waktu. Adapun bentuk dari struktur function adalah sebagai berikut : <?php function nama_fungsi(variabel_a, variabel_b) {     ... statement ...    return data_yang_sudah_diproses; } ?> Contoh fungsi sederhana dapat kita aplikasikan sebagai berikut : <?php function nama($nama) { echo 'Hallo, perkenalkan nama Saya adalah <strong>'.$nama.'</strong>'; } nama('Muhammad Ridho'); ?> Jika dijalankan maka menghasilkan output sebagai berikut : function
1 comment
Read more

Membuat CRUD dengan PHP - MySQL

By M. Ridho
CRUD adalah singkatan dari Create - Read - Update - Delete. Bisa diartikan pada pembelajaran pemrograman ini kali ini kita akan belajar bagaimana cara menampilkan data, mengupdate, menghapus dan menyimpan data ke database menggunakan bahasa pemrogramanan PHP. Contoh tutorial ini boleh dibilang cukup kompleks,karena pada contoh program kita juga akan membaca nilai dari parameter. Untuk memulai membuat program berikut adalah file-file yang kita butuhkan : Step 1: Membuat Database Pertama kita harus membuat database terlebih dahulu. Disini saya mengumpamakan Anda sudah membuat database dengan nama crud-php. Setelah database dibuat, selanjutnya adalah membuat tabel. Berikut adalah dumping SQL untuk tabel karyawan : CREATE TABLE IF NOT EXISTS `karyawan` (   `id` int(11) NOT NULL,   `nama_lengkap` char(50) NOT NULL,   `jekel` char(15) NOT NULL,   `tanggal_lahir` date NOT NULL,   `tempat_lahir` varchar(50) NOT NULL,   `no_telp` char(20) NOT NULL,   `alamat` char(100) NOT NULL
12 comments
Read more

Membuat Database MySQL dari PhpMyAdmin

By
MySQL adalah database yang paling banyak digunakan dalam pemrograman web. PhpMyAdmin adalah user interface untuk memudahkan pengguna dalam mengelola data. Dalam tutorial kali ini kita akan mencoba membuat database melalui phpmyadmin. 1. Buka PhpMyAdmin. Buka phpmyadmin Anda melalui url pada browser : http://localhost/phpmyadmin phpmyadmin 2. Buat Database Pada menu database masukkan nama database misal : "dbkota" lalu klik tombol "Create" 3. Buat Tabel  Masukkan nama tabel (ex: tabel_kota) dan jumlah kolom. Kemudian klik tombol "Go" 4. Membuat Kolom Masukkan nama kolom yang dibutuhkan, misalnya pada tutorial kali ini kita membutuhkan 2 kolom. Yakni "id_kota" dan "nama_kota" berikut adalah detailnya: id_kota | type = INT | LENGTH / VALUES = 11 | Index = PRIMARY | AI = True | nama_kota | type = VARCHAR | LENGTH / VALUES = 30 | jangan lupa memberi nilai " PRIMARY " untuk  kolom id_kota dan checklis
1 comment
Read more