CSS part 10 : outline dalam css
CSS OUTLINE
ASSALAMUALAIKUM wr wb.
kali ini saya akan membahas tentang outline apa teman teman pernah menggunakan outline dalam css kalau belum pernah berikut artikel yang akan membahas tentang outline.
1.Pengertian CSS Outline.
outline adalah sebuah garis tepi diluar border.Outline terpisah dari elemen,hal ini berbeda dengan border yang masih merupakan bagian dari sebuah elemen.
2.MAKSUD dan TUJUAN.
untuk mengetahui cara penggunaan outline.
3.BAHAN dan ALAT.
- laptop/pc
-web browser contohnya seperti mozilla fire fox atau yang lain
-memiliki aplikasi seperti sublime text/notepad
4.Materi
CSS memberikan kita kemampuan penuh untuk mengatur garis tepi di luar border elemen pada tag HTML.
properti CSS yang berhubungan dengan yang digunakan dalam CSS outline antara lain :
outline adalah sebuah garis tepi diluar border.Outline terpisah dari elemen,hal ini berbeda dengan border yang masih merupakan bagian dari sebuah elemen.
2.MAKSUD dan TUJUAN.
untuk mengetahui cara penggunaan outline.
3.BAHAN dan ALAT.
- laptop/pc
-web browser contohnya seperti mozilla fire fox atau yang lain
-memiliki aplikasi seperti sublime text/notepad
4.Materi
CSS memberikan kita kemampuan penuh untuk mengatur garis tepi di luar border elemen pada tag HTML.
properti CSS yang berhubungan dengan yang digunakan dalam CSS outline antara lain :
outline-style
outline-color
outline-width
berikut penjelasan diatas:
1.Outline style
adalah properti utama dan merupakan syarat agar properti yang lain dapat bekerja.
ada beberapa penggunaan outline style:
dotted - Mendefinisikan garis putus-putus
outline-color
outline-width
berikut penjelasan diatas:
1.Outline style
adalah properti utama dan merupakan syarat agar properti yang lain dapat bekerja.
ada beberapa penggunaan outline style:
dotted - Mendefinisikan garis putus-putus
dashed - Mendefinisikan garis putus-putus
solid - Mendefinisikan garis yang solid
double - Mendefinisikan garis ganda
groove- Mendefinisikan beralur garis 3D. Efeknya tergantung pada nilai garis warna
ridge- Mendefinisikan garis bergerigi 3D. Efeknya tergantung pada nilai garis warna
inset- Mendefinisikan garis inset 3D. Efeknya tergantung pada nilai garis warna
outset- Mendefinisikan garis awal 3D. Efeknya tergantung pada nilai garis warna
none - Mendefinisikan ada garis
hidden - Mendefinisikan garis tersembunyi
berikut ini contoh penggunaan outline style:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p{
border: 5px solid red;
outline-style: groove;
}
</style>
</head>
<body>
<p>
<br>outline adalah sebuah garis tepi diluar border.Outline terpisah dari elemen,hal ini berbeda dengan border yang masih merupakan bagian dari sebuah elemen.</br>
</p>
</body>
</html>
<html>
<head>
<title></title>
<style>
p{
border: 5px solid red;
outline-style: groove;
}
</style>
</head>
<body>
<p>
<br>outline adalah sebuah garis tepi diluar border.Outline terpisah dari elemen,hal ini berbeda dengan border yang masih merupakan bagian dari sebuah elemen.</br>
</p>
</body>
</html>
ini hasilnya dari script diatas:
catatan border yang berwarna merah dan outline berwarna hitam.
2.Outline color.
adalah properti yang digunakan untuk mengatur warna outline.
Ada 3 cara dalam menentukan warna outline:
1.menggunakan nama warna dalam bahasa inggris seperti red,blue dan lain lain.
2.menggunakan kode heksa warna seperti #4ae239 dan sebagainya
3.menggunakan nilai RGB seperti rgb(255,0,0) dan seterusnya.
berikut contoh script outline color.
adalah properti yang digunakan untuk mengatur warna outline.
Ada 3 cara dalam menentukan warna outline:
1.menggunakan nama warna dalam bahasa inggris seperti red,blue dan lain lain.
2.menggunakan kode heksa warna seperti #4ae239 dan sebagainya
3.menggunakan nilai RGB seperti rgb(255,0,0) dan seterusnya.
berikut contoh script outline color.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p{
border: 5px solid red;
outline-style: groove;
outline-color: #52ea82;
}
</style>
</head>
<body>
<p>
<br>outline adalah sebuah garis tepi diluar border.Outline terpisah dari elemen,hal ini berbeda dengan border yang masih merupakan bagian dari sebuah elemen.</br>
</p>
</body>
</html>
<html>
<head>
<title></title>
<style>
p{
border: 5px solid red;
outline-style: groove;
outline-color: #52ea82;
}
</style>
</head>
<body>
<p>
<br>outline adalah sebuah garis tepi diluar border.Outline terpisah dari elemen,hal ini berbeda dengan border yang masih merupakan bagian dari sebuah elemen.</br>
</p>
</body>
</html>
ini hasil dari script diatas:
3.outline width.
adalah properti css yang digunakan untuk mengatur lebar outline.Nilai outline bisa dinyatakan dengan px atau thin,medium,thick.outline width digunakan setelah outline style.
berikut contoh script outline width.
adalah properti css yang digunakan untuk mengatur lebar outline.Nilai outline bisa dinyatakan dengan px atau thin,medium,thick.outline width digunakan setelah outline style.
berikut contoh script outline width.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p{
border: 5px solid red;
outline-style: groove;
outline-color: #52ea82;
outline-width: 12px;
}
</style>
</head>
<body>
<p>
<br>outline adalah sebuah garis tepi diluar border.Outline terpisah dari elemen,hal ini berbeda dengan border yang masih merupakan bagian dari sebuah elemen.</br>
</p>
</body>
</html>
<html>
<head>
<title></title>
<style>
p{
border: 5px solid red;
outline-style: groove;
outline-color: #52ea82;
outline-width: 12px;
}
</style>
</head>
<body>
<p>
<br>outline adalah sebuah garis tepi diluar border.Outline terpisah dari elemen,hal ini berbeda dengan border yang masih merupakan bagian dari sebuah elemen.</br>
</p>
</body>
</html>
ini hasilnya:
sekian dari artikel saya apabila ada tulisan yang tidak baik menurut anda mohon maaf.
REFERENSI:
WASSALAMUALAIKUM wr wb.
Komentar
Posting Komentar