Dengan HTML5 kita sangat mudah membuat color picker. Dengan HTML5 ini color picker mudah sekali dibuat dengan satu baris berikut ini:Warna: <input type=”color” /><br/> Coding lengkapnya:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html><head><title>Color Picker dengan HTML5</title></head><body>Warna: <input type=”color” /><br/></body></html>
Drop down menu HTML dengan Anylink CSS Menu
Variasi untuk drop down menu yang kompleks adalah dengan menyajikan kode HTML saat suatu menu disorot. Berikut akan dijelaskan membuat drop down menu HTML dengan menggunakan Anylink CSS Menu. Langkah-langkahnya adalah : Download source codenya di http://www.dynamicdrive.com/dynamicindex1/anylinkcssmenu.css dan http://www.dynamicdrive.com/dynamicindex1/anylinkcssmenu.js .
Membuat treeview dengan jQuery
Salah satu variasi dari navigasi menu adalah dengan tampilan tree. Kita akan membahas bagaimana membuat treeview dengan jQuery. Langkah pertama adalah mendownload source code yang ada di http://www.dynamicdrive.com/dynamicindex1/treeview/jquery.treeview.zip . Pada script anda silahkan include file seperti contoh di bawah ini:
Animasi transisi menggunakan CSS3
Dengan CSS3 kita dapat membuat animasi transisi (transition animation )saat terjadi perubahan misalnya karena hover. Property yang digunakan untuk animasi transisi ini adalah transition-propertyIni merupakan property elemen apa saja yang akan dianimasikan.Untuk variasi penggunaan di browser menjadi -webkit-transition-property, -moz-transition-property dan
Skew dengan CSS3
Dengan CSS3 kita bisa membuat efek skew. Untuk membuat efek skew kita menggunakan property transform: skewXIni merupakan skew ke arah horizontal.Dalam penerapan ke broswser-browser, saat ini menggunakan variasi -moz-transform: skewX, -webkit-transform: skewX, -o-transform: skewX dan -ms-transform: skewX transform: skewYIni merupakan
Rotasi (rotate) dengan CSS3
Pada CSS3 kita dapat melakukan rotasi dari suatu element dengan properti transform. Tetapi saat ini implementasinya masih disesuaikan dengan masang-masing browser sehingga ada variasi property menjadi -moz-transform, -webkit-transfrom, -o-transform dan -ms-transform. Sebagai contoh dapat dilihat pada coding berikut ini:<!DOCTYPE html
Transparan/opacity di CSS3
Dengan pengaturan transparansi atau opacity antara dua layer maka kita akan menentukan sampai seberapa kedua layer tersebut bergabung. Dalam CSS3 kita menentukan tingkat transparansi dengan property opacity.Makin rendah opacity maka layer yang di belakang akan lebih kuat, makin tinggi opacity
Drop shadow dengan CSS3
Efek drop shadow dapat membuat disain tampak menarik jika kita menata dengan baik. Dalam CSS3 telah ditambahkan fasilitas drop shadow dengan menggunakan property box-shadow. Property box-shadow memiliki format:box-shadow: inset x y blur spread color; Nilai inset menunjukkan di mana shadow
Membuat border rounded corner dengan CSS3
Untuk memperindah tampilan website, web designer dapat membuat tampilan border melengkung atau border rounded corner. Tentu saja border melengkung ini harus dikonsep sejak awal sehingga sesuai dengan disain secera keseluruhan. Property-property yang dapat digunakan untuk border melengkung atau border rounder
Membuat efek letterpress dengan CSS3
Dengan menggunakan fasilitas text-shadow kita dapat membuat efek letterpress atau cetakan huruf dengan menggunakan CSS3. Sebagai contoh perhatikan coding berikut ini:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html><head><title>Letter Press</title><style type=”text/css”>h1{ background-color: #a25252; font-family: ‘Arial Bold’; font-size: 75px; color: #333;