01 August 2022

Uniknya Membuat Transisi Mode Siang dan Malam dengan Teknik CSS3

بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

Uniknya Membuat Transisi Mode Siang dan Malam dengan CSS3

TRANSISI SIANG MALAM adalah peralihan waktu pada siang hari yang beralih ke malam hari. Siang hari yang beranjak dari mulai matahari sepenggalahan naik hingga waktu maghrib tiba. Dan malam menjelang datang sehabis maghrib hingg kelar waktu subuh dini hari.

Transisi elok pada waktu senja sering diabadikan sebagai moment sunset bagi sebagian orang. Moment of Blue, bagi para pemfoto atau sering disebut fotografer adalah waktu terindah untuk mengambil gambar. Karena diwaktu itulah senja matahari menampakkan wajah cantiknya ke dunia. Sehingga moment yang hanya beberapa menit bahkan detik ini ditunggu oleh para pembidik foto lewat kameranya.

Tidak hanya dalam dunia fotografi, dalam dunia kodingpun, teknik transisi siang malam ini juga menjadi moment penting bagi para programmer untuk mengungkapkan ide seni dan kreatifnya untuk menunjukkan ke dunia bahwa dengan teknik ini yang diaplikasikan di bahasa website pun bisa saja terjadi.

Keindahan sunset peralihan dari siang ke malam dapat dilakukan dengan menata beberapa kode dan disatukan dalam satu property. Perputaran dari peralihan siang malam ini menjadi unik karena mempergunakan CSS yang sudah kita kenal handal melakukan tugas untuk memperindah sebuah blog atau website.



Tentu saja faktor keyframe untuk memperindah keadaan sebagai animasi pendukung yang valid. Karena tanpa animasi, maka keindahan sebuah sunset transisi siang ke malam tidak akan pernah terwujud. Sehingga element ini penting dan digunakan sebagai element utama dalam pembuatan transisi kali ini.

Dan selain itu juga, faktor warna juga mempengaruhi visual yang terlihat secara gamblang di website yang sudah ditempeli trik transisi ini. Kali ini langsung saja kita mempraktekkan sebuah proses untuk mengubah property yang telah kita tentukan untuk diubah menjadi visual yang menarik "Transisi Siang dan Malam".

Untuk perputaran dalam pergantian transisi tersebut, kita mempergunakan spin atau perputaran. Selanjutnya adalah rotate atau rotasi perputaran yang mana akan berperan mengganti siang ke malamnya.

Uniknya Membuat Transisi Mode Siang dan Malam dengan CSS3

Cara yang dapat kita lakukan sekarang adalah mengutak-atik template ya.

Pertama : Masuk ke Dashboard Blogger
Kedua : Pilih Tema
Ketiga : Klik Sesuaikan : Edit HTML
Keempat : Cari kode ]]></b:skin>
Kelima : Tempelkan kode dibawah ini persis diatas dari kode ]]></b:skin>
body {
  padding: 0;
  margin: 0;
  background-color: #0c1330;
}
.container {
  height: 25em;
  width: 16.8em;
  background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 1;
  overflow: hidden;
  border-radius: 16.8em;
  animation: colors 12s infinite forwards;
}
@keyframes colors {
  10% {
    background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
  }
  53% {
    background: linear-gradient(#14045f, #331a99, #282bce, #1555ec, #1e84f7);
  }
  55% {
    background: linear-gradient(#14045f, #331a99, #282bce, #1555ec, #1e84f7);
  }
  98% {
    background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
  }
  100% {
    background: linear-gradient(#3f006c, #750050, #b10042, #da4837, #f7bb38);
  }
}
.spinner {
  height: 28.12em;
  width: 28.12em;
  border-radius: 50%;
  position: absolute;
  top: 8.75em;
  left: -5.62em;
  animation: spin 12s infinite forwards;
}
@keyframes spin {
  10% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(180deg);
  }
  55% {
    transform: rotate(180deg);
  }
  90% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.sun {
  background-color: #f7f7de;
  height: 3.75em;
  width: 3.75em;
  border-radius: 50%;
  position: absolute;
  left: 12.18em;
  top: -1.87em;
}
.sun:before,
.sun:after {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}
.sun:before {
  height: 7.5em;
  width: 7.5em;
  right: -1.87em;
  bottom: -1.87em;
}
.sun:after {
  height: 12.5em;
  width: 12.5em;
  right: -4.37em;
  bottom: -4.37em;
}
.ray1 {
  height: 0;
  width: 0.6em;
  border-bottom: 10.6em solid rgba(255, 255, 255, 0.1);
  border-left: 1.8em solid transparent;
  border-right: 1.8em solid transparent;
  position: absolute;
  transform: rotate(130deg);
  bottom: 0.6em;
  right: 4em;
}
.ray2 {
  position: absolute;
  height: 0;
  width: 0.9em;
  border-bottom: 12.5em solid rgba(255, 255, 255, 0.1);
  border-left: 2.1em solid transparent;
  border-right: 2.1em solid transparent;
  transform: rotate(230deg);
  left: 3.75em;
  bottom: -0.3em;
}
.ray3 {
  position: absolute;
  height: 0;
  width: 0.3em;
  border-bottom: 12.5em solid rgba(255, 255, 255, 0.1);
  border-left: 0.9em solid transparent;
  border-right: 0.9em solid transparent;
  transform: rotate(80deg);
  left: -5.3em;
  bottom: -5.6em;
}
.ray4 {
  position: absolute;
  height: 0;
  width: 0.1em;
  border-bottom: 12.5em solid rgba(255, 255, 255, 0.1);
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  transform: rotate(280deg);
  left: 7.5em;
  bottom: -5.6em;
}
.moon {
  height: 3.75em;
  width: 3.75em;
  box-shadow: 1.25em -1.25em 0 0 #f7f7de;
  border-radius: 50%;
  position: absolute;
  bottom: -3.1em;
  left: 10.93em;
}
.moon:before,
.moon:after {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}
.moon:before {
  height: 6.25em;
  width: 6.25em;
  right: -2.5em;
  bottom: 0;
}
.moon:after {
  height: 11.8em;
  width: 11.8em;
  left: -2.8em;
  bottom: -2.8em;
}
.stars {
  height: 0.15em;
  width: 0.15em;
  background-color: #ffffff;
  position: absolute;
  top: 3.7em;
  left: 9.3em;
  border-radius: 50%;
  box-shadow: 3em 9.3em #ffffff, -1.8em 11.2em #ffffff, 2.5em 16.2em #ffffff,
    -5em 6.2em #ffffff, -5.6em -0.6em #ffffff, -5.6em 3.7em 0 0.06em #ffffff,
    -5em 17.5em 0 0.05em #ffffff, -7.5em 14.3em #ffffff;
  animation: twinkle 12s infinite forwards;
}
@keyframes twinkle {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  53% {
    opacity: 0.7;
  }
  55% {
    opacity: 0.7;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.glow {
  height: 21.8em;
  width: 21.8em;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  bottom: -19em;
  animation: float 5s infinite;
}
@keyframes float {
  50% {
    transform: translateY(0.75em);
  }
}
.glow:before,
.glow:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: inherit;
  border-radius: 50%;
}
.glow:before {
  left: -9.3em;
  top: -3.1em;
}
.glow:after {
  right: -5.6em;
  top: -0.8em;
}
@media screen and (min-width: 600px) {
  .container {
    font-size: 20px;
  }
}


Selanjutnya adalah masuk ke Tata Letak di halaman Dashboard Blogger juga. Disitu, di Tata Letaknya masuk ke bagian Tambah Halaman HTML/Javascript dan tempelkan kode HTML dibawah ini di konten yang tersedia disitu.
<div class="container">
      <div class="glow"></div>
      <div class="stars"></div>
      <div class="spinner">
      <div class="sun">
      <div class="ray1"></div>
      <div class="ray2"></div>
      <div class="ray3"></div>
      <div class="ray4"></div>
      </div>
      <div class="moon"></div>
</div></div>

Terakhir save saja kerjaan kalian. Pastinya sudah jadi, jikalau mau lihat di codepen saya juga bisa. Seperti ini contohnya yang sudah saya terapkan. Dilihat boleh juga. Ini dia.



Itu dia sudah kita kerjakan barusan dan jadi. Terima kasih sudah mampir dimari di artikel Transisi Mode Siang dan Malam dengan CSS3. Bagaimana? tidak sulit khan? tinggal ikuti saja urutan cara yang sudah disebutkan diatas. Oh iya, jangan melihat kesuksesan seseorang tanpa melihat betapa sakit jatuh bangunnya dia menuju kesuksesan setelah bertubi-tubi kegagalan.

Seperti yang pernah diungkapkan oleh pendiri Honda - Soichiro Honda - "Orang-orang tidak pernah melihat 99% kegagalan saya, mereka melihat 1% kesuksesan saya". Sungguh memotivasi bukan teman-teman? Salam Blogger.

Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Uniknya Membuat Transisi Mode Siang dan Malam dengan Teknik CSS3 . 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