23 November 2023

Logo Monkey d Luffy Flag One Piece dalam Kemasan CSS

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Membuat Logo Luffy Flag One Piece dengan CSS
ONE PIECE atau bahasa Jepangnya (Jepang: ワンピース, Hepburn: Wan Pīsu). Adalah serial manga yang digambar oleh Sensei Eiichiro Oda dan masuk dalam Majalah Weekly Shonen Jump. Manga ini berkisah tentang petualangan Bajak Laut.

Manga dengan tokoh utama Monkey d'Luffy telah ditahbiskan sebagai manga terbaik dan terlaris di dunia. Dikisahkan, bersama tim Mugiwara lainnya yakni Roronoa Zoro, Vinsmoke Sanji, Nami, Usopp, Tony Tony Chopper, Nico Robin, Brook dan Franky/Cutty Flam, Luffy menjelajahi Grand Line guna mencari -- One Piece -- untuk menjadi Raja Bajak Laut Baru yang sebelumnya dipegang oleh Gold D. Roger.



Ini dia video One Piece :

@gavinok The Greatest OP opening + Song 🥇 #onepiece #onepiece1074 #newopening ♬ original sound - gavin.aep


Dalam petualangannya, para Mugiwara selalu berhadapan dengan kumpulan Shichibukai yang terdiri dari Dracule Mihawk, Crocodile, Gekko Moriah, Jinbei, Boa Hancock, Don Quixote Doflamingo, Marshall D Teach, Trafalgar Law, Buggy, Edward Weevil dan Bartholomew Kuma. Untuk menghadapinya, Luffy harus mengeluarkan Gear hingga Gear 6 dengan Mode Gomu Gomu No King Kong Gun. Selain itu, karena buah Gomu Gomu No, badan Luffy menjadi elastis dan sulit dikalahkan.

Ini daftar kru Mugiwara beserta bountynya :

Mugiwara Bounty
1. Monkey d'Luffy. Nilai tebusan/Bounty : ฿3.000.000.000
2. Roronoa Zorro. Nilai tebusan/Bounty : ฿1.111.000.000
3. Nami. Nilai tebusan/Bounty : ฿366,000,000
4. Vinsmoke Sanji. Nilai tebusan/Bounty : ฿1.032.000.000
5. Usopp. Nilai tebusan/Bounty : ฿500.000.000
6. Tony Tony Chopper. Nilai tebusan/Bounty : ฿1,000
7. Nico Robin. Nilai tebusan/Bounty : ฿930.000.000
8. Franky/Cutty Flam. Nilai tebusan/Bounty : ฿930.000.000
9. Brook. Nilai tebusan/Bounty : ฿1,100,000,000


Ini dia daftar tim Shichibukai beserta kekuatannya :

Kekuatan 11 Shichibukai
01. Dracule Mihawk - Elang : Ahli Pedang
02. Crocodile - Buaya : Kekuatan Pasir
03. Gecko Moriah : Ahli Bayangan
04. Jinbei : Ahli Pertarungan di Air
05. Boa Hancock : Kekuatan membuat musuh menjadi batu
06. Don Quixote Flamingo - Burung Flamingo : Kekuatan dan keterampilan dari benang
07. Bartholomew Kuma - Macan : Ahli Teleportasi
08. Marshall D Teach : Ahli dalam Kekuatan Gelap
09. Trafalgar Law : Ahli Manipulasi tubuh
10. Buggy : Badut
11. Weevil : ?

NB : Bounty ditetapkan sebagai mata uang untuk harga per kepala bajak laut.



One Piece

One Piece atau Potongan. Artinya adalah harta benda yang memiliki kekuatan. Para bajak laut memperebutkannya. Tidak terkecuali dengan para Mugiwara. Di tengah perjalanan, Mugiwara harus berhadapan dengan tim Shichibukai. Luffy dan temannya mendapatkan kekuatan super tak terhingga ketika memakan Buah - Devil Fruit - Iblis. Kekuatannya menjadi berbeda dari manusia biasa.

Thousand Sunny

Ya Thousand Sunny adalah nama kapal milik Mugiwara setelah kapal pertama Going Marry rusak dan tidak dapat berlayar lagi. Kapal ini diawaki oleh Luffy (kapten, red), Zorro (wakil kapten, red), Nami (navigator, red), Usopp (inventor dan penembak jitu, red), Sanji (koki, red), Chopper (rusa antropomorfis dan dokter, red), Robin (arkeolog, red), Franky (teknisi kapal, red) dan Brook (juru kemudi, red).

World Government

Selain Shichibukai, tim Mugiwara harus berhadapan dengan pemerintahan (Government, red). Enam tokoh Admiral paling ditakuti dan berbahaya : Borsalino, Issho, Ryokugyu, Akainu, Kuzan dan Sengoku.. Mungkin dari keenam tokoh "Admiral" itu, Borsalino AKA Kizaru -- Cahaya Kilat -- adalah yang tercepat dan mematikan.

Kecepatan serangan layaknya cahaya sulit dihindari oleh para bajak laut. Hanya Luffy dengan Gear ke 6-nya yang mampu mengimbanginya. Untuk Admiral terkuat dipegang Akainu. Pemilik kekuatan lava ini menjadi lawan terberat Mugiwara selain Kizaru.

Luffy Flag dengan CSS

Sekarang saatnya saya memberikan tutorial tentang membuat logo Luffy Flag -- One Piece -- dengan CSS. Kreasi tidak sebatas aksi, dengan imajinasi, kreasi menjadi sebuah mimpi yang terbeli. Hm, sungguh indah puisinya. Meski saya spontan menggunakannya. Langsung saja ya kita ke tutorialnya.

Ini dia :

Caranya adalah sebagai berikut :

1. Masuk ke DASHBOARD blogger
2. Pilih TEMA
3. Klik SESUAIKAN : EDIT HTML
4. Cari kode ]]><b:skin/>
5. Tempelkan kode dibawah ini persis diatas kode ]]><b:skin/> tersebut
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");

:root {
  --black: #010202;
  --red: #CF000F;
  --yellow: #F7CA18;
  --border-width: 3px;
  --border: var(--black) solid var(--border-width);
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Roboto", sans-serif;
}

.one-piece {
  position: relative;
  transition: 0.2s;
}

.one-piece:hover {
  transform: scale(1.25);
}

.one-piece .hat {
  width: 100px;
  height: 100px;
  border: var(--border);
  background: var(--red);
  border-radius: 50%;
  clip-path: inset(0 0 50% 0);
  position: absolute;
  overflow: hidden;
  top: -3px;
}

.one-piece .hat::after {
  content: "";
  height: 12px;
  width: 110%;
  border: var(--border);
  background: var(--yellow);
  position: absolute;
  top: 36%;
  transform: translatey(-50%);
  left: -10px;
}

.one-piece .hat .line-left {
  position: absolute;
  border-left: var(--border);
  height: 13px;
  left: 28px;
  top: 13px;
  border-radius: 50%;
  width: 5px;
  transform: rotate(34deg);
}

.one-piece .hat .line-left::before {
  content: "";
  position: absolute;
  border-left: var(--border);
  height: 17px;
  left: -10px;
  top: 1px;
  border-radius: 50%;
  width: 5px;
  transform: rotate(0deg);
}

.one-piece .hat .line-left::after {
  content: "";
  position: absolute;
  border-left: var(--border);
  height: 9px;
  left: 5px;
  top: -3px;
  border-radius: 50%;
  width: 3px;
  transform: rotate(-9deg);
}

.one-piece .hat .line-right {
  position: absolute;
  border-right: var(--border);
  height: 15px;
  right: 22px;
  top: 11px;
  border-radius: 50%;
  width: 5px;
  transform: rotate(-30deg);
}

.one-piece .hat .line-right::before {
  content: "";
  position: absolute;
  border-right: var(--border);
  height: 9px;
  right: 7px;
  top: 0px;
  border-radius: 50%;
  width: 4px;
  transform: rotate(11deg);
}

.one-piece .head::before {
  content: "";
  height: 5px;
  width: 150px;
  border: var(--border);
  background: var(--red);
  position: absolute;
  top: 50%;
  transform: translatey(-8px);
  border-radius: 5px;
  z-index: 1;
}

.one-piece .head::after {
  content: "";
  width: 11px;
  height: 8px;
  border-radius: 50%;
  background: var(--black);
  position: absolute;
  bottom: 8px;
}

.one-piece .head {
  width: 100px;
  height: calc(100px - 0.9rem);
  border: var(--border);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 0.9rem;
  position: relative;
  background: #fff;
}

.one-piece .eye {
  width: 28px;
  height: 28px;
  background: var(--black);
  border-radius: 50%;
  margin: 0 0.35rem;
}

.one-piece .bone {
  height: 13px;
  width: 50px;
  border: var(--border);
  border-left: none;
  z-index: -1;
  position: absolute;
}

.one-piece .bone::after {
  content: "";
  height: 15px;
  width: 15px;
  border: var(--border);
  border-radius: 50%;
  left: -1px;
  top: 1px;
  position: absolute;
  background: #fff;
  transform: translatex(-18px) translatey(2px) rotate(-90deg);
  clip-path: polygon(50% 100%, 0 100%, 0 0, 100% 0, 100% 25%, 50% 50%);
}

.one-piece .bone::before {
  content: "";
  height: 15px;
  width: 15px;
  border: var(--border);
  border-radius: 50%;
  left: -1px;
  top: 1px;
  position: absolute;
  background: #fff;
  transform: translatex(-18px) translatey(-13px);
  clip-path: polygon(25% 100%, 0 100%, 0 0, 100% 0, 100% 50%, 50% 50%);
}

.one-piece .bone:nth-child(1) {
  transform: rotate(42deg);
  top: 23px;
  left: -26px;
}

.one-piece .bone:nth-child(2) {
  transform: rotate(137deg);
  top: 23px;
  right: -26px;
}

.one-piece .bone:nth-child(3) {
  transform: rotate(313deg);
  bottom: -13px;
  left: 0px;
}

.one-piece .bone:nth-child(4) {
  transform: rotate(227deg);
  bottom: -13px;
  right: 0px;
}

.one-piece .mouth {
  position: absolute;
  height: 120px;
  width: 55px;
  border: var(--border);
  margin: 0 auto;
  border-radius: 50%;
  transform: rotatex(60deg) translatex(-50%);
  left: 50%;
  top: 55px;
  z-index: -1;
  border-width: 4px;
  overflow: hidden;
  background: #fff;
}

.one-piece .mouth::before,
.one-piece .mouth::after {
  content: "";
  width: 70px;
  height: 100px;
  border: var(--border);
  position: absolute;
  border-radius: 50%;
  transform: rotatex(0deg) translatex(-50%);
  left: 50%;
  border-width: 5px;
}

.one-piece .mouth::before {
  top: -52px;
}

.one-piece .mouth::after {
  top: -30px;
}

.one-piece .mouth .teeth {
  position: absolute;
  left: 50%;
  width: var(--border-width);
  height: 46px;
  background: var(--black);
  top: 30px;
  transform: translatex(-50%);
}

.one-piece .mouth .teeth::after,
.one-piece .mouth .teeth::before {
  background: var(--black);
  position: absolute;
  height: 46px;
  width: var(--border-width);
  content: "";
}

.one-piece .mouth .teeth::after {
  transform: translatex(-14px) rotate(3deg);
}

.one-piece .mouth .teeth::before {
  transform: translatex(14px) rotate(-3deg);
}

h1 {
  margin-top: 4.5rem;
  margin-bottom: 0.5rem;
}

a {
  color: #3eaf7c;
}

.links a + a {
  margin-left: 1rem;
}

.author {
  margin-top: 1rem;
}

.author code {
  color: tomato;
  font-weight: bold;
}


6. Selanjutnya klik SAVE
7. Masuk TATA LETAK
8. Pilih TAMBAH HTML/JAVASCRIPT
9. Tempelkan kode dibawah ini di konten kosong yang tersedia disitu
<div class="vue-3 one-piece">
  <div class="bones">
    <div class="bone"></div>
    <div class="bone"></div>
    <div class="bone"></div>
    <div class="bone"></div>
  </div>
  <div class="head">
    <div class="hat">
      <div class="line-left"></div>
      <div class="line-right"></div>
    </div>
    <div class="eye"></div>
    <div class="eye"></div>
  </div>
  <div class="mouth">
    <div class="teeth"></div>
  </div>
</div>

<h1>Luffy Flag</h1>


10. Save lagi dan Publikasikan.
11. Lihat blog kalian dan sudah muncul itu logo Luffy.




Hidup memang penuh misteri dimana kita tidak akan pernah tahu bagaimana kehidupan ke depan akan terjadi. Namun hidup tak pernah lepas dari namanya kesempatan, masalah dan rintangan.

Ketika kita dihadapkan pada masalah dan rintangan, kita dituntut untuk bisa melewati tantangan itu. Oleh sebab itulah manusia selalu mencari solusi dan menyelesaikannya.

Beberapa orang mungkin pernah merasakan fase kehidupan yang berat dan menyakitkan. Perasaan itu rasanya seperti membebani diri. Namun, semua itu harus bisa dijadikan pelajaran agar bisa menjadi pribadi yang lebih baik di hari berikutnya.

Selain bersyukur dan introspeksi diri, dengan membaca kata-kata mutiara kehidupan, kita akan merasa lega dan tenang. Tak dipungkiri kata-kata mutiara mengandung makna yang cukup dalam dan bisa memotivasi untuk bangit dari keterpurukan. Kata-kata itu mampu memberikan energi positif bagi pembacanya.

"Aku tidak peduli, walaupun aku harus mati untuk mengejar impianku." (Monkey D' Luffy)
"Hidup ini seperti pensil yang lama lama akan habis, tetapi akan meninggalkan tulisan yang indah dalam kehidupan." (Nami)
"Ketika dunia jahat kepadamu, maka berusahalah untuk menghadapinya, karena tidak ada orang yang membantumu jika kau tidak berusaha." (Roronoa Zoro)

Sudah sekian saja artikel yang dapat saya tulis. Semoga bermanfaat. Selamat malam. Salam --Jet Pistol--.

Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Logo Monkey d Luffy Flag One Piece dalam Kemasan CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon