Gunakan gradien kerucut untuk membuat batas yang keren

Gradien kerucut dapat digunakan untuk membuat beberapa efek menarik, seperti contoh pembatas yang bagus ini.

CodePen ini dibuat oleh Adam Argyle, awalnya dibagikan melalui ini tweet di Twitter, menunjukkan cara menggunakan kerucut gradien ke buat pembatas.

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

Terry Mun dengan kreatif bercabang Codepen Adam dan membuat CodePen. Gerakkan mouse ke dan Anda akan melihat perubahan gradien, berkat sedikit kode JavaScript memperbarui properti khusus CSS yang menyimpan sudut rotasi.

Contoh ini menggunakan border-image-source saat ini. Properti ini menetapkan gambar sumber yang digunakan untuk membuat atribut {i>border<i}. Seperti halnya properti lain yang menerima nilai gambar, setiap gradien CSS jenisnya juga valid.

border-image-source

Dukungan Browser

  • Chrome: 15.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

Sumber

Gradien kerucut

Dukungan Browser

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 83.
  • Safari: 12.1.

Sumber