Logo Monkey d Luffy Flag One Piece dalam Kemasan CSS

agung wisudhatama November 23, 2023 Komentar

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

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.

Baca Juga :

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.

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.