Search articles, tutorials, tips...
Analisis mendalam tentang gradien CSS yang kompleks dan latar belakang ganda untuk menciptakan Jolly Roger ikonik Bajak Laut Topi Jerami. Karya seni ini tidak menggunakan gambar atau SVG.
Thanks for reading!
If you found this article helpful, maybe you could help share it.
Pelajari cara membuat efek api prosedural. Tutorial ini menggabungkan mode campuran CSS untuk tampilan bercahaya dan JavaScript untuk menghasilkan gerakan partikel acak.
A deep dive into complex CSS gradients and multiple backgrounds to recreate the iconic Jolly Roger of the Straw Hat Pirates. This artwork uses no images or SVG.
Tutorial ini menunjukkan cara memanfaatkan teknik CSS tingkat lanjut—khususnya, lapisan radial-gradient dan linear-gradient berganda—untuk menggambar ilustrasi detail, seperti bendera Bajak Laut Topi Jerami yang terkenal dari *One Piece*, hanya menggunakan satu elemen HTML.
Seluruh tengkorak dan tulang bersilang (crossbones) dibangun dengan melapisi berbagai gradien di dalam properti background elemen utama (.one-piece) dan elemen semunya (::before dan ::after). Setiap garis dan lingkaran gradien adalah lapisan terpisah.
Kita menggunakan satu elemen wadah, menetapkan Variabel CSS (--s) untuk memudahkan penskalaan seluruh bendera.
<div class="one-piece"></div>Kelas utama .one-piece menangani tengkorak, tulang bersilang (secara implisit), dan topi jerami yang khas. Pelapisan sangat penting, dimulai dari inti tengkorak dan bergerak keluar hingga detail topi.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.one-piece {
--s: 200px;
height: var(--s);
aspect-ratio: 1;
position: relative;
background: radial-gradient(#000 70%, #0000 73%) 50% 57% / 7% 7%,
radial-gradient(#000 70%, #0000 73%) 39% 48% / 14% 14%,
radial-gradient(#000 70%, #0000 73%) 61% 48% / 14% 14%,
linear-gradient(#000 0 0) 50% 39% / 69% 2px,
linear-gradient(#000 0 0) 50% 35.8% / 59% 2px,
linear-gradient(#000 0 0) 50% 31% / 42% 2px,
radial-gradient(50% 100% at 50% 134%, #f0b114 98%, #0000) 50% 15% /
44% 19%,
radial-gradient(50% 84% at 50% 100%, #cf091a 98%, #0000) 50% 24% / 44%
16%,
radial-gradient(50% 23% at 50% 100%, #f0b114 98%, #0000) 50% 24% / 68%
20%,
radial-gradient(#fff 67.5%, #000 68.5% 70%, #0000 71%) 50% 34% / 47%
47%;
background-repeat: no-repeat;
}Elemen ::before digunakan untuk menggambar tulang bersilang, menggunakan beberapa gradien linear hitam untuk bentuk tulang dan putih sebagai warna latar belakang. Elemen ::after terutama digunakan untuk **latar belakang bendera melingkar hitam** dan menambahkan efek border blur yang halus.
/* ::before: Menciptakan tulang bersilang */
.one-piece::before {
content: "";
position: absolute;
inset: 55% 37% 20%;
border: 2px solid #000;
border-radius: 14% 14% 30px 30px / 50% 50% 30px 30px;
background: linear-gradient(#000 0 0) 78% 50% / 4% 43%,
linear-gradient(#000 0 0) 22% 50% / 4% 43%,
linear-gradient(#000 0 0) 50% 50% / 4% 47%,
radial-gradient(75% 57% at 50% 0, #0000 91%, #000 93% 98%, #0000),
radial-gradient(85% 76% at 50% 0, #0000 93%, #000 95% 98%, #0000) #fff;
background-repeat: no-repeat;
z-index: -1;
}
/* ::after: Menciptakan bendera melingkar utama dan garis luar yang halus */
.one-piece::after {
content: "";
position: absolute;
inset: 0;
padding: 10%;
z-index: -2;
filter: blur(4px) contrast(10);
background: radial-gradient(#fff 66%, #0000 71%) 10% 97% / 10% 11%,
radial-gradient(#fff 66%, #0000 71%) 3% 90% / 10% 11%,
radial-gradient(#fff 66%, #0000 71%) 97% 91% / 10% 11%,
radial-gradient(#fff 66%, #0000 71%) 89% 98% / 10% 11%,
radial-gradient(#fff 66%, #0000 71%) 89% 2% / 10% 11%,
radial-gradient(#fff 66%, #0000 71%) 98% 9% / 12% 10%,
radial-gradient(#fff 66%, #0000 71%) 2% 10% / 11% 10%,
radial-gradient(#fff 66%, #0000 71%) 9% 2% / 10% 11%,
linear-gradient(45deg, #0000 47%, #fff 0 53%, #0000 0) content-box,
linear-gradient(-45deg, #0000 47%, #fff 0 53%, #0000 0) content-box,
#000;
background-repeat: no-repeat;
}Dengan memposisikan dan mengukur puluhan gradien sederhana secara cermat pada tiga elemen yang ditumpuk, kita berhasil merender grafik yang kompleks dan dapat dikenali. Metode ini menunjukkan kekuatan CSS murni untuk kreasi grafis.