CSS Tips - CSS Sprites

CSS Sprites - menggabungkan beberapa file gambar menjadi satu gambarCSS Sprites!! Pernahkah dengar nggak??? Sprite... Hmm... sejenis minuman temannya Coca-Cola mungkin!!! ha.. ha... :D CSS Sprites itu merupakan tekhnik CSS untuk menggabungkan beberapa file gambar (khusus gambar yang berdimensi kecil) menjadi satu gambar utuh. Tujuan utama pembuatan CSS Sprites ini adalah untuk mengurangi waktu delay download resource & HTTP Requests file-file gambar sebelum digabungkan. Keuntungannya tentu...

Selengkapnya

Simple CSS Trik - Embossing Text CSS

Membuat efek text umumnya dilakukan pada object text gambar, baik itu menggunakan program image editor Adobe Photoshop, Adobe Illustrator maupun menggunakan software image editor lainnya. Namun pada posting kali ini saya akan mencoba membuat embossing text effect menggunakan simple css trik.Terdapat dua opsi yang dapat digunakan untuk membuat emboss text effect, pertama efek teks timbul dan kedua efek teks tenggelam.Pertama membuat text effect tenggelam. Ilustrasi; background text berwarna abu-abu (silver/#666), warna text hitam. Pertama buat dahulu...

Selengkapnya

Rollover Image CSS - Hemat Space & Bandwidth

Umumnya rollover image (gambar rollover) CSS biasa menggunakan 2 gambar terpisah atau 2 gambar pada satu file image.Jika menggunakan dua gambar terpisah, contohnya seperti berikut. Pertama harus ada dua gambar yang akan dijadikan objek rollover image (contoh: logo Facebook). Terdapat 2 gambar, pada gambar di bawah masing-masing gambar normal dan rollover / hover mouse.Gambar NormalGambar HoverCSS yang dipakai adalah seperti di bawah ini:[css].fbDua { width:125px; height:125px; margin:20px auto;}.fbDua...

Selengkapnya

Tips Optimalisasi CSS File

Trik Memperkecil Ukuran File CSSSudah jelas jika semakin kecil ukuran file CSS maka logikanya semakin cepat pula browser meload file CSS. Ada beberapa trik yang dapat dilakukan untuk memperkecil (optimalkan) ukuran file CSS, berikut beberapa diantaranya: BUAT FILE CSS DALAM SATU SINGLE FILE Ketika pengguna (visitor) membuka halaman web dengan banyak objek (seperti misalnya gambar atau script) akan membutuhkan HTTP request yang mana request ini akan memperlambat waktu respon halaman web. Semakin banyak objek yang diload (dimuat) otomatis waktu...

Selengkapnya

Dreamweaver Layout 3

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 3) Jika pada bagian ke-2 template yang anda lihat sama persis dengan previewnya, selanjutnya tahap penyempurnaan akhir dapat anda praktekkan seperti yang tertulis di bawah. Modifikasi kode 'Header' Pada tag 'header (#header)' tambahkan kode berikut ini pada mode edit css (style.css) => position: relative; <= Kemudian tambahkan kode di bawah ini: [css] #header ul { margin: 0; list-style: none; float: left; right: 0px; bottom: 0px; position: absolute; } #header li { float: left; display:...

Selengkapnya

Dreamweaver Layout 2

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 2) Postingan kali ini adalah penyempurnaan layout website menggunakan Dreamweaver (lanjutan dari bagian 1). Jika pada bagian 1 hanya membuat layout mentahnya saja, kali ini menambahkan beberapa background gambar, menambahkan navigasi menu vertikal dan horizontal dan yang pasti tujuan utamanya adalah membuat tampilan layout website menjadi kelihatan lebih enak dipandang. Modifikasi kode 'body' Sebelum mulai download dulu file gambarnya...

Selengkapnya

Dreamweaver Layout 1

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 1) Banyak orang yang pertama kali menggunakan Adobe Dreamweaver sebelum mulai mencoba sudah merasa terintimidasi karena mungkin bingung dengan banyaknya panel dan fitur yang ada di dalamnya. Jujur saja pertama kali saya menggunakan aplikasi ini memang merasa demikian. Jika anda merasa demikian, jangan khawatir.. nggak usah takut, namanya juga masih belajar seperti saya ini. Dimana-mana dalam melakukan suatu hal baru yang kompleks pasti...

Selengkapnya

Tips SEO - 'Style Attribute'

Optimasi SEO dengan menyisipkan 'Style Attribute' CSS ke dalam Konten Posting Seperti pada bahasan sebelumnya tentang 'Bagaimana menempatkan keyword pada suatu halaman website/blog', yang membahas dimana saja titik-titik kritis yang harus anda isi dengan keyword. Tidak jauh dari topik sebelumnya di atas kali ini saya mencoba memodifikasi sedikit bagaimana menyisipkan 'Style Attribute' ke dalam setiap keyword. Maksud dari menyisipkan 'Style Attribute' ke dalam keyword adalah supaya format penulisan setiap posting anda kelihatan lebih rapi. Ok langsung...

Selengkapnya

Trik Sederhana Membuat Image Rollover CSS

Pada awalnya konsep image rollover memakai dua atau lebih file gambar yang berbeda, satu file gambar dibuat untuk default image dan satu lagi aktif jika mouse diarahkan ke object link gambar. Jika memakai dua atau lebih file source gambar yang berbeda untuk membuat image rollover, pernah saya coba memang bisa berfungsi namun sayangnya kurang responsif. Alasannya perlu waktu tambahan request load image yang kedua (rollover) oleh browser ketika mouse diarahkan pada object link gambar. Problem ini...

Selengkapnya

External Style Sheet Link Tag CSS

Banyak keuntungan yang didapat apabila anda menggunakan metode 'external style sheet' dibandingkan dengan menggunakan metode 'Internal Style Sheet' ketika menyisipkan css ke dalam dokumen html. Berikut keunggulan menggunakan metode 'external style sheet':Lebih cepat daripada menggunakan metode 'Internal Style Sheet', dengan kata lain menggunakan metode external style sheet dapat menghemat waktu mengetik anda karena proses pengetikan code css hanya dilakukan sekali dan dapat diterapkan untuk beberapa dokumen html. Jika anda menggunakan 'Internal...

Selengkapnya