Belajar CSS – Membuat outline dengan CSS
Pada CSS sendiri outline digunakan untuk menambahkan garis disekitar elemen. Outline hampir mirip den
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 properti outline-style
Anda bisa menggunakannya untuk membuat 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 bertitikdashed
– Memberikan gaya border putus-putussolid
– Memberikan gaya border yang solid atau bergarisdouble
– Memberikan gaya border gandagroove
– Memberikan gaya border alur 3D. Efeknya tergantung pada nilai border-colorridge
– Memberikan gaya border bergerigi 3D. Efeknya tergantung pada nilai border-colorinset
– Memberikan gaya border inset 3D. Efeknya tergantung pada nilai border-coloroutset
– Memberikan gaya border awal 3D. Efeknya tergantung pada nilai border-colornone
– Tidak mendefinisikan border apapunhidden
– Menentukan border yang tersembunyi
Berikut visual hasilnya:
Outline dotted
Outline dashed
Outline solid
Outline double
Outline groove
Outline ridge
Outline inset
Outline outset
Outline none
Outline width
Dengan properti outline-width
Anda bisa menggunakannya untuk 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.
#p1 {
outline-style: solid;
outline-width: thin;
outline-color: green;
}
#p2 {
outline-style: solid;
outline-width: medium;
outline-color: green;
}
#p3 {
outline-style: solid;
outline-width: thick;
outline-color: green;
}
#p4 {
outline-style: solid;
outline-width: 8px;
outline-color: green;
}
Outline color
Dengan properti outline-color
Anda bisa menggunakannya untuk 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)
#p1 {
outline-style: solid;
outline-width: 2px;
outline-color: rgb(255, 0, 0);
}
#p2 {
outline-style: dashed;
outline-width: 4px;
outline-color: #0000ff;
}
#p3 {
outline-style: double;
outline-width: 6px;
outline-color: green;
}
Contoh berikut penggunaan outline-color: invert
, yang melakukan inversi warna. Hal ini memastikan bahwa garis yang terlihat, terlepas dari latar belakang warna.
p {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}
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 properti outline dalam satu properti tunggal.
Untuk menggunakan outline shorthand Anda cukup menggunakan properti outline
. Dengan begitu Anda tidak lagi menulis kode yang panjang.
Properti outline shorthand berlaku untuk outline dibawah ini:
outline-width
outline-style
( dibutuhkan )outline-color
p {
outline: 5px dashed green;
}
Outline offset
Dengan properti outline-offset
Anda bisa menggunakannya untuk menambah ruang antara outline atau perbatasan elemen.
p {
margin: 40px;
border: 2px solid black;
outline: 5px solid blue;
outline-offset: 20px;
}
Daftar properti outline
Properti | Kegunaanya |
---|---|
outline | Mengatur semua properti outline dalam satu deklarasi |
outline-style | Mengatur gaya outline |
outline-width | Mengatur lebar outline |
outline-color | Mengatur warna outline |
outline-offset | Menentukan ruang antara outline dan tepi elemen |