Entri yang Diunggulkan

Program Trial 90 Hari Affinity Ada Lagi

Tampilkan postingan dengan label Tutorial CSS. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial CSS. Tampilkan semua postingan
11 Okt 2014

Cara Menggunakan Properti CSS3 Border-radius

11 Okt 2014  Iskandar Dzulkarnain  Beri komentar
Saya masih ingat tahun 2008 lalu saya ingin sekali membuat pinggiran sebuah kotak di HTML menjadi melengkung, tidak bersudut seperti biasanya. Pada tahun 2008, karena keterbatasan koneksi internet yang masih mahal; saya pun tidak bisa mengetahui seluk beluk mengenai CSS3. Alhasil, saya menggunakan gambar untuk mewakili lengkungan di setiap ujung. Saat itu pun, membuat website dengan teknik slicing Photoshop masih sangat digandrungi. Jadi sah-sah saja mengganti lengkungan itu dengan gambar.

Seiring dengan berjalannya waktu, saya mulai mengenal banyak mengenai CSS, khususnya CSS3. Pada CSS3 fitur lengkungan pada ujung itu dengan nama "border-radius". Fungsinya adalah menggantikan gambar yang biasanya dipakai, menjadi kode sederhana yang bisa diubah nilainya dengan mudah. Berikut ini adalah cara menggunakan properti border-radius.

Cara Menggunakan Properti CSS3 Border-radius

Dalam demo yang saya buat di bawah ini, saya membuat lima persegi dengan lebar dan tinggi 70 piksel. Setelah itu tiap-tiap persegi saya beri nilai border-radius yang berbeda. Secara berturut-turut saya beri nilai 0px, 4px, 8px, 16px, dan 50px.

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

Dari demo di atas bisa kamu lihat bagaimana sebuah persegi bisa menjadi sebuah lingkaran apabila nilai dari border-radius-nya melebihi dari setegah tinggi maupun lebar persegi.

Kamu juga bisa melihat kode CSS3 yang saya pakai. Dalam penggunaan border-radius, ada sedikit perbedaan bagi masing-masing browser. Untuk browser Safari, Google Chrome, dan Opera Next; menggunakan properti "-webkit-border-radius". Untuk browser Mozilla Firefox versi lawas menggunakan "-moz-border-radius". Namun, pada Mozilla Firefox terbaru, cukup menggunakan "border-radius" tanpa prefiks "moz" lagi.

Bagaimana, mudah bukan? Jika dibandingkan dengan menggunakan gambar untuk membuat lengkungan pada ujung; menggunakan properti border-radius jauh lebih mudah dan cepat. Ditambah lagi penggunaannya dinamis, tanpa harus memperhitungkan lebar sebuah elemen <div>. Selamat mencoba :)
Selengkapnya
1 Agu 2014

Kegunaan Z-index pada CSS

1 Agu 2014  Iskandar Dzulkarnain  4 komentar
Bagi kamu yang baru belajar CSS, suatu saat kamu akan menemukan sebuah properti di CSS yang bernama z-index. Z-index pada CSS digunakan untuk mengatur kedalaman sebuah elemen HTML.

Mudahnya, sebuah laman HTML itu dibentuk berdasarkan lapisan-lapisan (layer) elemen HTML. Elemen yang kodenya ditulis terlebih dahulu letaknya berada di paling bawah. Sebaliknya, elemen yang kodenya ditulis terakhir berada di bagian atas.

Berikut ini adalah salah satu contoh penggunaan z-index pada demo laman HTML. Saya tambahkan "z-index: 1;" pada bagian yang berwarna merah dan saya tambahkan "z-index: -1;" pada bagian yang berwarna kuning.

Sebelum Menggunakan Z-index


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


Setelah Menggunakan Z-index


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


Setelah melihat demo z-index di atas, apakah kamu sudah paham kegunaan z-index? Jika belum paham, silakan mencoba sendiri. Selamat mencoba :)
Selengkapnya
12 Jul 2014

Apa Beda Padding dan Margin pada CSS?

12 Jul 2014  Iskandar Dzulkarnain  1 komentar
Dunia CSS bagi seorang penulis blog kadang menjadi momok tersendiri. Biasanya, untuk orang yang baru belajar CSS, maka hal yang paling membingungkan adalah membedakan padding dan margin. Karena sekilas padding dan margin ini efeknya sama. Namun, tentu tidak mungkin ada dua properti berbeda yang memiliki fungsi sama.

Untuk itu, bagi pemula sangatlah penting mengetahui fungsi-fungsi dari sebuah properti CSS dan dapat membedakannya. Berikut ini adalah ulasan perbedaan antara padding dan margin. Tidak membingungkan jika kamu jeli dalam memahaminya.

Beda Padding dan Margin pada CSS

Pada dunia CSS, ada istilah Box Model. Pada Box Model ini terdapat setidaknya empat elemen, antara lain:
  1. Margin
  2. Border
  3. Padding
  4. Konten
Margin adalah elemen terluar Box Model. Sedangkan Konten adalah elemen terdalam Box Model. Jika digambarkan, Box Model seperti gambar di bawah ini.

Box Model

Warna oranye adalah margin. Warna kuning adalah border. Warna hijau adalah padding. Sedangkan, warna biru adalah konten. Sampai di sini, sudah paham?

Hal yang paling mencolok adalah fungsi margin adalah memberikan jarak antara box satu dengan box yang lainnya. Sedangkan fungsi padding adalah memberikan jarak antara konten dan border pada sebuah box.

Padding vs Margin

Dalam sebuah kasus, penggunaan padding untuk memberikan jarak pada sebuah box terhadap parent (induknya) bisa mengakibatkan munculnya blok, dan element dengan index lebih rendah dari box tersebut tidak bisa ditandai/diklik. Untuk itu, jika kamu ingin memberi jarak pada sebuah box, gunakan margin.

Bagaimana? Sudah paham atau malah makin bingung? Jika masih bingung, alangkah baiknya jika langsung mencobanya langsung. Selamat mencoba :)
Selengkapnya
6 Jul 2014

Membuat Tampilan Kolom Koran dengan CSS

6 Jul 2014  Iskandar Dzulkarnain  6 komentar
Dalam seni ngeblog, ada kalanya ingin membuat blogazine. Blogazine adalah gaya ngeblog yang menurut beberapa narablog keren. Sayangnya saya tidak sepakat jika blogazine keren. Hal ini karena membuat desain yang umum itu lebih susah dan banyak pertimbangan dibandingkan dengan hanya mendesain satu halaman blogazine saja.

Kecenderungan orang yang ngeblog dengan gaya blogazine, kontennya kurang kuat. Berbeda dengan blog yang desainnya umum, biasanya sudah fokus pada konten karena desain sudah selesai.

Dalam blogazine terkadang memakai gaya penulisan layaknya koran. Dengan CSS, kamu bisa membuat tampilan kolom-kolom layaknya koran. Bagaimana caranya? Penasaran, bukan? Berikut ini adalah ulasannya.

Gaya Kolom Koran dengan CSS

Untuk membuat tulisan bergaya kolom koran, CSS menyediakan properti "column-count". Untuk pengguna Mozilla Firefox menggunakan prefiks "-moz", untuk pengguna Google Chrome menggunakan prefiks "-webkit". Berikut ini adalah contohnya:

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


Untuk mengatur jarak antarkolomnya menggunakan properti "column-gap". Mudah, 'kan? Selamat mencoba :)
Selengkapnya
15 Mei 2014

Cara Membuat Multiple Background dengan CSS

15 Mei 2014  Iskandar Dzulkarnain  2 komentar
Normalnya, sebuah DIV memiliki satu background. Namun, dalam kasus tertentu, sebuah DIV memerlukan lebih dari satu background. Penggunaan lebih dari background ini adalah berfungsi untuk mengurangi beban yang dimuat akibat ukuran background yang terlalu besar.

Baca juga: Cara Membuat Tampilan Website Responsif

Biasanya, background paling belakang diisi dengan sebuah pola. Sedangkan background di depannya, berisi dengan gambar yang lebih spesifik. Masih bingung dengan apa yang saya maksud? Berikut ini adalah demo dan cara membuat multiple background dengan CSS.

Cara Membuat Multiple Background dengan CSS

Cara membuat multiple background adalah dengan memasukkan beberapa nilai pada satu properti background. Jika dirumuskan, multiple background diatur seperti ini:

background: bg-1, bg-2, ... , bg-N;

"Bg-N" adalah background yang terletak di dasar, sedangkan "bg-1" adalah background yang terletak di paling atas. Berikut ini adalah demonya.

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

Pada demo di atas, background yang paling bawah adalah background polkadot, sedangkan background yang paling atas adalah background bintang di sebelah kanan yang mempunyai posisi tetap walaupun digulir.

Bagaimana? Mudah, 'kan? Atau ada yang mau didiskusikan atau ditanyakan? Silakan tinggalkan komentar :)
Selengkapnya