Responsive Ads Here

Wednesday, March 8, 2017

Belajar CSS Part 3 Membuat Border Dengan CSS

Belajar CSS Part 3 Membuat Border Dengan CSS



Assalamualaikum Wr. Wb.

PENGERTIAN

Border merupakan sebuah properti yang berfungsi untuk memberikan batas antara element satu dengan element yang lainnya. Di dalam CSS  properti border ini berfungsi untuk memberikan warna, lebar, gaya pada batas tersebut. Dengan begitu kita dapat memberi batas antara kata, baris lebih indah dan menarik.

LATAR BELAKANG

Memberikan properti yang dapat memperindah border/batas pada sebuah kata, kalimat, maupun paragrap.

MAKSUD & TUJUAN

Dapat menghasilkan border yang menarik.
Borde lebih hidup.

ALAT & BAHAN
  • Text Editor
  • Browser



LANGKAH KERJA

Pada dasarnya fungsi CSS yaitu mendesain sebuah web. Pada bagian CSS border ini, CSS memiliki beberapa properti dalam mengubah border tersebut. Langsung saja kita lihat contohnya.

  • Tipe -Tipe Border pada CSS

dotted - Mendefinisikan border dengan pola titik.dashed - Mendefinisikan border dengan pola garis putus-putus.solid   - Mendefinisikan sebuah border yang solid.double - Mendefinisikan sebuah border ganda.groove - Mendefinisikan sebuah border berlekuk 3D. Efeknya tergantung pada nilai border-color.ridge  - Mendefinisikan sebuah border bergerigi 3D. Efeknya tergantung pada nilai border-color.inset - Mendefinisikan sebuah border dengan inset 3D. Efeknya tergantung pada nilai border-color.outset - Mendefinisikan sebuah border awal 3D. Efeknya tergantung pada nilai border-color.none - Mendefinisikan tidak ada border.hidden - Mendefinisikan border tersembunyi.
Untuk contohnya bisa dilihat di gambar berikut.



Untuk penulisannya bisa dilihat dari gambar di atas. Untuk hasilnya bisa dilihat gambar di bawah ini.


 Penggunaan tipe border ini tergantung pada kebutuhannya masing-masing.

  • Border-width
Pada properti ini berfungsi untuk mengatur lebar dari border tersebut. Untuk ukurannya bisa menggunakan (px, em, pt, cm, dll) atau juga bisa menggunakan perintah thin, medium, thick.

Contoh penggunaanya dapat dilihat pada gambar berikut.


Kita akan mengatur ukuran border dengan properti yang berbeda-beda.



Hasil di atas adalah perbedaan dari lebar border. Penggunaan lebar ini juga sesuai dengan kebutuhan anda. Terserah mau makai yang mana, tapi jika belum paham coba di ulangi :D. Lanjut ke properti selanjutnya.

  • Border-color
Properti ini berfungsi untuk mengatur warna border di dalam CSS border. Pada border-color kita dapat mengatur 4 warna yaitu (border atas, border bawah, border kanan, border kiri). Untuk mengatur warna tersebut bisa menggunakan element berikut.



  • name - menentukan nama warna, seperti "red"
  • Hex - menentukan nilai hex, seperti "#ff0000"
  • RGB - menentukan nilai RGB, seperti "rgb(255,0,0)"
  • transparent
Contoh :

Cobalah dengan memasukkan syntax seperti di atas. Kemudian lihat hasilnya.


Nah gambar di atas merupakan hasil dari border-color. Silahkan mencoba dengan karyamu sendiri. 

Mungkin itu dulu dari saya, kurang lebihnya mohon maaf

Syukron

Wassalamualaikum Wr. Wb.




Referensi


No comments:

Post a Comment