Dengan semua fitur-fitur baru yang terdapat dalam CSS3, kita bisa melakukan berbagai style yang berkaitan dengan desain. Seperti halnya membuat gradient color.
Baca Juga :
Gradient color biasanya diterapkan pada backgroup objek yang sedang dibuat menggunakan CSS3, tapi tidak berhenti sampai background saja, CSS3 sekarang mendukung gradient color untuk border. Keren bukan?
Nah berikut akan kami jelaskan cara membuat warna gradient pada border dengan css. Disini ada 2 trik yang bisa kamu gunakan, terserah kamu mau menggunakan langkah yang mana saja, gunakan yang menurutmu lebih mudah.
Cara Membuat Warna Gradient Pada Border
Trik Pertama
Dalam trik ini kita akan menggunakan pseudo-elements, tapi tidak menggunakannya secara keseluruhan. Selain menggunakan pseudo-elements kita juga akan memanfaatkan penggunaan linear-gradient melaui property background-image.
Berikut kamu bisa melihat code dibawah ini.
Warna gradient dari atas kebawah
Buat box menggunakan tag div.
<div class="kotak1"></div>
Kemudian buat css codenya seperti berikut.
.kotak1 {
width:500px;
height:500px;
background:#ddd;
margin:50px auto 0;
border-top: 20px solid #f00;
border-bottom: 20px solid #FC0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
-webkit-background-size: 20px 100%;
-moz-background-size: 20px 100%;
background-size: 20px 100%;
background-image: -webkit-linear-gradient(top, #f00 0%, #FC0 100%), -webkit-linear-gradient(top, #f00 0%, #FC0 100%);
background-image: -moz-linear-gradient(top, #f00 0%, #FC0 100%), -moz-linear-gradient(top, #f00 0%, #FC0 100%);
background-image: -o-linear-gradient(top, #f00 0%, #FC0 100%), -o-linear-gradient(top, #f00 0%, #FC0 100%);
background-image: linear-gradient(to bottom, #f00 0%, #FC0 100%), linear-gradient(to bottom, #f00 0%, #FC0 100%);
}
Untuk hasilnya kamu bisa melihatnya langsung pada link demo. Jika ada pertanyaan, bisa gak warna merah ditaruh dibawah dan oranye diatas (dalam demo ini kami menggunakan 2 warna yaitu merah dan oranye)? Tentu saja bisa! Kamu tinggal menukar-nukar warnnya. Selain itu kamu juga bisa mengganti warna default yang kami gunakan. Silahkan eksplorasi sendiri!
Gradient color dari kiri kekanan
Tidak ada bedanya model sebelumnya, cuma dalam model ini kita hanya merubah sedikit nilai dari linear-gradient. Berikut caranya.
HTML:
<div class="kotak2"></div>
CSS :
.kotak2 {
width:500px;
height:500px;
background:#ddd;
margin:50px auto 0;
border-left: 20px solid #f00;
border-right: 20px solid #FC0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-position: 0 0, 0 100%;
background-repeat: no-repeat;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
background-size: 100% 20px;
background-image: -webkit-linear-gradient(left, #f00 0%, #FC0 100%), -webkit-linear-gradient(left, #f00 0%, #FC0 100%);
background-image: -moz-linear-gradient(left, #f00 0%, #FC0 100%), -moz-linear-gradient(left, #f00 0%, #FC0 100%);
background-image: -o-linear-gradient(left, #f00 0%, #FC0 100%), -o-linear-gradient(left, #f00 0%, #FC0 100%);
background-image: linear-gradient(to right, #f00 0%, #FC0 100%), linear-gradient(to right, #f00 0%, #FC0 100%);
}
Sama halnya dengan penjelasan sebelumnya, kami bisa merubah posisi warna sesuka hati atau merubah warna sesuai warna yang kamu inginkan.
Gradient color diagonal
Nah pada model ini terdapat sedikit perbedaan. Model ini kita akan menggunakan pseudo-elements :before and :after. Code css yang dibuat akan sedikit panjang.
HTML :
<div class="kotak3"></div>
CSS :
.kotak3 {
position: relative;
width: 500px;
height: 500px;
margin: 50px auto 0;
background:#ddd;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.kotak3:before,
.kotak3:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
}
.kotak3:before {
background-position: 0 0, 0 100% ;
background-repeat: no-repeat;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
background-size: 100% 20px;
background-image: -webkit-linear-gradient(to right, #fc0 0%, #ffe682 100%), -webkit-linear-gradient(right, #f00 0%, #ffe682 100%);
background-image: -moz-linear-gradient(to right, #fc0 0%, #ffe682 100%), -moz-linear-gradient(right, #f00 0%, #ffe682 100%);
background-image: -o-linear-gradient(to right, #fc0 0%, #ffe682 100%), -o-linear-gradient(right, #f00 0%, #ffe682 100%);
background-image: linear-gradient(to right, #fc0 0%, #ffe682 100%), linear-gradient(to left, #f00 0%, #ffe682 100%);
}
.kotak3:after {
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
-webkit-background-size: 20px 100%;
-moz-background-size: 20px 100%;
background-size: 20px 100%;
background-image: -webkit-linear-gradient(top, #fc0 0%, #ffdd55 100%), -webkit-linear-gradient(to top, #f00 0%, #ffe682 100%);
background-image: -moz-linear-gradient(top, #fc0 0%, #ffdd55 100%), -moz-linear-gradient(to top, #f00 0%, #ffe682 100%);
background-image: -o-linear-gradient(top, #fc0 0%, #ffdd55 100%), -o-linear-gradient(to top, #f00 0%, #ffe682 100%);
background-image: linear-gradient(to bottom, #fc0 0%, #ffdd55 100%), linear-gradient(to top, #f00 0%, #ffe682 100%);
}
Bagaimana? Sudah lumayan pusing? Atau mungkin bingung? Nah langsung aja simak ke trik berikutnya ya.
Trik Kedua
Trik ini sedikit memudahkan kalian untuk membuat gradient color. Code yang digunakan tidak terlalu panjang seperti trik pertama. Dalam trik pertama kita menggunakan css property background-image sedangkan dalam trik ini kita akan menggunakan border-image yang merupakan CSS property yang memperbolehkan kita mengisi border dengan image serta gradient color. Browser yang mendukung border-image adalah Chrome, Internet Explorer 11, Firefox, Safari, dan Opera. Perlu dicatat, bagaimanapun, bahwa border-image hanya akan bekerja pada bentuk persegi panjang atau kotak. Ini artinya penambahan property border-radius akan mengganggu hasil dari border-image.
Berikut code-code yang bisa kamu gunakan.
Gradient color dari atas kebawah
HTML :
<div class="kotak-21"></div>
CSS :
.kotak-21 {
width: 460px;
height: 460px;
margin:50px auto 0;
background: #ddd;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #f00 0%, #fc0 100%);
-webkit-border-image: -webkit-linear-gradient(top, #f00 0%, #fc0 100%);
border-image: linear-gradient(to bottom, #f00 0%, #fc0 100%);
border-image-slice: 1;
}
Jika kamu melihatnya, kami menambahan property border-image-slice yang akan mengatur offset dari konten border-image. Properti ini diperlukan untuk menampilkan gradien sepenuhnya dalam daerah sekitar kotak. Selain itu, kami juga mengatur border color menjadi transparent dan memberi nilai border with menjadi 20px jika tidak maka border-image tidak akan memunculkan apa-apa.
Gradient color dari kiri kekanan
HTML :
<div class="kotak-22"></div>
CSS :
<pre>.kotak-22 {
width: 460px;
height: 460px;
margin: 50px auto 0;
background: #ddd;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(left, #f00 0%, #fc0 100%);
-webkit-border-image: -webkit-linear-gradient(left, #f00 0%, #fc0 100%);
border-image: linear-gradient(to right, #f00 0%, #fc0 100%);
border-image-slice: 1;
}
Gradient color diagonal
HTML :
<div class="kotak-23"></div>
CSS :
.kotak-23 {
width: 460px;
height: 460px;
margin: 50px auto 0;
background: #ddd;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, #f00 0%, #fc0 100%);
-webkit-border-image: -webkit-linear-gradient(top left, #f00 0%, #fc0 100%);
border-image: linear-gradient(to bottom right, #f00 0%, #fc0 100%);
border-image-slice: 1;
}
Bagaimana? Lebih gampang bukan? Selamat mencoba.
