CSS Part 11 : Properti Outline CSS

Assalamu alaikum Wr Wb.

Dalam pertemuan kali ini, saya akan memaparkan mengenai properti outline CSS.

CSS Outline

CSS outline properti menentukan gaya, warna, dan lebar garis.

Garis adalah garis yang ditarik sekitar elemen (luar perbatasan) untuk membuat elemen "menonjol". Namun, properti outline berbeda dari properti perbatasan - outline adalah TIDAK bagian dari dimensi elemen ini; Total lebar elemen dan tinggi tidak terpengaruh oleh lebih garis besar.

garis Gaya

The outline-styleproperti menentukan gaya garis besar.

The outline-styleproperti dapat memiliki salah satu dari nilai berikut:

•     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

Contoh

Garis - properti Steno

Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti outline individu dalam satu properti.

The outlineproperti adalah properti singkatan untuk properti outline individu berikut:

    outline-width
    outline-style (wajib)
    outline-color

p {
    border: 1px solid black;
    outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

garis Warna

The outline-colorproperti digunakan untuk mengatur warna garis.

warna dapat diatur oleh:

•     nama - menentukan nama warna, seperti "merah"

•     RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"

•     Hex - menentukan nilai hex, seperti "# ff0000"

•     invert - melakukan inversi warna (yang menjamin bahwa garis yang terlihat, terlepas dari latar belakang warna)

Contoh

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

garis Lebar

The outline-widthproperti menentukan lebar garis besar.

Lebar dapat diatur sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.

Contoh

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

Garis - properti Steno

Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti outline individu dalam satu properti.

The outline properti adalah properti singkatan untuk properti outline individu berikut:

•     outline-width

•     outline-style (wajib)

•     outline-color

Contoh

p {
    border: 1px solid black;
    outline: 5px dotted red;
}

REFERENSI

http://www.w3schools.com/css/css_outline.asp