// 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-2083015923451718119"},"published":{"$t":"2020-04-09T16:45:00.000+07:00"},"updated":{"$t":"2020-04-09T16:45:20.304+07:00"},"category":[{"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":"HTML"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Snippet"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trik dan Tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Web"}],"title":{"type":"text","$t":"Zwei coole CSS Tricks von Dr. Robin"},"content":{"type":"html","$t":"\u003Cspan class=\"dropcaps\"\u003EB\u003C\/span\u003Eerawal dari mencari itu, tetapi malah mendapatkan ini! Mungkin hanya saya saja yang tahu ini-itu apaan ;)) Memulai niat akan melakukan posting jika mendapatkan sesuatu yg unik, aneh, dan berbeda serta tidak melupakan faktor pentingnya yaitu mudah dalam pemakaian :D\u003Cbr \/\u003E\n\u003Cspan id='hiji'\u003EPertama gue mendapatkan ini\u003C\/span\u003E \u003Cu onClick=\"window.open('\/\/codepen.io\/seyedi\/pen\/bGdMpmd');\"\u003Ecolorful shadows\u003C\/u\u003E! WOW, ternyata ada trik bagaimana cara membuat bayangan (shadows) untuk gambar, seolah-olah bayangannya itu mengikuti warna yg ada pada gambar. Gimana penjelasan sedepnya ya!\u003Cp\u003ESobat mungkin sudah melihat dan tidak aneh membuat bayang, namun bayangan yg dihasilkan hanya terbatas pada satu warna saja toh? Dengan trik sederhana sekarang kita bisa membuat bayangan dengan warna mengikuti dari gambar asli.\u003Ca href=\"\/\/1.bp.blogspot.com\/-zPx21HxXV4A\/Xo2140RuIXI\/AAAAAAAAI_M\/kavrbexZt8UJPiqqJ3kiw8yJi93UU_ZPQCLcBGAsYHQ\/s1600\/colorful-shadows.jpg\" class=\"lightbox_img\"\u003E\u003Cimg alt=\"colorful-shadows\" src=\"https:\/\/1.bp.blogspot.com\/-zPx21HxXV4A\/Xo2140RuIXI\/AAAAAAAAI_M\/kavrbexZt8UJPiqqJ3kiw8yJi93UU_ZPQCLcBGAsYHQ\/s320\/\" width=\"320\" height=\"182\" style=\"margin:10px auto;display:block;box-shadow:0 0 15px #FFF;\" \/\u003E\u003C\/a\u003EBeberapa hal yg mesti diperhatikan jika sobat menginginkan trik ini masuk ke blog kalian:\u003Cul class='fuck'\u003E\u003Cli\u003EBrowser sudah support CSS3 \u003Cem\u003Etransform \u0026 filter\u003C\/em\u003E\u003C\/li\u003E\u003Cli\u003ETrick ini akan menggunakan 2 tags image!\u003C\/li\u003EJadi bagi kalian para blogger yg mempertimbangkan loading dalam pemuatan, harap diperhatikan ;)\u003Cli\u003ENiat \u0026 keinginan dalam penerapan ke dalam template :D\u003C\/li\u003E\u003C\/ul\u003E\u003Cpre lang=\"Code CSS Colorful Shadows\"\u003E\u003Ccodec\u003E.colors_shadows {\n  position: relative;\n  padding: 0;\n  width: 500px;\n  max-width: 90vw;\n  margin: 25px auto;\n}\n.\u003Cblue\u003Elight-shadow\u003C\/blue\u003E {\n  transform: translate3d(0,0,0);\n  filter: blur(5px) brightness(1.1) saturate(1);\n}\n.\u003Cgreen\u003Elarge-shadow\u003C\/green\u003E {\n  transform: translate3d(0,5px,0);\n  filter: blur(15px) brightness(1) saturate(1);\n}\n.colors_shadows::after, .large-shadow, .light-shadow {\n  content: \u0026#39;\u0026#39;;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: -1;\n  background-size: 100% 100%;\n  filter: blur(15px) saturate(2);\n}\n.colors_shadows img {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: 5px;\n}\u003C\/codec\u003E\u003C\/pre\u003E\u003Cdiv class=\"fullpost\"\u003E\u003Cpre lang=\"Planing Syntax HTML\"\u003E\u003Ccodec\u003E\u0026lt;div class=\u0026quot;colors_shadows\u0026quot;\u0026gt;\n \u0026lt;img src=\u0026quot;URL-IMAGE\u0026quot; alt=\u0026quot;\u0026quot; \/\u0026gt;\n \u0026lt;img src=\u0026quot;URL-IMAGE\u0026quot; class=\u0026quot;\u003Cred\u003Elarge-shadow\u003C\/red\u003E\u0026quot; alt=\u0026quot;\u0026quot; \/\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/codec\u003E\u003C\/pre\u003EGue sudah buat 2 biji efek filter \u003Cem\u003Elight-shadow\u003C\/em\u003E and \u003Cem\u003Elarge-shadow\u003C\/em\u003E Kalian tinggal panggil salah satu atau mau dipakai dua²nya (class=\u0026quot;\u003Cred\u003Elarge-shadow\u003C\/red\u003E\u0026quot; or class=\u0026quot;\u003Cred\u003Elight-shadow\u003C\/red\u003E\u0026quot;) Kreasikan juga dengan menambahkan kode CSS ke dalam property declaration.\u003Cp\u003EMasih ingat dengan hal diatas \u003Ca href=\"#top\"\u003EPertama gue mendapatkan ini\u003C\/a\u003E..., sebagai bloglang gue telusuri dari mana sumbernya. Ternyata mentok ke \u003Cu onClick=\"window.open('\/\/github.com\/robinloeffel\/cosha');\" title=\"Colorful shadows for your images\"\u003Ecosha\u003C\/u\u003E. Silah kunjungi halaman tsb jika ingin memakai versi script dan tentunya memakai \u003Ci\u003Eshiny new picture tag\u003C\/i\u003E :P\u003Cbr \/\u003E\nPetualangan masih berlanjut, aku satroni \u003Cq\u003Eweb\u003C\/q\u003E empunya guys dgn alamat http:\/\/robinloeffel.ch\/ We..ee...eee ternyata disana ada hal sedikit berbeda dengan trik diatas? Gue nemuin gambar ditutupi dengan warna bergaya gradient sebagai pelapisnya (\u003Cstrike\u003Ekue kelezzz lapis\u003C\/strike\u003E) :))\u003Cp\u003EKetika melakukan hover\/sorot ke gambar, maka akan sirna gradient background and title as protector!\u003Ca href=\"\/\/3.bp.blogspot.com\/-TuHfP3QUjWE\/Xo7kTugGvgI\/AAAAAAAAI_Y\/48XainMpEjYfI_qM9PO1zVnU8jxW2aHPQCLcBGAsYHQ\/s1600\/Project-link.png\" class=\"lightbox_img\"\u003E\u003Cimg alt=\"Project-link\" src=\"\/\/3.bp.blogspot.com\/-TuHfP3QUjWE\/Xo7kTugGvgI\/AAAAAAAAI_Y\/48XainMpEjYfI_qM9PO1zVnU8jxW2aHPQCLcBGAsYHQ\/s320\/\" width=\"410\" height=\"175\" style=\"margin:5px auto;display:block;box-shadow:0 0 15px #FFF;\" \/\u003E\u003C\/a\u003EAslinya memakai script dengan berbagai embel-embel keren lain yg dibawanya. Gue hidupkan developer tools browser, dan mulai beraksi comot sana-sini dan diperoleh...\u003Cpre lang=\"Bumbu CSS\"\u003E\u003Ccodec\u003E.robin_title {\n font-size: 202%;\n position: absolute;\n text-align: center;\n transition: opacity .5s ease-in-out;\n}\n.robin_image {\n z-index: -1;\n object-fit: cover;\n object-position: center;\n}\n.robin_image,.robin_link {\n padding: 0;\n height: auto;\n width: 500px;\n max-width: 100%;\n margin: 0 auto;\n position: relative;\n}\n.robin_link {\n z-index: 1;\n display: flex;\n color: white;\n overflow: hidden;\n border-radius: 15px;\n align-items: center;\n text-decoration: none;\n justify-content: center;\n transition: transform .5s ease-in-out;\n}\n.robin_link:after {\n content: \u0026quot;\u0026quot;;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n border-radius: inherit;\n box-sizing: border-box;\n background-color: #444;\n transition: opacity .5s ease-in-out;\n}\n.robin_link.\u003Cred\u003Epengki\u003C\/red\u003E:after {\n background: linear-gradient(180deg,rgba(58,28,113,.5),rgba(253,187,45,.5));\n}\n.robin_link.\u003Cyellow\u003Epingki\u003C\/yellow\u003E:after {\n background: linear-gradient(90deg,rgba(255,0,132,.5),rgba(255,255,255,.5));\n}\n.robin_link:hover {\n transform: scale(1.05);\n}\n.robin_link:hover .robin_title,.robin_link:hover:after {\n opacity: 0;\n}\u003C\/codec\u003E\u003C\/pre\u003E\u003Cpre lang=\"Plan Tag HTML\"\u003E\u003Ccodec\u003E\u0026lt;a class=\u0026quot;robin_link pingki\u0026quot; href=\u0026quot;LINK-TUJUAN\u0026quot; title=\u0026quot;\u0026quot;\u0026gt;\n \u0026lt;h2 class=\u0026quot;robin_title\u0026quot;\u0026gt;PINGKI\u0026lt;\/h2\u0026gt;\n \u0026lt;img class=\u0026quot;robin_image\u0026quot; src=\u0026quot;URL-IMAGE\u0026quot; alt=\u0026quot;\u0026quot;\/\u0026gt;\n\u0026lt;\/a\u0026gt;\u003C\/codec\u003E\u003C\/pre\u003EGue sudah buat 2 biji efek linear \u003Cem\u003Epengki\u003C\/em\u003E dan \u003Cem\u003Epingki\u003C\/em\u003E Kalian tinggal panggil salah satu atau mau dipakai dua²nya (class=\u0026quot;\u003Cred\u003Erobin_link \u003Cb\u003Epingki\u003C\/b\u003E\u003C\/red\u003E\u0026quot; or class=\u0026quot;\u003Cred\u003Erobin_link \u003Cb\u003Epengki\u003C\/b\u003E\u003C\/red\u003E\u0026quot;) Kreasikan juga dengan menambahkan kode CSS ke dalam property declaration. Biar lebih full stylish :-)\u003Cbr \/\u003E\nNB:\u003Cp class='warning'\u003ESaya hanya seorang blogger dengan guru bernama \u003Cred\u003EONE\u003C\/red\u003E (\u003Cred\u003EO\u003C\/red\u003Etodidak \u003Cred\u003ENE\u003C\/red\u003Ekat). Harap maklum jika ada kesalahan dalam aturan pengkodean. Koreksi dan benarkan menurut aturan oleh kalian ya :)\u003C\/p\u003EBONUS:\u003Cp align='center'\u003E\u003Cu onClick=\"window.open('\/\/codepen.io\/lostBoyFromNeverland\/pen\/qBdbemQ');\"\u003EButton Effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/aneeket\/pen\/ExjKGJe');\"\u003E3D Editable Text Effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/mtsgeneroso\/pen\/mdJRpxX');\"\u003ERainbow Effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/GreenSock\/pen\/zYGwvRa');\"\u003EAnimate feTurbulence Filter\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/janxalot\/pen\/MWwaNzB');\"\u003ETurbulence\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/Bathansneard\/pen\/JjdNKMe');\"\u003EColor:\u003C\/u\u003E Your name as a color - \u003Cu onClick=\"window.open('\/\/codepen.io\/vastrideside\/pen\/ExjyYoz');\"\u003EPassword generator\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/mrReiha\/pen\/RwPgLeM');\"\u003ECard hover FX\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/uiswarup\/pen\/NWqvVdy');\"\u003EWave Text\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/FlorinCornea\/pen\/KKpvRYo');\"\u003Edashed border icon animations\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/matuzo\/pen\/yLNpKWm');\"\u003ENative smooth scrolling\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/tutsplus\/pen\/WNvdojp');\"\u003EHow to Build a Simple Full-Screen Slideshow With Vanilla JavaScript\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/flesler\/pen\/AEIFc');\"\u003EPlaceholder support for contentEditable elements\u003C\/u\u003E, without JavaScript - \u003Cu onClick=\"window.open('\/\/codepen.io\/Lilykhan\/pen\/qBdxXoP');\"\u003EUseful Broken Images\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/fossheim\/pen\/LYVOBRZ');\"\u003EStacked rainbow cards\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/nakome\/pen\/ExjEqoV');\"\u003EExtract colors from Image\u003C\/u\u003E (React) - \u003Cu onClick=\"window.open('\/\/codepen.io\/aniketkudale\/pen\/BaNxomQ');\"\u003ENeumorphic Color Palette\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/brianhaferkamp\/pen\/ZEGoRoB');\"\u003EDigital Bookshelf\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/TharenaMelishka\/pen\/abOYVLx');\"\u003EParallax Horizontal Image Scroller\u003C\/u\u003E -- No JS! - \u003Cu onClick=\"window.open('\/\/codepen.io\/yoksel\/pen\/bGdKbWJ');\"\u003EGlass Effect with CSS Masks\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/MananTank\/pen\/qBdyZXR');\"\u003EExciting Multi-line Highlights\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/Mamboleoo\/pen\/JjdXPgR');\"\u003EButtons popper\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/codepo8\/pen\/gOpjZmr');\"\u003EAdding an image to a document\u003C\/u\u003E... - \u003Cu onClick=\"window.open('\/\/codepen.io\/chriscoyier\/pen\/rLXJzO');\"\u003ETucked Corners\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/heiko_de\/pen\/XWboMjN');\"\u003EAppleTV 3D Parallax Cards\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/sledsworth\/pen\/EqvgNy');\"\u003EDynamic Active Table of Contents\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/dev_loop\/pen\/PoqLGvV');\"\u003ECard Hover Interaction\u003C\/u\u003E | HTML \u0026 CSS - \u003Cu onClick=\"window.open('\/\/codepen.io\/cassie-codes\/pen\/rGqwwz');\"\u003EGoldsmiths Uni - glitch\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/milanraring\/pen\/qBdVwOP');\"\u003ESearch animation\u003C\/u\u003E - Only CSS - \u003Cu onClick=\"window.open('\/\/codepen.io\/jpamental\/pen\/PoqgdyR');\"\u003EMasked \u0026 Skewed\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/designcouch\/pen\/dyYbwYq');\"\u003EWebsite Hero\u003C\/u\u003E\u003C\/p\u003ESalam COVID-19 bin corona :-\u0026\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\/2083015923451718119\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"https:\/\/beben-koben.blogspot.com\/2020\/04\/zwei-coole-css-tricks-von-dr-robin.html#comment-form","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4918276818492892488\/posts\/default\/2083015923451718119"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4918276818492892488\/posts\/default\/2083015923451718119"},{"rel":"alternate","type":"text/html","href":"https:\/\/beben-koben.blogspot.com\/2020\/04\/zwei-coole-css-tricks-von-dr-robin.html","title":"Zwei coole CSS Tricks von Dr. Robin"}],"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":"https:\/\/1.bp.blogspot.com\/-zPx21HxXV4A\/Xo2140RuIXI\/AAAAAAAAI_M\/kavrbexZt8UJPiqqJ3kiw8yJi93UU_ZPQCLcBGAsYHQ\/s72-c\/","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":"-7.0435724 107.4577613 -6.7913554000000005 107.7804843"}}});