CSS3 Background and Borders

     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.

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