Belajar CSS, Menghias Halaman Web Dengan CSS Border Images

Pada seri belajar CSS kali ini kita akan belajar tentang css border images. CSS border images digunakan untuk menghias tepian container dengan menggunakan gambar. Dahulu untuk menghias tepian container, kita perlu memotong-motong gambar dan secara perlahan mengotak-atiknya lewat CSS agar tampilannya sesuai. Kini cukup dengan beberapa baris kode CSS, kita dapat membuat border yang cantik untuk web kita.

Mengenal Border Image Properties

Apabila anda telah belajar css border, maka anda tentunya ingat beberapa aturan style border seperti dotted, dashed, solid, double, groove, ridge, inset dan outset. Style untuk border sebenarnya sudah cukup banyak pilihannya, akan tetapi apabila anda masih belum puas dengan style yang ada, anda bisa menggunakan property lainnya yakni property border-image-source. Dengan cara ini anda akan mengeset sebuah gambar background untuk menjadi border pada sebuah elemen. Value nya biasa merupakan lokasi dari gambar tersebut. Contohnya seperti berikut ini:

#kotak {
  border-image-source: url('gambarku.png');
}

Apabila anda mengisinya dengan none, maka gambar tidak akan ditampilkan dan browser akan menggunakan value yang ada dalam property border-style. Sehingga akan lebih aman apabila anda juga tetap menggunakan border-style untuk berjaga-jaga apabila gambar tidak tampil.

Gambar yang anda gunakan tidak harus memiliki ukuran yang sama dengan panjang dan lebar border anda. Salah satu keunggulan dari CSS border image adalah dengan menggunakan gambar yang kecil saja sudah cukup digunakan untuk menghias border elemen dengan berbagai ukuran, termasuk elemen yang secara responsive menyesuaikan dengan ukuran layar atau yang biasa kita kenal dengan responsive design.

Mengenal Property border-image-slice

Setelah anda memilih sebuah gambar dengan menggunakan property border-image-source, selanjutnya akan kita aplikasikan ke border dengan menggunakan property border-image-slice. Contohnya seperti dibawah ini.

#kotak {
  border-image-source: url('gambarku.png');
  border-image-slice: 19;
}

Penjelasan secara lebih detailnya sebagai berikut. Property ini membuat garis bagian dalam atau inner offset dari atas, kanan, bawah dan bagian kiri. Offset akan memotong gambar anda menjadi sembilan bagian, empat bagian sudut, empat bagian sisi, dan satu ditengah.

sumber: sitepointdotcom

sumber: sitepointdotcom

Anda bisa menuliskan nilai dalam bentuk angka 1 sampai 4 atau dalam bentuk persen. Saat anda menuliskan empat nilai, maka akan diaplikasikan pada area atas, kanan, bawah dan sisi sebelah kiri. Apabila anda tidak menuliskan bagian kiri, maka akan otomatis sama dengan bagian kanan. Apabila anda hanya menuliskan satu nilai, maka akan digunakan untuk keempat bagian, yakni atas, kanan, bawah dan kiri. Nilai persen mengacu pada pada prosentase ukuran gambar.

Berikut ini cara menggunakan border-image-slice

<div class="box">
    Garis tepi dengan menggunakan border image. Image yang digunakan berukuran 150x106 pixel.
  </div>

<div class="box">
    Garis tepi dengan menggunakan border image. Image yang digunakan berukuran 150x106 pixel.
  </div>

Pada contoh tersebut, gambar yang digunakan berukuran 150×106 pixel seperti nampak pada gambar di bawah ini.

bingkai.png

Hasil yang diperoleh seperti gambar berikut ini.

hasil_bingkai.png

Pada bagian tengah dirender secara transparan, sehingga tidak kelihata. Apabila anda ingin menampilkannya, silahkan tambahkan katakuncil fill. Misalnya kita menggunakan gambar yang sama akan tetapi ditengahnya tidak berwarna putih tapi berisi gambar lainnya, maka dengan menggunakan fill, area tengah tersebut akan ditampilkan. Contoh penggunaan fill seperti di bawah ini.

.box {
  border: 19px dotted #c905c6;
  border-image-source: url(bingkai-fill.png);
  border-image-slice: 19 fill;
}

Incoming search terms:

Be Sociable, Share!

Related Posts:

Add a Comment

Your email address will not be published. Required fields are marked *