Tutorial CSS
Membuat Dropdown Menu dengan CSS
Pada tutorial kali ini saya akan mencoba membahas konsep dasar pembuatan dropdown menu dengan CSS dengan TANPA JAVASCRIPT. Menu yang akan kita buat tampilannya dapat dilihat seperti pada gambar di bawah ini Yang pertama kita siapkan tentunya adalah struktur menunya terlebih dahulu yang menggunakan UL seperti di bawah ini <div class="menubar"> <ul class="menu"> <li>Menu 1</li> <li>Menu 2 <ul> <li>Sub Menu 1</li> <li>Sub Menu 2</li> </ul></li> <li>Menu 3</li> <li>Menu 3 <ul> <li>Sub Menu 1</li> <li>Sub Menu 2</li> </ul></li> </ul> </div> Berbekal script tersebut di atas, kita membutuhkan script CSS dimana nantinya ada 2 level UL. UL li pertama adalah sebagai...
Kustom Bullet dengan Menggunakan CSS
Sejauh yang kita kenal, sebuah bullet atau list dalam html hanya berbentuk kotak hitam (square), bulat hitam (default) dan lingkaran (circle). Namun tahukan Anda bahwasanya bullet and numbering pada halaman web itu bisa dimodifikasi? Tentu saja jawabannya YA. Dan sekarang saya akan mencoba membahasnya untuk Anda semua Untuk melakukan modifikasi ikonnya kita membutuhkan ikon pengganti dimana dalam hal ini kita membutuhkan file gambar dengan ukuran yang menyesuaikan dengan kebutuhan. Sebagai bahan tutorial kali ini ikon gambar yang akan kita gunakan adalah menggunakan gambar bintang ini: <!DOCTYPE html> <html> <head> <title>CSS Custom Bullet</title> <style> ul.list{ list-style:none; margin:0; padding:0 } ul.list li{...
Membuat Vertikal Menu dengan CSS
Sebelumnya saya telah membahas pembuatan horizontal menu dengan CSS, nah sekarang giliran menu vertikalnya. Bagaimana sih pembuatannya. Akan saya coba bahas di kesempatan ini. Okeh, menu vertikal yang akan saya coba bahas ini hasil akhirnya adalah kira-kira seperti pada gambar berikut Hal dasar yang kita butuhkan adalah persis seperti halnya pembuatan horizontal menu, yakni bullet list UL atau OL. Sebagai bahan contoh, kita akan bikin tampilan menu seperti di atas. Kode HTML yang kita butuhkan dapat dlihat seperti di bawah ini <UL class="menu"> <li><a href="menu.html">Menu 1</a> <li><a href="menu.html">Menu 2</a> <li><a href="menu.html">Menu 3</a> <li><a href="menu.html">Menu 4</a> <li><a href="menu.html">Menu 5</a> </UL> ...
Mengenal CSS Sprite
Pernahkah Anda mendengar istilah CSS Sprite??? Mungkin diantara Anda sekalian ada yang pernah mendengarnya, bahkan sudah mengenalnya atau mungkin sudah terbiasa bekerja dengan CSS sprite. Baiklah, untuk Anda yang belum mengenal atau yang ingin refresh mengenai CSS sprite mari kita pelajari lagi di sini. "sprite", apa ya arti dari kata ini??? eumph, dari pada bingung mikirin artinya saja mending kita explore ke luar. Sprite identik dengan yang namanya image atau gambar, ya seringnya sprite ini digunakan pada game-game. Biasanya dalam sebuah game membutuhkan banyak sekali image, misalnya tombol OK pada game akan berubah warna atau berubah gambar latar atau memudar, dll....
Membuat Tab Menu dengan CSS
Kali ini saya akan sedikit berbagi mengenai cara membuat tab menu menggunakan CSS. Sebenarnya sudah banyak sampel-sampel instan yang tinggal download, tapi kali ini saya hanya akan berbagi apa dan bagaimana cara pembuatannya agar paham dan hasilnya sesuai dengan apa yang kita inginkan. Bailkah, bentuk tab menu yang akan saya bahas kali ini terlihat seperti gambar di bawah Baiklah, sekarang kita langsung ke proses pembuatannya... Oya pembahasan akan saya jelaskan berdasarkan source codenya ini <html> <head> <style type="text/css"> ul.tabmenu{ padding: 3px 0; margin-left: 0; font: bold 12px Verdana; border-bottom: 1px solid gray; list-style-type: none; ...
Membuat Horizontal Menu dengan CSS
Sekarang sudah saatnya bagi saya untuk berbagi cara membuat menu horizontal hanya dengan mengandalkan CSS (tanpa javascript). Ya... konsep dasarnya telah saya jelaskan pada tulisan sebelumnya di CSS untuk Membuat Navigasi Menu dan saya harap Anda sudah paham dengan apa yang saya maksud di sana. Oya... sebelumnya perlu saya sampaikan, bahwa saat ini sangat banyak horizontal menu CSS gratisan yang instant. Anda cukup mendownload dan mengeditnya untuk langsung digunakan. Tapi, berhubung saya orang yang memiliki penasaran cukup tinggi saya berusaha membuatnya sendiri menjelaskannya untuk Anda dengan konsep seperti contoh-contoh yang bertebaran di internet.Sekarang kita akan mencoba membuat dari yang paling sederhana...
CSS untuk Membuat Navigasi Menu
Saat ini teknologi CSS sering digunakan oleh web desainer tidak hanya untuk membuat desain yang menarik, tetapi juga banyak digunakan untuk membuat menu atau navigasi. Tahukah Anda bahwa kebanyakan web desainer menggunakan listing atau bullet dalam pembuatan menunya??? Perlu bukti, lihat website saya ini! Anda lihat deretan menu Home, Tutorial, Gallery, Tutorial dan seterusnya di atas tulisan ini.... Ketika Anda mengarahkan kursor mouse Anda ke menu Home, Tutorial, Gallery, Hiburan dan Tools akan keluar beberapa submenu. Di website saya ini menu dropdown tersebut dibuat hanya dengan mengandalkan CSS. (NB: maaf, karena udah update sistem di web saya ini tidak lagi menggunakan...
Komponen-komponen yang Diperlukan dalam Membangun CSS
Ada beberapa komponen utama dalam langkah pembuatan CSS ini. Cara pembuatannya pun cukup beragam, sesuai keinginan Anda. Sebuah style sheet terdiri dari beberapa aturan (rules). Masing-masing aturan terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi (declaration block). Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh seicolon atau titik koma ( ; ). Masing-masing deklarasi terdiri dari property, titik dua ( : ) dan nilai (value). Syntax CSS dibagi dalam 3 bagian : selector {property : value} Keterangan: selector : tag HTMLatau objek id atau class yang formatnya akan didefinisikan, terletak sebelum tanda { dan } property...
Menggunakan CSS
Saat ini CSS sangat banyak banyak digunakan dalam berbagai jenis website dinamis maupun statis. Keberadaan CSS ini benar-benar sangat membantu dalam hal desain tampilan dan layout website. Akibatnya keberadaan code CSS pun terus diperbaharui hingga sekarang lahirlah apa yang disebut dengan CSS3 (akan dibahas nanti).. Untuk menggunakan styles sheet CSS dapat dilakukan dengan beberapa cara. Inline Style (di dalam elemen HTML) Internal Style Sheet (di dalam tag <head>) External Style Sheet (di dalam dokumen CSS, terpisah) Browser Default Inline Style (di dalam elemen HTML) Dengan meggunakan inline style anda dapat membuat dynamic style tanpa harus menambahkan script ke web anda. Inline...
Pengenalan CSS
Apa Itu CSS? CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah aliran -atau mungkin kita mengenal istilah flow- dari suatu kode ke kode lain yang saling berhubungan. Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML. Keuntungan Penggunaan CSS Jika Anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet misalnya, tentu saja...