adsense link 728px X 15px

Tuesday, June 22, 2010, 

Dalam tabel kode CSS3 yang pernah saya posting sebelumnya, kode untuk border memiliki beraneka macam, tentunya berbeda-beda untuk setiap kodenya. Nah di sini saya akan sedikit menjelaskan fungsi dari kode border tersebut. Jika anda mendownload tabel CSS3 kemarin pada border kurang lebih terdapat kode seperti ini


  1. solid
  2. dotted
  3. dashed
  4. double
  5. groove
  6. ridge
  7. inset
  8. outset

     Nah sebagai contoh penjelasannya kita gunakan kode berikut.

<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px solid #000;"> CONTENT ANDA </div>

     Perhatikan kode di atas.
    pada kode border, 4px menunjukkan ketebalan border


    pada kode yang berwarna merah solid merupakan kode untuk border yang akan berupa garis biasa.


    setelah kode solid, terdapat kode warna #000, yang merupakan warna dari border tersebut



     Untuk mengetahui perbedaan bordernya maka kita tinggal mengganti kode solid, dengan kode-kode sesuai dengan kode yang sudah saya tulis diatas.

  1. Dari kode di atas maka akan terbentuk sebuah kolom seperti ini

    CONTENT ANDA
  2. Selanjutnya kita ganti kode solid dengan dotted, hasilnya seperti ini.

    CONTENT ANDA
  3. Selanjutnya kita ganti kode dotted dengan dashed, hasilnya seperti ini.

    CONTENT ANDA
  4. Selanjutnya kita ganti kode dashed dengan double, hasilnya seperti ini.

    CONTENT ANDA
  5. Selanjutnya kita ganti kode double dengan groove, hasilnya seperti ini.

    CONTENT ANDA
  6. Selanjutnya kita ganti kode groove dengan ridge, hasilnya seperti ini.

    CONTENT ANDA
  7. Selanjutnya kita ganti kode ridge dengan inset, hasilnya seperti ini.

    CONTENT ANDA
  8. Selanjutnya kita ganti kode inset dengan outset, hasilnya seperti ini.

    CONTENT ANDA

     Kode diatas hanyalah sebagai contoh saja, pada intinya saya hanya menjelaskan macam-macam border pada CSS3. semoga bermanfaat... ^^,







14 Comments:

saka said...  on  June 22, 2010 at 6:47 AM

OK thanks buat sharingnya ya

Coretan Felix said...  on  June 22, 2010 at 4:48 PM

Akan dicoba semua kang :D

w - 4xp said...  on  June 22, 2010 at 6:24 PM

thanks udah share infonya...good blog and good post

Umy Diary said...  on  June 22, 2010 at 8:40 PM

met pagi,, umy berkunjung,,,,

makasih banget ne, infonya

Tutorial Blogging Share said...  on  June 22, 2010 at 10:57 PM

kunjungan balik skalian follow kawan....
di tggu follow baliknya kawan.......
nice info........

mel said...  on  June 22, 2010 at 11:39 PM

mel mau coba ah....biar jd kaya master mazda

FA said...  on  June 22, 2010 at 11:40 PM

kinjungan siang.absen ^_^

Rizky2009 said...  on  June 23, 2010 at 1:58 AM

yang aq denger katanya CSS 3 itu b erat yah sob

oempak said...  on  June 23, 2010 at 9:19 AM

manteb nih, nambahin koleksi css klo pgn edit" template, lanjutkaaan ! :D

om rame said...  on  June 23, 2010 at 5:38 PM

terima kasih om atas informasinya, sangat bermanfaat.
ijin saya simpen yah, kebetuLan saya Lagi beLajar utak-atik CSS nih.

mohon maaf agak teLat ngabsen nih.
seLamat pagi, seLamat menjaLankan aktifitas dan saLam sukses seLaLu.

Masda said...  on  June 24, 2010 at 4:25 AM

@all, Terima Kasih kunjungannya, segera saya akan berkunjung balik ke blog anda,
@Rizky2009, Kalo menurut saya semua kode itu berat mas, untuk itu utamakan kode yang penting2 saja, dan kalopun kodenya masih memberatkan blog tidak ada salahnya untuk melakukan convert. Terima kasih kunjungan + commentnya...

Tutorial Blogging Share said...  on  June 24, 2010 at 4:45 AM

aku dah mau tanya ehh ternyata udah ada master rizky yang duluan,,apa kbr bang rizky lama gak saling silahturahmi,,buat kang masda semoga sukses trus ya,,ada yang mau saya pelajari dari kang masda cuma saya malu klo blg di sini hehehehhehehee......nnti aja ahh..:)

ami mizuno said...  on  July 6, 2010 at 5:21 AM

Gan, mau nanya nih... kalo border yang sudutnya tidak lancip kodenya apaan yah ?
<http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif

airport pickup w2 said...  on  March 12, 2013 at 11:58 PM

This is a good site to spend time on .I just stumbled upon your informative blog and wanted to say that I have really enjoyed reading your very well written blog posts. I will be your frequent visitor, that's for sure.
heathrow to w2 | minicab in w2

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers