A. PENDAHULUAN
- Pengertian
Css outline adalah garis yang ditarik di luar batas elemen.
Untuk ilustrasi dari penggunaan outline adalah seperti berikut.
- Latar belakang masalah
CSS menyediakan banyak fitur yang bisa digunakan untuk mengatur outline, seperti mengatur bagaimana style garis, pewarnaan, serta ukuran.
B. MAKSUD DAN TUJUAN
Dapat menguasai CSS dan tujuannya adalah memahami langkah tutorial agar bisa menguasai CSS, maka dari itu saya mempelajari dan mempraktikkan langkah-langkahnya di w3schools.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- Outline CSS
- Outline Width
- Outline color
- Outline shorthand
- Outline offset
- Daftar properti outline
D. TARGET DAN HASIL YANG DIHARAPKAN
Mengerti dan bisa mempraktikaan CSS Outline di saat di butuhkan dalam membuat halaman website.
E. METODE PELAKSANAAN
- Membaca referensi
- Mempraktikkannya (Coding)
F. ALAT DAN BAHAN
- Laptop
- Koneksi internet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
- Outline Style
Dengan properti outline-style Anda bisa menggunakannya untuk membuat style atau gaya manakah yang akan Anda gunakan untuk memberikan efek visual garis. Berilut adalah list outline-style yang bisa Anda gunakan :
- dotted : Memberikan gaya border bertitik
- dashed : Memberikan gaya bWidth atau lebar dapat di tetapkan order putus-putus
- solid : Memberikan gaya border yang solid/bergaris
- double : Memberikan gaya border ganda
- groove : Memberikan gaya border alur 3D. Efeknya tergantung pada nilai border-color
- ridge : Memberikan gaya border bergigi 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.
Contoh hasilnya akan seperti ini :
- 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 di tentukan: thin, medium dan thick.
Contoh :
- Outline Color :
Dengan properti outline-color Anda bisa menggunakannya untuk menentukan color/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 : Melakukannya inversi warna (yang menjamin bahwa outline yang terlihat, terlepas dari latar belakang warna)
Contoh :
<!DOCTYPE html><html><head><title>Belajar CSS</title><style>#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;}</style></head><body><h1>Belajar CSS</h1><p id="p1">Outline color red</p><p id="p2">Outline color biru</p><p id="p3">Outline color hijau</p></body></html>
Hasilnya akan seperti ini :
untuk contoh penggunaan outline-color: invert, yang melakukan inversi warna. Hal ini memastikan bahwa garis yang terlihat, terlepas dari latar belakangnya :
p {border: 1px solid red;outline-style: solid;outline-color: invert;}
hasilnya :
- Outline shorthand
Dengan outline shorthand anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti "steno" atau menulis cepat. Dengan cara ini memungkinkan juga untuk menentukan semua properti outline dalam satu properti tunggal.
Untuk menggunakan outline shorthand Anda cukup menggunakan outline. Dengan begitu anda tidak menulis kode yang panjang.
Properti outline shorthand berlaku untuk outline dibawah ini :
- outline-width
- outline-style (Pasti dibutuhkan)
- outline-color
-Outline offset
Dengan properti outline-offset Anda bisa menggunakannya untuk menambah ruang antara outline atau perbatasan elemen.
Contoh :
p {margin: 40px;border: 2px solid black;outline: 5px solid blue;outline-offset: 20px;}
Maka hasilnya akan seperti ini :
- Daftar properti Outline
outline = Mengatur semua properti outline dalam satu kalimat kode
outline-style = Mengatur gaya outline
outline-width = Mengatur lebar outline
outline-color = Mengatur warna outline
outline-offset = Menentukan ruang antara outline dan tepi elemen.
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
-
J. KESIMPULAN YANG DIDAPAT
Outline hanya bisa mengatur semua sudur sekaligus Tidak seperti border, outline tidak mengubah ukuran atau posisi elemen.
K. REFERENSI
https://hendky.com/outline-css/
https://warungbelajar.com/mengatur-outline-pada-css.html#:~:text=Dalam%20tutorial%20ini%20kita%20akan,style%20garis%2C%20pewarnaan%20dan%20ukuran.
