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