Tutorial Belajar CSS Bagian 11 : Cara Menggunakan Properti Outlines di CSS

0
28

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 10 : Cara Menggunakan Properti Border di CSS. Selanjutnya, kita akan belajar cara menggunakan properti outlines di CSS.

Outlines sangat mirip dengan border, tetapi ada sedikit perbedaan utama :

  • Outlines tidak memakan tempat.
  • Outlines tidak harus berbentuk persegi panjang.
  • Outlines selalu sama di semua sisi; Anda tidak dapat menentukan nilai yang berbeda untuk sisi elemen yang berbeda.

Anda dapat mengatur properti outlines berikut menggunakan CSS.

  • Properti outlines-width digunakan untuk mengatur lebar outlines.
  • Properti outlines-style digunakan untuk mengatur outlines untuk kerangka.
  • Properti outlines-color digunakan untuk mengatur warna outlines.
  • Properti outlines digunakan untuk mengatur ketiga properti di atas dalam satu pernyataan.

Properti outlines-width

Properti outlines-width menentukan lebar kerangka yang akan ditambahkan ke kotak. Nilainya dalam bentuk panjang atau salah satu dari nilai thin, medium, atau thick, seperti atribut border-with.

Width dengan nilai 0px berarti tidak ada outlines.

Berikut ini contohnya :

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         Kalimat ini memiliki outline yang tipis.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         Kalimat ini memiliki outline yang tebal.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         Kalimat ini memiliki outline setebal 5 px.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti outline-style

Properti outline-style menentukan outlines (solid, dotted, atau dashed) yang mengelilingi sebuah elemen. Properti ini biasanya mengunakan salah satu dari nilai berikut :

  • none – Tanpa batas. (Setara dengan outline-width : 0;)
  • solid – Outline dalam bentuk satu garis utuh.
  • dotted – Outline dalam bentuk serangkaian titik.
  • dashed – Outline dalam bentuk rangkaian garis pendek.
  • double – Outline dalam bentuk dua garis utuh.
  • groove – Outline tampak seolah-olah diukir di halaman.
  • ridge – Outline tampak kebalikan dari groove.
  • inset – Outline membuat kotak terlihat seperti disematkan di halaman.
  • outset – Outline membuat kotak terlihat seperti keluar dari kanvas.
  • hidden – Sama dengan tidak ada.

Berikut ini contohnya :

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         Kalimat ini memiliki outline yang solid dan tipis.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         Kalimat ini memiliki outline yang dashed dan tebal.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         Kalimat ini memiliki outline setebal 5px dengan motif dotted.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti outline-color

Properti outline-color memungkinkan Anda untuk menentukan warna outline. Nilainya harus berupa nama warna, warna hex, atau nilai RGB, seperti pada properti color dan border-color.

Berikut ini contohnya :

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         Kalimat ini memiliki outline tipis solid dan berwarna merah.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         Kalimat ini memiliki outline tebal dashed dan berwarna hijau.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         Kalimat ini memiliki outline setebal 5px dotted dan berwarna biru.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti outline

Properti outline adalah properti singkatan/shorthand yang memungkinkan Anda menentukan nilai untuk salah satu dari 3 properti yang dibahas sebelumnya dalam urutan apa pun, tetapi dalam satu pernyataan.

Berikut ini contohnya :

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         Kalimat ini memiliki outline tipis solid dan merah.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         Kalimat ini memiliki outline tebal dashed dan berwarna hijau.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda belajar cara menggunakan properti outlines di CSS untuk memperindah dokumen HTML.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.