Pengantar LESS - Dynamic Preprocessor Stylesheet

Bismillah. Alhamdulillah. Cukup lumayan lama pernulis bermain-main dengan kosakata dalam bahasa CSS sehingga memunculkan berbagai keinginan, baik keinginan dalam mengikuti perkembangan bahasa CSS untuk mengenalinya lebih jauh, maupun keinginan cara penulisan kosakata CSS yang lebih mudah dan cepat. Kemudian penulis melakukan penelusuran untuk mencari alat atau perangkat lunak yang bisa digunakan dalam menulis kosakata bahasa CSS dengan lebih cepat dari pada cara primitif, awal pencarian ditemukanlah bahasa SASS (Syntactically Awesome Stylesheets) yang merupakan cikal bakal dari pengembangan bahasa-bahasa Preprocessor Dynamic Stylesheet, namun SASS ternyata kurang bersahabat bagi mereka-mereka yang belum terbiasa dengan Ruby atau Compass. SASS dikembangkan oleh Hampton Catlin yang terinspirasi dari bahasa Haml (HTML abstraction markup language) yang juga dikembangkan oleh pengembang SASS. Penelusuran dilanjutkan dan bertemulah dengan LESS yang dibuat dan dikembangkan oleh Alexis Sellier atau lebih dikenal dengan cloudhead. Ternyata selain LESS ada juga bahasa Preprocessor CSS lainnya yaitu Stylus.

Memahami CSS Selector - Bagian 3

Bismillah. Alhamdulillah. Dua artikel yang khusus membahas CSS Selector telah ditulis dengan harapan kita bersama bisa mempelajarinya dengan baik. Dan mudah-mudahan dapat memberikan gambaran serta memecahkan permasalahan-permasalahan yang berhubungan dengan CSS selama ini. Saya menulis artikel tentang CSS Selector bukan bermaksud menggurui sahabat blogger, tapi pada mulanya dimaksudkan sebagai catatan pribadi, untuk mengingatkan diri sendiri disaat lupa. Maklum saya juga bukanlah blogger profesional yang setiap hari selalu berkutat dengan kode-kode CSS. Semakin jarang bertemu dengan CSS semakin besar kemungkinan lupa.

Memahami CSS Selector - Bagian 2

Bismillah. Alhamdulillah. Membahas tentang CSS terkadang sangatlah membingungkan. Karena jika diibaratkan, bahasa CSS adalah make-up untuk mempercantik penampilan suatu elemen. Sederhananya, CSS itu berpengaruh terhadap suatu elemen, namun tidak mampu membuat atau menciptakan elemen. CSS hanya akan tampak menarik jika bersatu dengan suatu elemen, namun tidak mampu berdiri sendiri. Pemahaman, pengetahuan dan pengalaman yang kurang dalam menggunakan CSS kadang berakibat cukup fatal dengan tidak tampilnya suatu elemen, bergesernya posisi elemen, tertutupnya elemen satu oleh elemen lainnya, posisi yang tidak rata dan seimbang dan lain sebagainya, dan kita sering kesulitan untuk mencari solusinya ketika ratusan bahkan ribuan baris CSS telah dituliskan.

Memahami CSS Selector - Bagian 1

Bismillah. Alhamdulillah. Perkembangan bahasa markup Cascading Style Sheet (CSS) cukuplah pesat dan ini membuat tampilan situs menjadi semakin dinamis. Pada awal perkembangannya, bahasa CSS masih termasuk kaku, namun kini para web desainer mampu menciptakan efek-efek yang mengesankan hanya dengan CSS. Ini tentunya seiring dengan ide-ide yang terus berkembang, kebutuhan akan situs yang sederhana namun tetap menarik dan banyak lagi faktor lain yang membuat bahasa markup CSS semakin hebat. Para developer browser pun dipaksa untuk mengikuti perkembangan bahasa markup ini, atau bahkan para developer browser-lah yang memancing perkembangan bahasa markup yang satu ini. Ini tentunya berimbas pada pertambahan kosakata yang digunakan pada bahasa markup CSS, dan bagi para pecinta desain layout situs tentunya juga harus menyediakan memori ekstra untuk menghafal lebih banyak kosakata.

Menyembunyikan Teks Diatas Gambar (Font Crush)

Bismillah. Alhamdulillah. Untuk menampilkan gambar logo sebuah website, kita biasanya mengganti nama anchor link pada bagian header H1 dengan gambar logo, padahal H1 secara semantic digunakan sebagai identitas pada situs tersebut, sehingga ada pula yang menggunakan metode CSS untuk menempatkan gambar logo. Gambar Logo diletakan pada kode CSS sebagai background, pada saat halaman di-load, gambar logo dianggap background oleh header H1. Jika title atau judul header H1 tidak diset indentasinya, maka title akan menimpah gambar logo karena title berada diatas gambar logo (lihat ilustrasi gambar).