Membuat Bingkai atau Border Menggunakan CSS

/
0 Comments
Ngaeweb - Hari ini saya akan memberi tahu kalian mengenai cara membuat Bingkai menggunakan CSS.
Untuk membuat bingkai, kita bisa memakai properti seperti di bawah ini.
  • border, digunakan untuk membuat keseluruhan dari bingkai.
  • border-left, digunakan untuk membuat bingkai bagian kiri.
  • border-right, digunakan untuk membuat bingkai bagian kanan.
  • border-top, digunakan untuk membuat bingkai bagian atas.
  • border-bottom, digunakan untuk membuat bingkai bagian bawah.
ngaeweb
Gambar 1.1 Ilustrasi Properti Bingkai Suatu Elemen

Properti tersebut bisa di isi dengan beberapa nilai.
Contoh
                border: 4px solid #000;

Pada contoh tersebut,
  • 4px menyatakan ukuran ketebalan bingkai.
  • solid menyatakan bentuk bingkai.
  • #000 menyatakan warna bingkai.
ngaeweb
Gambar 1.2 contoh membuat bingkai

Menentukan Bentuk Bingkai
                Ada beberapa jenis yang konstanta yang di pakai untuk menentukan bentuk bingkai seperti,

ngaeweb
Gambar 1.3 Konstanta Penentu Bentuk Binkai 
Mengatur Ketebalan Bingkai
Ketebalan bingkai juga bisa diatur melalui width entah itu border-width,  border-left-width ataupun border-right-width. Nilai top, bottom, left ,dan right berfungsi untuk mengatur bagian bingkai sesuai dengan gambar “Ilustrasi Properti Binkai Suatu Element”  nilai yang bisa di berikan berupa nilai: 2px atau menggunakam konstanta,
  • thin berarti tipis
  • medium berarti sedang
  • thick berarti tebal 
ngaeweb
Gambar 1.4 Mengatur Ketebalan Menggunakan Konstanta

Mengatur Warna Bingkai
selain menggunakan “color” kalian juga bisa mengubah warna bingkai melalui: border-color, border-right-color, border-left-color, border-top-color, dan  border-bottom-color seperti ini,
ngeweb
Gambar 1.5 hasil koding pengaturan warna
klik disini untuk melihat atau mendownload Scrip  membuat bingkai menggunakan css.

Sekian informasi dari saya, Semoga berguna untuk anda. Terimakasi telah berkunjung dan salam NgaeWeb :D.








Artikel Lainnya

Tidak ada komentar:

Diberdayakan oleh Blogger.

Facebook Page

Ngae Web

Translate

Pengikut

Popular Posts