The Magic of CSS Code, It's Awesome

Ketika kita menemukan sesuatu yang membuat terkesima, mau tak mau ada rasa ingin melakukan penelusuran lebih akan suatu hal tersebut! Bagi saya pribadi jika bertemu dengan hal semacam itu akan langsung melihat source link dan melakukan sedikit utak-atik apa bisa dijadikan bahan postingan atau tidak ;)) Dua contoh hal yg membuat gue berdecak towewewww creativity pure using CSS :-O

Kadang sangkin asyiknya melakukan atik-utak gue lupa menyimpan link tujuannya, habisan masuk sampai ke dalam-dalam merangseuk bagaikan mesin bor :)) Seperti contoh yg satu ini, membuat taging VS seperti tabel, laksana compare display @-)

.compare { display: flex; align-items: center; margin: 5px auto; width: 100%; height: 250px; padding: 10px; color: #31808c; overflow: hidden; background-color: #dbe0e4; text-align: center; font: 1.05rem/1 'Rubik', sans-serif; box-sizing: border-box; } .toggle-column { flex: 1; } .toggle-column img { width: 65%; max-height: 55vh; object-fit: contain; } p { text-align: left; } .vs-column { height: 100%; display: flex; flex-direction: column; } .vs-column::before, .vs-column::after { content: ''; flex: 1; align-self: center; border-left: 2px dashed #c9baa7; } .vs { width: 50px; height: 50px; margin: 20px 10px; border-radius: 50%; color: #f5f4ef; font-size: 1.5rem; line-height: 50px; background-color: #c9baa7; }

<div class="compare">
<div class="toggle-column">
  <img src="PATH_IMG" />
</div>
<div class="vs-column">
  <div class="vs">vs</div>
</div>
<div class="toggle-column">
<p>BLAH-BLEH-BLOH</p>
</div>
</div>

Silahkan edit-edit/tambah-tambah lagi kode yg ada sesuaikan dengan kebutuhan masing-masing :) Link sumber ini yg saya lupa ada dimana! Tetapi ada disatu tempat didalam link BONUS yg akan gue bagikan untuk kalian :)>-

BON US

Hover with Clip-Path Effect - Sliding tabs | CSS transitions only - Image Compare Viewer - CSS Speech Bubble (svg data uri) - Holiday Feature Folding Cards - Expand Information - NOISY IMAGE GRID - Image Hovers - Card Reveal - CPC - Image hover - Shifting Image on Hover - Image Magnifier Glass on Hover - CSS Image Hover Effects - Random Picker (Image Hover) - Extreme Hover - HTML + CSS - CSS Clip-Path Hover Effect - Custom Search - TGMT - Morse - CSS Image Gallery - Declaring Bits of Unselectable Text - CSS Image Hover Effects - Very Simple Pure CSS Carousel - CSS-only modal - CSS variable image zoom 🔍😅 - Select All... Then Select Some - A Pen by ycw - Pure CSS "Authentication" 😅🔒 - Pure-CSS Tooltips - A Very Simple Pure CSS 3D Room - px2rem - CSS Only, Content Overflow Shadows - Button Neon (: hover fx) - Border Buttons - Social Media Buttons Hover Effect - Pure CSS navigation toggle animation - Movie Ticket Animation - Loop 23 - Gradient border - Button Hover

Keder euy mosting pake editor blog baru #-o mau upload gambar saja jadi ribet :))

Happy blogging lah \m/