Belajar css seputar outline

belajar css

Outline vs border

Outline pada CSS umumnya digunakan untuk menambahkan garis disekitar elemen. Sekilas outline tampak sangat mirip dengan border, tetapi berbeda dengan border. Berikut perbedaannya:

  • Outline tidak memakan ruang dan bukan termasuk penghitungan box model. Outline selalu ditempatkan di atas kotak elemen yang dapat menyebabkan mereka tumpang tindih dengan elemen lain.
  • Tidak seperti border, outline tidak bisa mengatur setiap sudut secara individu. Outline hanya bisa mengatur semua sudur sekaligus
  • Tidak seperti border, outline tidak mengubah ukuran atau posisi elemen.

Outline style

Dengan property outline-style Anda bisa menentukan style atau gaya manakah yang akan Anda gunakan untuk memberikan efek visual garis. Berikut list outline-style yang bisa Anda gunakan:

  • dotted – Memberikan gaya border bertitik
  • dashed – Memberikan gaya border putus-putus
  • solid – Memberikan gaya border yang solid atau bergaris
  • double – Memberikan gaya border ganda
  • groove– Memberikan gaya border alur 3D. Efeknya tergantung pada nilai border-color
  • ridge– Memberikan gaya border bergerigi 3D. Efeknya tergantung pada nilai border-color
  • inset– Memberikan gaya border inset 3D. Efeknya tergantung pada nilai border-color
  • outset– Memberikan gaya border awal 3D. Efeknya tergantung pada nilai border-color
  • none – Tidak mendefinisikan border apapun
  • hidden – Menentukan border yang tersembunyi

Berikut visual hasilnya:

Border dotted

Border dashed

Border solid

Border double

Border groove

Border ridge

Border inset

Border outset

Border none

Outline width

Dengan property outline-width Anda bisa memberikan ukuran ketebalan atau lebar pada outline.

Width atau lebar dapat ditetapkan sebagai ukuran (px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: thin, medium dan thick.

Contoh:

Editor Online
  1. #p1 {
  2. outline-style: solid;
  3. outline-width: thin;
  4. outline-color: green;
  5. }
  6. #p2 {
  7. outline-style: solid;
  8. outline-width: medium;
  9. outline-color: green;
  10. }
  11. #p3 {
  12. outline-style: solid;
  13. outline-width: thick;
  14. outline-color: green;
  15. }
  16. #p4 {
  17. outline-style: solid;
  18. outline-width: 8px;
  19. outline-color: green;
  20. }

Outline color

Dengan property outline-color Anda bisa menentukan color atau warna manakah yang akan digunakan.

Outline color dapat diatur oleh nilai:

  • nama – tentukan nilai color nama, seperti red
  • Hex – tentukan nilai color hex, seperti #ff0000
  • RGB – tentukan nilai color RGB, seperti rgb (255,0,0)
  • Invert – melakukan inversi warna (yang menjamin bahwa outline yang terlihat, terlepas dari latar belakang warna)

Contoh:

Editor Online
  1. #p1 {
  2. outline-style: solid;
  3. outline-width: 2px;
  4. outline-color: rgb(255, 0, 0);
  5. }
  6. #p2 {
  7. outline-style: dashed;
  8. outline-width: 4px;
  9. outline-color: #0000ff;
  10. }
  11. #p3 {
  12. outline-style: double;
  13. outline-width: 6px;
  14. outline-color: green;
  15. }

Contoh berikut penggunaan outline-color: invert, yang melakukan inversi warna. Hal ini memastikan bahwa garis yang terlihat, terlepas dari latar belakang warna.

Contoh:

Editor Online
  1. p {
  2. border: 1px solid yellow;
  3. outline-style: solid;
  4. outline-color: invert;
  5. }

Outline shorthand

Dengan outline shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua property outline dalam satu property tunggal. Untuk menggunakan outline shorthand Anda cukup menggunakan property outline. Dengan begitu Anda tidak lagi menulis kode yang panjang.

Property outline shorthand berlaku untuk outline dibawah ini:

  • outline-width
  • outline-style ( dibutuhkan )
  • outline-color

Contoh:

Editor Online
  1. p {
  2. outline: 5px dashed green;
  3. }

Outline offset

Dengan property outline-offset Anda bisa menambah ruang antara outline atau perbatasan elemen. 

Contoh:

Editor Online
  1. p {
  2. margin: 40px;
  3. border: 2px solid black;
  4. outline: 5px solid blue;
  5. outline-offset: 20px;
  6. }

Daftar property outline

PropertyKegunaanya
outlineMengatur semua property outline dalam satu deklarasi
outline-styleMengatur gaya outline
outline-widthMengatur lebar outline
outline-colorMengatur warna outline
outline-offsetMenentukan ruang antara outline dan tepi elemen

2 Replies to “Belajar css seputar outline”

Leave a Reply

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