Multi Color Border menggunakan CSS3.

Multi Color Border menggunakan CSS3 sebagai lanjutan dari artikel sebelumnya yang telah saya share pada artikel Modifikasi border untuk desain blog, dan artikel berikut ini masih seputar border dengan menggunakan css dan tentunya akan menambah keindahan pada tampilan blog Anda, pada artikel ini ada sedikit penambahan style pada border yaitu dengan menggunakan beberapa warna pada satu border, baiklah berikut bentuk hasil akhir dari modifikasi border multi color dengan menggunakan css, dan baca juga Definisi CSS.

Demo

HTML :

<div id="container">
<div>
Hasil akhir dari border multi color.</div>
</div>

CSS :

#container {
margin: auto;
width: 99%;
height: auto;
padding:5px;
position: relative;
background-image: linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -o-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -moz-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -webkit-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -ms-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.56, #F24D55),
color-stop(0.57, #FF924F),
color-stop(0.74, #FFC164),
color-stop(0.74, #62C374),
color-stop(0.34, #F24D55),
color-stop(0.33, #00AEDA)
);
}
#container div {
background-color: #5c318d;
color:#fff;
font-size: 35px;
text-align: center;
margin: 0 auto;
min-height: 100%;
line-heigh:1.5em;
padding:10px;
}

Silahkan ganti width yang saya tandai dengan warna merah sesuai selera, dan padding yang saya buat 5px untuk menentukan ukuran border, sebenarnya ini bukan border tapi lapisan background yang menyerupai border. Demikian saja mengenai Multi Color Border menggunakan CSS3, semoga bermanfaat dan terimakasih banyak atas kunjungannya.

Sumber referensi : http://www.jquery2dotnet.com/2013/10/multi-color-border-using-css3.html

Share this: