// API callback
av({"version":"1.0","encoding":"UTF-8","entry":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-4918276818492892488.post-5668336155113323401"},"published":{"$t":"2020-07-09T17:56:00.000+07:00"},"updated":{"$t":"2020-07-09T17:56:45.321+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Coded"},{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS"},{"scheme":"http://www.blogger.com/atom/ns#","term":"CSS3"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Hack"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Resource"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trik dan Tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Web"}],"title":{"type":"text","$t":"Make the Shadow Effect Match the Color of the Image"},"content":{"type":"html","$t":"\u003Cspan class=\"dropcaps\"\u003EA\u003C\/span\u003Ea ingin update (other trick) postingan sebelumnya mengenai \u003Ca href=\"\/2020\/04\/zwei-coole-css-tricks-von-dr-robin.html\" title=\"Zwei coole CSS Tricks von Dr. Robin\"\u003EZwei coole CSS Tricks\u003C\/a\u003E 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 ;)) \nPenampakan seperti berikut:\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca class=\"lightbox_img\" href=\"\/\/1.bp.blogspot.com\/-P_BulGL6XME\/Xwbr2F_9X3I\/AAAAAAAAJDQ\/LrLK1NdNy24MC0_MuzRl9AZt1k2fPXR4QCK4BGAsYHg\/s800\/Realistic%2Bshadows%2Bto%2Bimages.png\"\u003E\u003Cimg alt=\"Realistic Image Shadows\" data-original-height=\"460\" data-original-width=\"800\" src=\"\/\/1.bp.blogspot.com\/-P_BulGL6XME\/Xwbr2F_9X3I\/AAAAAAAAJDQ\/LrLK1NdNy24MC0_MuzRl9AZt1k2fPXR4QCK4BGAsYHg\/s320\/Realistic%2Bshadows%2Bto%2Bimages.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003EAda dua source yg bisa sobat satroni, silahkan pilih mau yang mana: \u003Cu onclick=\"window.open('\/\/codepen.io\/Markshall\/pen\/dyGMoXr');\"\u003ERealistic Image Shadows\u003C\/u\u003E \u0026amp; \u003Cu onclick=\"window.open('\/\/codepen.io\/gayane-gasparyan\/pen\/LYGGmmr');\"\u003ERealistic shadows to images\u003C\/u\u003E. Versi saya, gue melakukan sedikit penambahan \u003Cq\u003ECSS\u003C\/q\u003E 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 :-\u0026lt; \u003Cul class=\"fuck\"\u003E\u003Cli\u003E\u003Cu onclick=\"window.open('\/\/www.w3schools.com\/css\/css3_variables.asp');\"\u003ECSS Variables - var() Function\u003C\/u\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cu onclick=\"window.open('\/\/www.w3schools.com\/cssref\/func_var.asp');\"\u003ECSS var() function\u003C\/u\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cu onclick=\"window.open('\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties');\"\u003EUsing CSS custom properties\u003C\/u\u003E (variables)\u003C\/li\u003E\u003Cli\u003E\u003Cu onclick=\"window.open('\/\/speckyboy.com\/css-variables-improve-efficiency-consistency\/');\"\u003EHow CSS Variables Can Improve Efficiency and Consistency\u003C\/u\u003E\u003C\/li\u003E\u003C\/ul\u003E\u003Cdiv class=\"fullpost\"\u003E\u003Cdiv class=\"codeview\" title=\"Kode CSS Without Hover\"\u003E.rims {\n  --size: 200px;\n  height: var(--size);\n  width: var(--size);\n  background-image: var(--img);\n  background-size: contain;\n  background-repeat: no-repeat;\n  position: relative;\n  background-position: center center;\n}\n.rims::after {\n  content: \"\";\n  position: absolute;\n  width: calc(var(--size) * 0.8);\n  height: 100%;\n  top: calc(var(--size) * 0.05);\n  left: 50%;\n  transform: translateX(-50%);\n  background-image: var(--img);\n  background-size: cover;\n  background-repeat: no-repeat;\n  z-index: -1;\n  filter: blur(20px) opacity(70%);\n}\n\n\/* Optional Tag Image into Center *\/\n.rimss {\n  display: flex;\n  flex-flow: row wrap;\n  justify-items: center;\n  justify-content: center;\n  align-items: center;\n}\n.rims {\n  margin: 0 10px 35px;\n}\u003C\/div\u003E\u003Cpre lang=\"\"\u003E\u003Ccodec\u003E\u0026lt;div class=\"rimss\"\u0026gt;\n  \u0026lt;div class=\"rims\" style=\"--img: url(LINK_IMAGE-1);\"\u0026gt;\u0026lt;\/div\u0026gt;\n  \u0026lt;div class=\"rims\" style=\"--img: url(LINK_IMAGE-2)\"\u0026gt;\u0026lt;\/div\u0026gt;\n  \u0026lt;div class=\"rims\" style=\"--img: url(LINK_IMAGE-3)\"\u0026gt;\u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/codec\u003E\u003C\/pre\u003EJika sobat mau ada efek hover sedikit, dimana ketika disorot gambar maka bayangan akan IS GONE! Ganti CSS dengan yg ini.\u003Cdiv class=\"code\" title=\"Kode CSS With Hover\"\u003E.rims {\n  --size: 200px;\n  height: var(--size);\n  width: var(--size);\n  background-image: var(--img);\n  background-size: contain;\n  background-repeat: no-repeat;\n  position: relative;\n  background-position: center center;\n}\n.rims::after {\n  content: \"\";\n  position: absolute;\n  width: calc(var(--size) * 0.8);\n  height: 100%;\n  top: calc(var(--size) * 0.05);\n  left: 50%;\n  transform: translateX(-50%);\n  background-image: var(--img);\n  background-size: cover;\n  background-repeat: no-repeat;\n  z-index: -1;\n  filter: blur(20px) opacity(70%);\n  transition: ease-in .5s;\n}\n.rims:hover::after {\n  filter: blur(0) opacity(0);\n  transition: ease-out .3s;\n}\u003C\/div\u003EWaduh kode bentrok dengan emoticon ~X( (Ctrl + U saja buat liat kode CSS-nya yaaa!!!)\nPenampakan jadi:\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"\/\/1.bp.blogspot.com\/-_u_SShyj4YU\/XwbyefDDSlI\/AAAAAAAAJDs\/swW8XbVQDDMMCBrSfGv7fgJG1xqnuWEfQCK4BGAsYHg\/s903\/Realistic%2BImage%2BShadows.png\" class=\"lightbox_img\"\u003E\u003Cimg alt=\"Realistic Image Shadows\" data-original-height=\"310\" data-original-width=\"903\" src=\"\/\/1.bp.blogspot.com\/-_u_SShyj4YU\/XwbyefDDSlI\/AAAAAAAAJDs\/swW8XbVQDDMMCBrSfGv7fgJG1xqnuWEfQCK4BGAsYHg\/s320\/Realistic%2BImage%2BShadows.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbig\u003EBONUS\u003C\/big\u003E:\u003Cdiv style='text-align:center'\u003E\u003Cu onClick=\"window.open('\/\/codepen.io\/ekrof\/pen\/YqmXdQ');\"\u003ECSS Only Playground\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/aniketkudale\/pen\/xxZwoOZ');\"\u003EColorful Bubbles\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/douglasmofet\/pen\/gOPaory');\"\u003ECard pseudo-element hover\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/lonekorean\/pen\/QWyjaeg');\"\u003EOverlapping Sushi Cards\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/lonekorean\/pen\/vYLNdBY');\"\u003EFading Modal\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/lonekorean\/pen\/wvKdjyZ');\"\u003ESelect All... Then Select Some\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/lonekorean\/pen\/KKVdQPX');\"\u003EPulsating Marble\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/lonekorean\/pen\/JjGYpPx');\"\u003EThat Chicken Nugget\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/ig_design\/pen\/vYLGMdr');\"\u003EContent filter v2\u003C\/u\u003E - pure css - \u003Cu onClick=\"window.open('\/\/codepen.io\/ig_design\/pen\/MWKyXJv');\"\u003EPhotography page concept\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/nikkk-me\/pen\/abvPjeG');\"\u003EAnimated CSS Switch Button\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/alphardex\/pen\/NWxNyXb');\"\u003EFullscreen Menu Enter\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/Anna_Batura\/pen\/qBbaXBd');\"\u003EMenu css\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/cchana\/pen\/xxwgLgY');\"\u003EPure CSS Slideshow\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/atulcodex\/pen\/dyGPOVv');\"\u003EAnimated Buttons\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/jh3y\/pen\/XWmvwYg');\"\u003Eborder-radius playground\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/team\/keyframers\/pen\/YzwGZwN');\"\u003EContact Form Transitions with Radio Buttons\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/oguzhanagyar\/pen\/MWKbmBj');\"\u003ECreative Wave Button\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/chris22smith\/pen\/qBbqwEe');\"\u003ESimple Navigation System\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/bennettfeely\/pen\/oNbBaxB');\"\u003EFolding panorama animation\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/lynnandtonic\/pen\/PoZpjOr');\"\u003ECSS folded poster effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/equinusocio\/pen\/GRoOZjb');\"\u003EInput placeholder hint\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/thebabydino\/pen\/kzqpn');\"\u003EPure CSS wavy surface\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/chancesq\/pen\/GRovMQq');\"\u003EGlass\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/hisamikurita\/pen\/dyGzJdq');\"\u003EMask \u0026 Css Filter\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/batuhanbas\/pen\/rNxpMmN');\"\u003EStairs Dropdown\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/hunq-vu\/pen\/jgZaoy');\"\u003EKalimah Gradients\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/onion2k\/pen\/xxZYBVj');\"\u003ECSS Variables 3D Carousel\u003C\/u\u003E (No JS) - \u003Cu onClick=\"window.open('\/\/codepen.io\/batuhanbas\/pen\/zYrWrgG');\"\u003ECollapsible Dropdown\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/kathykato\/pen\/pogaOKG');\"\u003EClipped Image Reveal on Hover\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/ig_design\/pen\/XWXZaGb');\"\u003EPure CSS Menu\u003C\/u\u003E - #13 - \u003Cu onClick=\"window.open('\/\/codepen.io\/batuhanbas\/pen\/dyGJKJj');\"\u003EBookmark Dropdown\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/denic\/pen\/GRoOxbM');\"\u003ECSS Typing Effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/trevoreyre\/pen\/bRrrEx');\"\u003EFrosted glass card overlay\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/csshint.com\/css-image-effects\/');\"\u003E28+ CSS Image Effects\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/www.coding-dude.com\/wp\/css\/highlight-text-css\/');\"\u003E7 Cool CSS Highlight Text Effects\u003C\/u\u003E\u003C\/div\u003EHappy blogging :-bd\u003C\/div\u003E\u003Cdiv class=\"blogger-post-footer\"\u003E\u003Cb\u003EDapatkan artikel blog pilihan lainnya hanya di \u003Ca href='http:\/\/beben-koben.blogspot.com\/'\u003ETutorial Blog for Stylish Blogger\u003C\/a\u003E dan toolsnya juga di \u003Ca href='http:\/\/ben-tools.blogspot.com\/'\u003EBen-Tools\u003C\/a\u003E.\u003C\/b\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/beben-koben.blogspot.com\/feeds\/5668336155113323401\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"https:\/\/beben-koben.blogspot.com\/2020\/07\/make-shadow-effect-match-color-of-image.html#comment-form","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4918276818492892488\/posts\/default\/5668336155113323401"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4918276818492892488\/posts\/default\/5668336155113323401"},{"rel":"alternate","type":"text/html","href":"https:\/\/beben-koben.blogspot.com\/2020\/07\/make-shadow-effect-match-color-of-image.html","title":"Make the Shadow Effect Match the Color of the Image"}],"author":[{"name":{"$t":"Beben Koben"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/08754225607191914278"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"\/\/1.bp.blogspot.com\/-P_BulGL6XME\/Xwbr2F_9X3I\/AAAAAAAAJDQ\/LrLK1NdNy24MC0_MuzRl9AZt1k2fPXR4QCK4BGAsYHg\/s72-c\/Realistic%2Bshadows%2Bto%2Bimages.png","height":"72","width":"72"},"thr$total":{"$t":"0"},"georss$featurename":{"$t":"Bandung, Bandung City, West Java, Indonesia"},"georss$point":{"$t":"-6.9174639 107.6191228"},"georss$box":{"$t":"-35.227697736178847 72.4628728 21.392769936178844 142.7753728"}}});