Make the Shadow Effect Match the Color of the Image

Aa ingin update (other trick) postingan sebelumnya mengenai Zwei coole CSS Tricks von Dr. Robin! Pada artikel tersebut trik membuat bayangan (back shadows) yang selaras dengan warna gambar menggunakan penerapan 2 buah image! Memang jadi pertimbangan tersendiri jika hanya untuk menampilkan efek bayangan harus merender 2 buah img #-o Ada cara baru, disini penggunaan image tetap seperti biasa 1 biji dan tentunya bumbu-bumbu CSS yang akan melakukan keajaibannya ;)) Penampakan seperti berikut:

Ada dua source yg bisa sobat satroni, silahkan pilih mau yang mana: Realistic Image Shadows & Realistic shadows to images. Versi saya, gue melakukan sedikit penambahan CSS rule-set versi master Markshall! Sebelum masuk ke puncak menara, ada baiknya kalian baca-baca terlebih dahulu tautan yg gue dapet. Karena ini menyangkut rule set CSS versi baru :-<

• CSS Variables - var() Function
• CSS var() function
• Using CSS custom properties (variables)
• How CSS Variables Can Improve Efficiency and Consistency

.rims { --size: 200px; height: var(--size); width: var(--size); background-image: var(--img); background-size: contain; background-repeat: no-repeat; position: relative; background-position: center center; } .rims::after { content: ""; position: absolute; width: calc(var(--size) * 0.8); height: 100%; top: calc(var(--size) * 0.05); left: 50%; transform: translateX(-50%); background-image: var(--img); background-size: cover; background-repeat: no-repeat; z-index: -1; filter: blur(20px) opacity(70%); } /* Optional Tag Image into Center */ .rimss { display: flex; flex-flow: row wrap; justify-items: center; justify-content: center; align-items: center; } .rims { margin: 0 10px 35px; }

<div class="rimss">
  <div class="rims" style="--img: url(LINK_IMAGE-1);"></div>
  <div class="rims" style="--img: url(LINK_IMAGE-2)"></div>
  <div class="rims" style="--img: url(LINK_IMAGE-3)"></div>
</div>

Jika sobat mau ada efek hover sedikit, dimana ketika disorot gambar maka bayangan akan IS GONE! Ganti CSS dengan yg ini.

.rims { --size: 200px; height: var(--size); width: var(--size); background-image: var(--img); background-size: contain; background-repeat: no-repeat; position: relative; background-position: center center; } .rims::after { content: ""; position: absolute; width: calc(var(--size) * 0.8); height: 100%; top: calc(var(--size) * 0.05); left: 50%; transform: translateX(-50%); background-image: var(--img); background-size: cover; background-repeat: no-repeat; z-index: -1; filter: blur(20px) opacity(70%); transition: ease-in .5s; } .rims:hover::after { filter: blur(0) opacity(0); transition: ease-out .3s; }

Waduh kode bentrok dengan emoticon ~X( (Ctrl + U saja buat liat kode CSS-nya yaaa!!!) Penampakan jadi:

BONUS:

CSS Only Playground - Colorful Bubbles - Card pseudo-element hover - Overlapping Sushi Cards - Fading Modal - Select All... Then Select Some - Pulsating Marble - That Chicken Nugget - Content filter v2 - pure css - Photography page concept - Animated CSS Switch Button - Fullscreen Menu Enter - Menu css - Pure CSS Slideshow - Animated Buttons - border-radius playground - Contact Form Transitions with Radio Buttons - Creative Wave Button - Simple Navigation System - Folding panorama animation - CSS folded poster effect - Input placeholder hint - Pure CSS wavy surface - Glass - Mask & Css Filter - Stairs Dropdown - Kalimah Gradients - CSS Variables 3D Carousel (No JS) - Collapsible Dropdown - Clipped Image Reveal on Hover - Pure CSS Menu - #13 - Bookmark Dropdown - CSS Typing Effect - Frosted glass card overlay - 28+ CSS Image Effects - 7 Cool CSS Highlight Text Effects

Happy blogging :-bd