Border Pelangi Dengan CSS

Kali ini D-G BLOG akan mengeshare salah satu jenis border ciptaan ane. Meskipun kalian pernah melihat di blog lain namun saya telah membuatnya sendiri. Yaitu border pelangi. Karena jika saya perhatikan template blogger selalu menggunakan border 1 warna ataupun bergradient jadi saya memikirkan bagaimana membuat itu menarik.
Jadi saya membuatnya border pelangi meskipun tidak dengan kombinasi "mejikuhibiniu".
Sebenarnya ini adalah ajaran dari bang johanes yaitu trick css pseudo, jadi saya kembangkan ide tersebut menjadi sebuah border.
Previewnya seperti ini

(Klik Gambar Untuk Memperbesar)
Keren bukan ?
Kombinasi 7 warna pelangi digabungkan menjadi 1 border, ingin membuatnya?
Hanya tinggal mengcopy kode berikut, yaitu:
CSS

<style>
#DGborder{position:relative; z-index:1; padding:40px; border:10px ridge red; background:orange;}
# DGborder :before{content:""; display:block; position:absolute; z-index:-1; top:5px; left:5px;             right:5px; bottom:5px; border:5px solid yellow; background:green;}
# DGborder :after{content:""; display:block; position:absolute; z-index:-1; top:25px; left:25px; right:25px; bottom:25px; border:5px solid purple; background:#fff;}
# DGborder p:first-child {margin-top:10; text-align:center;}
# DGborder  p:first-child:before {content:""; display:block; position:absolute; z-index:-1; top:15px; left:15px; right:15px; bottom:15px; border:5px solid blue; background:aqua;}
</style> 

HTML

div id="pelangi">
           <p>Tulislah kata kata yang kalian inginkan didalam border. D-G BLOG</p>
        </div>
    </div>

Jadi Cara menggunakan nya ada banyak salah satunya adalah

• Meletekan css itu diatas ]]></b:skin>
• Dan menaruh HTML di posisi yang diinginkan  

---

Sekian dari D-G BLOG
Semoga Bermanfaat

Related Post:

Blogger

• Gear Machine Berputar Dengan CSS
• Menu Blog Dengan CSS
• Membuat Menu Kaleng Tersembunyi Di Header Dengan CSS
• Keyword Postingan Yang Paling Banyak Dicari Di Google Bulan Januari 2013
• Cara Membuat Bullet Dengan A:Hover
• Domain Blogspot.com Akan Beralih Ke Domain blogspot.co.id
• Tips Agar Blog Mendapatkan SiteLink Google
• Widget Penghitung Mundur Waktu Menuju 2013
• Perbedaan Referensi Dengan Sumber

Tutorial

• Cara Menggunakan WeChat Di Komputer/PC
• Gear Machine Berputar Dengan CSS
• Menu Blog Dengan CSS
• Membuat Menu Kaleng Tersembunyi Di Header Dengan CSS
• Membuat Logo Google Dengan CSS
• Cara Membuat Bullet Dengan A:Hover
• Cara Menghapus Widget Yang Tidak Bisa Dihapus
• Cara Mempopulerkan Artikel Blog Yang Sudah Lama
• Slide To Unlock Untuk Blogger

Backlink Please !

URL

Code For Forum

HTML Code <a href='http://davidgunawan123.blogspot.com/2013/02/border-pelangi-dengan-css.html' target='_blank'>Border Pelangi Dengan CSS</a>

Anda sedang membaca artikel tentang Border Pelangi Dengan CSS dan anda bisa menemukan artikel Border Pelangi Dengan CSS ini dengan url http://davidgunawan123.blogspot.com/2013/02/border-pelangi-dengan-css.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Border Pelangi Dengan CSS ini sangat bermanfaat, namun jangan lupa untuk meletakkan link Border Pelangi Dengan CSS ataupun link ke D-G Blog sebagai sumbernya. Semoga dengan adanya artikel Border Pelangi Dengan CSS bisa membantu kalian semua.