CSS3 adalah standar untuk CSS yang paling baru, banyak batasan website design yang dahulu tidak bisa ditangani oleh CSS sekarang bisa dilakukan dengan CSS3. CSS3 sepenuhnya kompatibel dan pelengkap dari CSS lama, sehingga browser akan selalu mendukung CSS lama dan Anda tidak harus mengubah desain yang sudah ada.
Penulis akan menjelaskan tentang Background dan Borders pada CSS3. Pada CSS3 penggunaan background tidak berubah tapi ada beberapa pelengkap pada borders.
Background :
Fungsi dari property backround ini adalah menentukan style untuk latar belakang, dengan property background ini kita bukan hanya dapat menentukan warnanya, tapi kita juga dapat menambahkan gambar, serta mengatur posisi gambarnya. berikut property-property backround :
-background-color
Fungsi dari background-color adalah membuat background dengan menggunakan warna yang tersedia pada css.
EX: body{background-color : red;} *membuat background menjadi merah*
h1{background-color :#000000;} *membuat background menggunakan nilai dari RGB*
-background-image
Fungsinya untuk membuat background dengan cara memanggil gambar yg kita inginkan.
EX: body{background-image : url (image/image.jpg)} *memanggil gambar yg ada di folder image dengan nama file image.jpg*
-background-repeat
Fungsinya untuk membuat background gambar menjadi berulang atau tidak. bisa secara vertikal, horizontal, atau tidak mengulang.
> repeat = mengulang gambar hingga memenuhi halaman
> repeat-y = mengulang secara vertikal
> repeat-x = mengulang secara horizontal
>no-repeat = background tidak mengulang
EX: body{background-image : url (image/image.jpg)
background-repeat : repeat-y;}
-background-attachment
Fungsinya adalah mengatur agar background ikut turun atau naik ketika page melakukan scroll. hanya ada 2 pengaturan untuk attachment :
>scroll = background akan ikut naik atau turun ketika page discroll.
>Fixed = background tidak akan ikut naik atau turun ketika page discroll.
EX: {body{background-image : url (image/image.jpg
background-repeat : repeat-y;
background-attachment : fixed;}
-background-position
Fungsinya untuk mengatur letak background. ada center, top, bottom, left, dan right. kita bisa mengombinasikannya.
EX : {body{background-image : url (image/image.jpg
background-repeat : repeat-y;
background-attachment : fixed;
background-position : bottom right; }
BORDER
Border memiliki fungsi
untuk memberi batas/garis(seperti) pada suatu bidang/box/tag html.
garis atau batas ini bisa kita tentukan bentuk/tampilan atau stylenya, seperti warna, ketebalan, serta style/gaya.
garis atau batas ini bisa kita tentukan bentuk/tampilan atau stylenya, seperti warna, ketebalan, serta style/gaya.
property border antara lain
- border-color
- border-style
- border-width
property border individu
- border-top-style
- border-top-color
- border-top-width
- border-rigth-style
- border-right-color
- border-right-width
- border-bottom-style
- border-bottom-color
- border-bottom-width
- border-left-style
- border-left-color
- border-left-width
property border shorthand(singkat)
- border
- border-top
- border-right
- border-bottom
- border-left
value border-style
antara lain- solid
- double
- dotted
- dashed
- groove
- ridge
- inset
- outset
value border-color
antara lain- hex
color
- red,
blue, pink, silver, dan lain lain
- rgb
color
value border-width
- angka(panjang)
dalam px misal (1px, 2px, 3px, 4px dst)
- medium
EX:
<div style ="background-color: blue;
width: 300px; height: 300px;
border-color: red; border-width: 5px;">
contoh
border
</div>
referensi : http://www.w3function.com
http://www.indaam.com
