Klik Tag | Web Programming Tutorial

Posts

Showing posts with the label CSS

Simple Table CSS

Membuat tampilan tabel lebih menarik dengan CSS3. Tampilan tabel pada website ataupun pada aplikasi berbasis web haruslah menarik, karena tabel akan menampilkan data. Bisa dibayangkan jikalau data yang di tampilkan berupa angka yang banyak. Kalau tampilan tabel tidak menarik, sudah pasti yang membaca data pun akan pusing melihatnya. Berikut ini adalah contoh css untuk tabel : <!DOCTYPE html> <html> <head> <title>Simple Table CSS3</title> <style type="text/css"> body{width:500px;margin:0 auto;margin-top:25px;font-family:Verdana, Tahoma, Arial, "Trebuchet MS";font-size:13px;color:#666;padding:20px;} .table{ border:1px solid #ddd; border-collapse: collapse; border-spacing: 0px; width:100%; box-shadow: 0px 1px 2px #D1D1D1; } .table tr th{ border:1px solid #ddd; padding:10px; vertical-align: baseline; padding: 21px 25px 22px; text-shadow: 1px 1px 0px #FFF; background: #

Membuat Background Gradient Dengan CSS

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, #FFFF