بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
BORDER garis bergradient warna warni adalah garis yang membentuk obyek berupa kotak dan bergradient warna. Pada property ini, bisa ditambahkan radius atau sudut lengkung maupun tidak ditambahkan juga tidak papa sehingga hasil akhirnya nanti si obyek akan memiliki sudut lancip. Border garis yang akan saya berikan tutorialnya ini memang tidak jauh dari CSS. Seperti biasa CSS memang menjadi obyek utama dari sekian banyak artikel-artikel di website ini. Jadi stay tune ya.
Dalam tutorial kita kali ini, saya akan membahas tentang pemberian efek bergradient warna warni pada border pada sebuah garis atau obyek. Nantinya obyek itu akan berbentuk oval dan bergradient warna. Sehingga akan menambah kesan yang estetik dari sebuah desain dengan bahasa pemrograman CSS3. Memang lumayan bagus untuk ukuran sebuah gradient warna. Karena warna solid sudah mainstream digunakan oleh beberapa blogger. Sehingga kali ini akan kita buat sebuah obyek dengan gradasi warna.
Baca Juga :
Pada prakteknya kita hanya membutuhkan sebuah property yaitu Transform Translate. Silakan buka di www.w3.org untuk lebih lanjut tentang beberapa property CSS3. Disana sudah lengkap dan kalian tinggal mempelajari, saya hanya memberikan tutorial singkatnya saja. Nanti ada Metode 1 dan Metode 2 yang akan saya berikan. Metode 1 dengan sudut lancip pada obyeknya dan bergradient, sedangkan pada Metode 2 adalah sudut tumpul pada obyek bergradient-nya.
Yuk mulai saja tutorialnya :
Membuat Border Garis Bergradient Warna Warni
Metode 1
1. Masuk ke Tema
2. Terus pilih Sesuaikan : Edit HTML pada tahap ini kita akan menuju ke template
3. Kemudian cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
height: 300px;
width: 300px;
border: 15px solid transparent;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-image:-webkit-gradient(
linear,
right top,
left top,
from(#ff4b2b),
to(#ff416c)
);
border-image:linear-gradient(to right, #ff4b2b,#ff416c);
border-image-slice:1;
font-size: 30px;
text-align: center;
font-family: 'Poppins',sans-serif;
padding: 110px 0;
}Catatan :
Untuk memunculkan garis bergradient warna warni maka mesti ditulis seperti ini
Metode 1 : <div class="box">Metode 1</div>
Metode 2 : <div class="box">Metode 2</div>
Metode 2
1. Masih sama, masuk ke Tema dulu
2. Terus pilih Sesuaikan : Edit HTML pada tahap ini kita akan dibawa menuju ke template
3. Kemudian cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
height: 300px;
width: 300px;
background-color: white;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-family: 'Poppins',sans-serif;
font-size: 30px;
text-align: center;
padding: 130px 0;
border-radius: 15px;
}
.box:before{
position: absolute;
content: "";
height: 120%;
width: 120%;
background-image: -webkit-linear-gradient(
to bottom right,
#ff4b2b,
#ff416c
);
background-image: linear-gradient(
to bottom right,
#ff4b2b,
#ff416c
);
left: -10%;
top: -10%;
z-index: -1;
border-radius: 15px;
}Nah sekarang sudah jadi khan. Untuk demonya bisa dilihat dibawah ini ya
Oke sampai penghujung acara. Semoga jadi ya nanti ketika kalian mempraktekkannya. Sudah larut malam nih. Saatnya istirahat dan besok lanjut kerja lagi. Mata sudah 5 watt. Maaf ya teman-teman bila ada salah kata salah tulis dalam artikel kali ini. Silakan kirim komentar bila ada yang perlu ditanyakan. Terima kasih banyak yang sudah mampir. "Kamu tidak tahu apa yang ada di depan, jadi nikmati saat ini dan hargai setiap momen kehidupan. "Dalam hidup, setiap momen dipenuhi dengan kebahagiaan yang hanya perlu kamu lihat dan nikmati." Salam.
