// 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-3890561224817268083"},"published":{"$t":"2020-06-08T20:45:00.000+07:00"},"updated":{"$t":"2020-06-08T20:45:51.476+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":"Informasi"},{"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":"Tutorial"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Web"}],"title":{"type":"text","$t":"The Magic of CSS Code, It's Awesome"},"content":{"type":"html","$t":"\u003Cspan class=\"dropcaps\"\u003EK\u003C\/span\u003Eetika 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 \u003Cq\u003Esource link\u003C\/q\u003E dan melakukan sedikit utak-atik apa bisa dijadikan bahan postingan atau tidak ;)) Dua contoh hal yg membuat gue berdecak \u003Cstrike\u003Etowewewww\u003C\/strike\u003E creativity pure using CSS :-O \n\u003Cdiv style=\"margin: 10px auto; position: relative;\"\u003E\u003Cimg alt=\"Ben Evans on CodePen\" src=\"\/\/1.bp.blogspot.com\/-58tLocFOIpg\/Xt4wmWVWAvI\/AAAAAAAAJBM\/tisVi8R4HBcRhl-ng43snQxQl3RD3aWrACK4BGAsYHg\/s1184\" width=\"100%\" \/\u003E\u003Ca href=\"\/\/codepen.io\/ivorjetski\/pen\/gOPOvdB\" style=\"cursor: pointer; display: block; height: 11.4%; left: 1.8%; overflow: hidden; position: absolute; top: 34.4%; width: 30.2%; z-index: 5;\" title=\"3D First Person Art Gallery - No Javascript!\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ivorjetski\/pen\/gOOXbLP\" style=\"cursor: pointer; display: block; height: 11.1%; left: 35.3%; overflow: hidden; position: absolute; top: 34.4%; width: 30.3%; z-index: 5;\" title=\"Web Design - Hover, I dare you! - CSS Only\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ivorjetski\/pen\/xxGYWQG\" style=\"cursor: pointer; display: block; height: 9.5%; left: 68.7%; overflow: hidden; position: absolute; top: 36.8%; width: 30.5%; z-index: 5;\" title=\"Pure CSS Landscape - An Evening in Southwold\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ivorjetski\/pen\/jjyVEr\" style=\"cursor: pointer; display: block; height: 11.9%; left: 1.7%; overflow: hidden; position: absolute; top: 84.6%; width: 30.4%; z-index: 5;\" title=\"Animated Pure CSS Only Portrait - Isla\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ivorjetski\/pen\/xMJoYO\" style=\"cursor: pointer; display: block; height: 12.9%; left: 35.3%; overflow: hidden; position: absolute; top: 84.2%; width: 30.3%; z-index: 5;\" title=\"Pure CSS Still Life - Water and Lemons\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ivorjetski\/pen\/dBYWWZ\" style=\"cursor: pointer; display: block; height: 11.4%; left: 68.8%; overflow: hidden; position: absolute; top: 85%; width: 29.9%; z-index: 5;\" title=\"Pure CSS Only Portrait - Isla\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 10px auto; position: relative;\"\u003E\u003Cimg alt=\"diana-adrianne\" src=\"\/\/1.bp.blogspot.com\/-Nq4Fvp9NULk\/Xt4wm7WSr_I\/AAAAAAAAJBQ\/y6E8_egV2aIMOQPgqKSaiDqW6CJiNN7SwCK4BGAsYHg\/s1423\" width=\"100%\" \/\u003E\u003Ca href=\"\/\/github.com\/cyanharlow\/PureCSS-Font\" style=\"cursor: pointer; display: block; height: 27.4%; left: 33.9%; overflow: hidden; position: absolute; top: 53.4%; width: 14.7%; z-index: 5;\" title=\"PureCSS-Font\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/github.com\/cyanharlow\" style=\"cursor: pointer; display: block; height: 1.8%; left: 40.2%; overflow: hidden; position: absolute; top: 89.3%; width: 19.5%;\" title=\"Diana Smith on Github\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/github.com\/cyanharlow\/purecss-francine\" style=\"cursor: pointer; display: block; height: 27.1%; left: 51.6%; overflow: hidden; position: absolute; top: 53.7%; width: 14.7%;\" title=\"Pure CSS Francine\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/github.com\/cyanharlow\/purecss-vignes\" style=\"cursor: pointer; display: block; height: 26.9%; left: 16.2%; overflow: hidden; position: absolute; top: 53.9%; width: 14.8%;\" title=\"Pure CSS Vignes\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/github.com\/cyanharlow\/purecss-zigario\" style=\"cursor: pointer; display: block; height: 26.9%; left: 69.4%; overflow: hidden; position: absolute; top: 21.3%; width: 13.7%;\" title=\"Pure CSS Zigario\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/github.com\/cyanharlow\/purecss-pink\" style=\"cursor: pointer; display: block; height: 26.8%; left: 51.6%; overflow: hidden; position: absolute; top: 20.8%; width: 14.4%;\" title=\"Pure CSS Pink\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/github.com\/cyanharlow\/purecss-lace\" style=\"cursor: pointer; display: block; height: 27.3%; left: 33.9%; overflow: hidden; position: absolute; top: 20.5%; width: 14.8%;\" title=\"Pure CSS Lace\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/github.com\/cyanharlow\/purecss-gaze\" style=\"cursor: pointer; display: block; height: 27.1%; left: 16.4%; overflow: hidden; position: absolute; top: 20.7%; width: 14.3%;\" title=\"Pure CSS Gaze\"\u003E\u003C\/a\u003E\u003C\/div\u003EKadang 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 @-)\u003Cdiv class=\"fullpost\"\u003E\u003Cimg alt=\"display VS use CSS\" style=\"display: block;margin:5px auto\" src=\"\/\/1.bp.blogspot.com\/-k4xi_GYhcLw\/Xt40tTZvpaI\/AAAAAAAAJB0\/agcMpT8AKTgS4G2qdeoNBxYv9SYmB7H0QCK4BGAsYHg\/s320\"\/\u003E\u003Cdiv class=\"codeview\" title=\"CSS Code\"\u003E.compare {\n  display: flex;\n  align-items: center;\n  margin: 5px auto;\n  width: 100%;\n  height: 250px;\n  padding: 10px;\n  color: #31808c;\n  overflow: hidden;\n  background-color: #dbe0e4;\n  text-align: center;\n  font: 1.05rem\/1 \u0026#39;Rubik\u0026#39;, sans-serif;\n  box-sizing: border-box;\n}\n.toggle-column {\n  flex: 1;\n}\n.toggle-column img {\n  width: 65%;\n  max-height: 55vh;\n  object-fit: contain;\n}\np {\n  text-align: left;\n}\n.vs-column {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.vs-column::before, .vs-column::after {\n  content: \u0026#39;\u0026#39;;\n  flex: 1;\n  align-self: center;\n  border-left: 2px dashed #c9baa7;\n}\n.vs {\n  width: 50px;\n  height: 50px;\n  margin: 20px 10px;\n  border-radius: 50%;\n  color: #f5f4ef;\n  font-size: 1.5rem;\n  line-height: 50px;\n  background-color: #c9baa7;\n}\u003C\/div\u003E\n\n\u003Cpre lang=\"Planing HTML\"\u003E\u003Ccodec\u003E\u0026lt;div class=\u0026quot;compare\u0026quot;\u0026gt;\n\u0026lt;div class=\u0026quot;toggle-column\u0026quot;\u0026gt;\n  \u0026lt;img src=\u0026quot;PATH_IMG\u0026quot; \/\u0026gt;\n\u0026lt;\/div\u0026gt;\n\u0026lt;div class=\u0026quot;vs-column\u0026quot;\u0026gt;\n  \u0026lt;div class=\u0026quot;vs\u0026quot;\u0026gt;vs\u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\n\u0026lt;div class=\u0026quot;toggle-column\u0026quot;\u0026gt;\n\u0026lt;p\u0026gt;BLAH-BLEH-BLOH\u0026lt;\/p\u0026gt;\n\u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/codec\u003E\u003C\/pre\u003E\nSilahkan 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 :)\u003E- \u003Cp\u003E\u003Cb\u003E\u003Cbig\u003EBON US\u003C\/big\u003E\u003C\/b\u003E\u003C\/p\u003E\u003Cp align=\"center\"\u003E\u003Cu onClick=\"window.open('\/\/codepen.io\/davidjsealey\/pen\/dyYPQLR');\"\u003EHover with Clip-Path Effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/havardob\/pen\/ExVaELV');\"\u003ESliding tabs | CSS transitions only\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/kylewetton\/pen\/yLYYrry');\"\u003EImage Compare Viewer\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/fgeierst\/pen\/eYpzXBg');\"\u003ECSS Speech Bubble\u003C\/u\u003E (svg data uri) - \u003Cu onClick=\"window.open('\/\/codepen.io\/Madalena-Design\/pen\/KKdmyGb');\"\u003EHoliday Feature Folding Cards\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/lisilinhart\/pen\/JjYKeVm');\"\u003EExpand Information\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/MananTank\/pen\/LYpRddm');\"\u003ENOISY IMAGE GRID\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/melnik909\/pen\/vYNXzaO');\"\u003EImage Hovers\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/Mestika\/pen\/vYNXbdm');\"\u003ECard Reveal\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/NoahDelagardelle\/pen\/vYNgEVo');\"\u003ECPC - Image hover\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/shailaO07\/pen\/ExVNwYr');\"\u003EShifting Image on Hover\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/shailaO07\/pen\/YzyGaWL');\"\u003EImage Magnifier Glass on Hover\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/aybukeceylan\/pen\/vYNgLdw');\"\u003ECSS Image Hover Effects\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/HighFlyer\/pen\/yLYMzQE');\"\u003ERandom Picker\u003C\/u\u003E (Image Hover) - \u003Cu onClick=\"window.open('\/\/codepen.io\/CameronFitzwilliam\/pen\/vYNgbPX');\"\u003EExtreme Hover\u003C\/u\u003E - HTML + CSS - \u003Cu onClick=\"window.open('\/\/codepen.io\/hexagoncircle\/pen\/PoPpKKg');\"\u003ECSS Clip-Path Hover Effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/co0kie\/pen\/YzyZBqb');\"\u003ECustom Search\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/AnkitNavrang\/pen\/oNjZJJM');\"\u003ETGMT - Morse\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/Lubna\/pen\/MWapdjE');\"\u003ECSS Image Gallery\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/lonekorean\/pen\/WNQjJMV');\"\u003EDeclaring Bits of Unselectable Text\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/AbubakerSaeed\/pen\/qBOjZqK');\"\u003ECSS Image Hover Effects\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/ivorjetski\/pen\/jObwWYj');\"\u003EVery Simple Pure CSS Carousel\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/denic\/pen\/ZEbKgPp');\"\u003ECSS-only modal\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/jh3y\/pen\/YzyNpWP');\"\u003ECSS variable image zoom\u003C\/u\u003E 🔍😅 - \u003Cu onClick=\"window.open('\/\/codepen.io\/lonekorean\/pen\/wvKdjyZ');\"\u003ESelect All...\u003C\/u\u003E Then Select Some - \u003Cu onClick=\"window.open('\/\/codepen.io\/ycw\/pen\/GRpENEb');\"\u003EA Pen by ycw\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/jh3y\/pen\/GRpMZZG');\"\u003EPure CSS \"Authentication\"\u003C\/u\u003E 😅🔒 - \u003Cu onClick=\"window.open('\/\/codepen.io\/pure-css\/pen\/bddggP');\"\u003EPure-CSS Tooltips\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/ivorjetski\/pen\/JjYOvvP');\"\u003EA Very Simple Pure CSS 3D Room\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/markhillard\/pen\/OJJJNam');\"\u003Epx2rem\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/mattsince87\/pen\/VwvQRez');\"\u003ECSS Only, Content Overflow Shadows\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/Shay_Reichert\/pen\/abvGmBy');\"\u003EButton Neon\u003C\/u\u003E (: hover fx) - \u003Cu onClick=\"window.open('\/\/codepen.io\/chancesq\/pen\/zYvLWMV');\"\u003EBorder Buttons\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/TKS31\/pen\/abvRWpp');\"\u003ESocial Media Buttons Hover Effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/bourhaouta\/pen\/LYpoodq');\"\u003EPure CSS navigation toggle animation\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/jorgemoovein-the-bashful\/pen\/rNOXXxb');\"\u003EMovie Ticket Animation\u003C\/u\u003E - Loop 23 - \u003Cu onClick=\"window.open('\/\/codepen.io\/chancesq\/pen\/abdoqrE');\"\u003EGradient border\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/dev_loop\/pen\/MWKYoGJ');\"\u003EButton Hover\u003C\/u\u003E\u003C\/p\u003EKeder euy mosting pake editor blog baru #-o mau upload gambar saja jadi ribet :))\u003Cp\u003EHappy blogging lah \\m\/\u003C\/p\u003E\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\/3890561224817268083\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"https:\/\/beben-koben.blogspot.com\/2020\/06\/the-magic-of-css-code-its-awesome.html#comment-form","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4918276818492892488\/posts\/default\/3890561224817268083"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4918276818492892488\/posts\/default\/3890561224817268083"},{"rel":"alternate","type":"text/html","href":"https:\/\/beben-koben.blogspot.com\/2020\/06\/the-magic-of-css-code-its-awesome.html","title":"The Magic of CSS Code, It's Awesome"}],"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\/-58tLocFOIpg\/Xt4wmWVWAvI\/AAAAAAAAJBM\/tisVi8R4HBcRhl-ng43snQxQl3RD3aWrACK4BGAsYHg\/s72-c\/s1184","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"}}});