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:

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.