Tampilkan postingan dengan label Tutorial CSS. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial CSS. Tampilkan semua postingan
14 Mei 2014

Modifikasi Kapitalisasi Huruf dengan CSS

14 Mei 2014  Iskandar Dzulkarnain  2 komentar
Suatu saat kamu akan dihadapkan dengan permasalahan kapitalisasi huruf. Misalkan dalam sebuah dokumen, kamu ditugaskan untuk mengubahkan seluruh judul dengan menggunakan huruf kapital. Okelah hal itu bisa dilakukan secara manual jika hanya satu atau dua dokumen. Bayangkan saja jika hal itu adalah mengubah seluruh judul entri sebuah blog, yang notabene blog tersebut telah memiliki 2000 entri lebih. Apakah kamu akan mengubahnya secara manual? Tentu saja hal itu adalah tindakan bodoh.

Baca juga: Mengatur Jarak Antarbaris dengan CSS

Lantas, bagaimana solusinya? Ubahlah dengan CSS! CSS mampu membantumu untuk mengubah kapitalisasi huruf. Tak hanya mengubahkan ke bentuk kapital, kamu bisa mengubahkan menjadi huruf kecil. Penasaran bukan bagaimana caranya mengubah kapitalisasi huruf dengan CSS. Berikut ulasannya.

Modifikasi Kapitalisasi Huruf dengan CSS

Dalam CSS, memodifikasi kapitalisasi huruf dilakukan dengan menggunakan properti "text-transform". Text-transform ini memiliki beberapa nilai, seperti: capitalize, uppercase, lowercase, dsb. Berikut ini adalah salah satu contoh implementasi properti text-transform.

See the Pen sAIJd by Iskandar Dzulkarnain (@iskael) on CodePen.

Selain nilai yang disebutkan di atas, masih ada lagi nilai lainnya, yaitu: none dan inherit. Nilai none meniadakan text-transform, sedangkan nilai inherit adalah meniru nilai dari induknya. Bagaimana? Mudah, 'kan? Selamat mencoba :)
Selengkapnya
9 Mei 2014

Mengatur Jarak Antarbaris dengan CSS

9 Mei 2014  Iskandar Dzulkarnain  4 komentar
Bagi pengguna Microsoft Word maupun Open Office sangatlah lazim dengan istilah "line-spacing". Line-spacing atau yang lebih nyaman disebut dengan jarak antarbaris sangat sering ditemui dalam penulisan naskah. Normalnya, jarak antarbaris yang digunakan bernilai 1.5 untuk bisa dibaca dengan mudah. Beberapa mensyaratkan untuk memakai jarak antarbaris double. Namun, keadaan awal biasanya bernilai single.

Baca juga: Mengatur Jarak Antarhuruf dengan CSS

Jika hal itu ada di aplikasi editor teks, tentu saja fitur ini ada di dalam CSS. Dalam membuat kontek blog bisa dibaca dengan nyaman adalah dengan memperhatikan jarak antar baris. Bayangkan jika jarak antarbaris terlalu dekat, maka tentu saja menyulitkan untuk dibaca. Berikut ini adalah cara mengatur jarak antarbaris dengan CSS.

Mengatur Jarak Antarbaris dengan CSS

Untuk memudahkan kamu memahami apa itu jarak antarbaris, di bawah ini adalah cuplikan teks yang saya tulis di aplikasi Open Office. Di gambar tersebut saya buat contoh jarak antarbaris single, 1.5, dan double.

Penggunaan Line-spacing pada Open Office

Sudah paham 'kan efek dari pengaturan jarak antarbaris? Berikut ini adalah contoh implementasi jarak antarbaris menggunakan CSS. Klik pada tab CSS untuk melihat kode CSS-nya.

See the Pen gsemJ by Iskandar Dzulkarnain (@iskael) on CodePen.

Untuk menghasilkan line-spacing "single", berikan nilai "line-height" yang sama dengan "font-size"-nya. Begitu pula dengan line-spacing 1.5, maka besar line-height = 1.5 x font-size. Berlaku juga untuk line-spacing double, triple, atau besaran lainnya. Mudah bukan? Selamat mencoba :)
Selengkapnya
8 Mei 2014

Mengatur Jarak Antarhuruf dengan CSS

8 Mei 2014  Iskandar Dzulkarnain  2 komentar
Sudah lama sekali saya tidak membahas mengenai CSS di Iskael. Kali ini saya membahas CSS tentang bagaimana cara mengatur jarak antarhuruf dengan CSS. Perlu diketahui, mengatur jarak antarhuruf dalam dunia tipografi biasanya dikenal dengan istilah kerning.

Normalnya, setiap font mempunyai kerning yang berbeda-beda. Kadang kita membutuhkan jarak antarhuruf yang lebih besar maupun lebih kecil, sesuai dengan kebutuhan. Dengan menggunakan CSS, masalah tersebut bisa teratasi. Penasaran bukan bagaimana caranya? Berikut ini pembahasannya.

Mengatur Jarak Antarhuruf dengan CSS

Mengatur jarak antarhuruf pada CSS menggunakan properti "letter-spacing". Nilai dari properti ini menentukan jarak antarhuruf. Berikut ini adalah demo penggunaan letter-spacing. Kamu bisa melihat kode CSS dengan mengeklik tab "CSS" (di sebelah kiri tab Result).

See the Pen wGaLx by Iskandar Dzulkarnain (@iskael) on CodePen.

Dalam contoh di atas dapat diketahui bahwa nilai dari properti letter-spacing bisa bernilai negatif. Penggunaan nilai negatif ini berfungsi bagi font yang mempunyai kerning terlalu lebar sehingga harus dipersempit.

Saya yakin kamu pun bisa menggunakan fitur CSS ini dengan mudah. Ada yang mau didiskusikan mengenai letter-spacing? Kamu bisa menuliskannya di kotak komentar :)
Selengkapnya
28 Feb 2014

Fitur CSS Selection Untuk Mengelabui Tukang Copas

28 Feb 2014  Iskandar Dzulkarnain  11 komentar
Belajar CSS terkadang sangat berguna bagi seorang blogger. Bagaimana tidak, dengan hanya mempelajari CSS yang dasar saja, kamu bisa sedikit menghindari seseorang untuk menyalin artikel blog kamu. Biasanya cara untuk menghindari orang lain dari menyalin artikel kamu adalah dengan bantuan JavaScript. Kali ini saya akan mengulas cara menanggulangi tukang copas dengan menggunakan CSS. Apakah bisa?

Jika dibilang bisa, tidak menjamin 100%. Hanya saja dengan cara ini setidaknya orang yang akan melakukan copas sedikit kebingungan. Bahkan biasanya apabila orang mematikan JavaScript-nya untuk bisa copas, maka hal ini tidak akan berpengaruh, karena ini adalah CSS. Penasaran bukan? Berikut ini ulasannya.

Cara Mengelabui Tukang Copas dengan CSS

Sebelum membahas bagaimana cara mengelabui tukang copas, kamu perhatikan demo di bawah ini. Pada baris yang terakhir, kamu akan menemukan tidak ada latar di belakang teks. Hal ini lah yang akan mengelabui tukang copas. Dia akan beranggapan bahwa tulisan kamu tidak bisa di-copas, padahal sebenarnya bisa. Jika dia menggunakan Ctrl A (memilih semua), maka cara ini akan menyulitkan tukang copas. Mengapa? Karena dia harus melakukan penyuntingan lagi.

See the Pen pJxru by Iskandar Dzulkarnain (@iskael) on CodePen.

Menarik bukan? Bagiamana caranya? Kamu hanya cukup membubuhkan selektor ::selection (untuk global), ::-moz-selection (untuk Firefox), atau ::-webkit-selection (untuk Chrome, Safari, dan Opera Next). Lalu, aturlah properti dari selektor itu dengan background: transparent. Mengapa tidak dengan background:none? Cobalah sendiri, nanti kamu tahu alasannya :)

Cara di atas mudah bukan? Kamu hanya perlu mengkolaborasikannya dengan skrip anti-copas dari JavaScript saja, biar makin greget. Selamat mencoba :)
Selengkapnya
14 Feb 2014

Cara Membuat Tampilan Blog Responsif

14 Feb 2014  Iskandar Dzulkarnain  26 komentar
Tampilan responsif bagi sebuah website saat ini hampir seperti sebuah kewajiban. Di tahun 2011 lalu, developer website tidak begitu peduli dengan tuntutan ini. Mereka menganggap bahwa vendor ponsel lah yang bertanggung jawab dengan ukuran layar yang dibuat. Namun, seiring berjalannya waktu, tepatnya awal 2012, tren mulai berubah. Banyak website yang memakai tampilan responsif.

Developer website mau tidak mau harus memikirkan tampilan responsif ini. Bukan berarti ini adalah sebuah masalah yang besar. Banyak jalan yang bisa dilakukan untuk menghasilkan tampilan responsif. Namun, hingga saat ini masih belum banyak yang mengoptimasi ukuran gambar saat tampilan website menjadi responsif. Karena hal itu perlu konfigurasi server yang tidak mudah.

Di entri kali ini saya akan membagi inti dari bagaimana cara membuat tampilan responsif. Penasaran bukan?

Cara Membuat Tampilan Blog Responsif

Dulu saat pertama kali saya mengenal tampilan responsive, saya hanya menggunakan kueri media yang ada di CSS. Namun, ternyata hal itu hanya berlaku untuk perangkat besutan Apple saja, seperti iPhone dan iPad. Untuk Android, ternyata ada standar tersendiri yang harus ditambahkan.

Tambahkan meta tag berikut ini di antara <head> dan </head>

<meta content='width=device-width, initial-scale=1' name='viewport'/>

Jika di HTML5 hilangkan / sebelum tanda >. Kode di atas digunakan untuk template Blogger yang berbasis XML.

Setelah itu, tambahkan kueri media di kode CSS kamu. Misalkan kamu ingin membuat tampilan yang berbeda di ukuran lebih kecil dari 721px dan lebih besar dari 480px, berikut cara penulisannya.

@media screen and (max-width: 720px) and (min-width: 480px) {

 /*-- isi dengan kode CSS-mu di sini --*/

}


Begitu juga dengan ukuran-ukuran yang lainnya, kamu bisa mengubah kode "max-width" dan "min-width"-nya. Mudah, bukan?

Contoh Template Blogger Responsif

Jika kamu pengguna layanan Blogger, kamu bisa mencoba salah satu template Blogger yang responsif ini.

Respon-X Blogger Template

Tertarik, kamu bisa mengunduhnya di halaman Download Respon-X. Kamu juga mengetes template ini dengan Responsive Tools.

Mengetes Tampilan Blog Responsif

Jika kamu ingin mengetes apakah tampilan website/blog kamu yang sudah responsif, kamu bisa mengunjungi situs Responsive Tools ini.

Responsive Tools

Selamat mencoba :)
Selengkapnya