// 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-6317570398859479771"},"published":{"$t":"2020-09-07T20:43:00.001+07:00"},"updated":{"$t":"2020-09-07T20:43:39.856+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":"Resource"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial"}],"title":{"type":"text","$t":"CSS Only Playground by ekrof"},"content":{"type":"html","$t":"\u003Cspan class=\"dropcaps\"\u003ES\u003C\/span\u003Ealah satu kebiasaan gue dalam aktifitas memosting yaitu suka memberikan \u003Cb\u003E\u003Ca href=\"\/\/1.bp.blogspot.com\/-DS6rePAOPCw\/X1YeHgfvqxI\/AAAAAAAAJFY\/DUr5jrR2sIEuZmFv1ixdXyyEkHe7m-FCQCLcBGAsYHQ\/\" class=\"lightbox_img\" title=\"Make the Shadow Effect Match the Color of the Image\"\u003EBONUS\u003C\/a\u003E\u003C\/b\u003E links dari web² pilihan! Kebanyakan dari web codepen.io :D Sekiranya ada yang menarik bagi kalian setelah mengunjungi, cobalah untuk masuk ke halaman dashboard si empunya! Kreator yg punya kreasi keren biasanya selalu tersimpan di sana ;)\u003Cp\u003ESeperti yg satu ini \u003Ci\u003Eekrof\u003C\/i\u003E on CodePen:\u003Cp\u003E\u003Cdiv style=\"position:relative\"\u003E\u003Cimg alt=\"ekrof on CodePen\" src=\"\/\/1.bp.blogspot.com\/-Egn4eXhxLWE\/X1Ye98uLMxI\/AAAAAAAAJFg\/4pJTTXMTqXgzWT59lW5p0OnHzaJDYBEqACLcBGAsYHQ\/\" width=\"100%\"\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/dXRZgR\" title=\"Accordion neu\" style=\"width:58.3%; height:3.8%; left:0.1%; top:9.2%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/akWNLG\" title=\"CSS Loader\" style=\"width:58.6%; height:3.9%; left:0.1%; top:14.2%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/gMmGLY\" title=\"Search input\" style=\"width:58.5%; height:3.9%; left:0.1%; top:18.9%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/PzpjeO\" title=\"Responsive iframe\" style=\"width:58.1%; height:4.3%; left:0.2%; top:23.7%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/dXvWqx\" title=\"Star Rating - CSS Only\" style=\"width:58.2%; height:3.7%; left:0.1%; top:28.7%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/JKWWxp\" title=\"Vertical centering (flex + table-cell)\" style=\"width:58.2%; height:4.0%; left:0.1%; top:33.0%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/aZJdME\" title=\"Float grid (fluid, responsive)\" style=\"width:58.1%; height:3.9%; left:0.1%; top:37.9%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/jrBWXW\" title=\"Inline-block grid (fixed, centered)\" style=\"width:58.3%; height:4.0%; left:0.1%; top:42.7%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/YWZyJQ\" title=\"Fixed sidebar, fluid content\" style=\"width:58.2%; height:4.0%; left:0.1%; top:47.3%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/YWNWax\" title=\"Step Tabs - CSS Only\" style=\"width:58.5%; height:4.7%; left:0.1%; top:51.7%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/wWGOqv\" title=\"Expandable paragraph (CSS Only, JS optional)\" style=\"width:58.4%; height:4.6%; left:0.1%; top:56.7%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/zBOMNG\" title=\"Dropdown - CSS Only\" style=\"width:58.2%; height:4.0%; left:0.2%; top:61.8%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/VaoYyJ\" title=\"Tooltips - CSS Only (JS optional)\" style=\"width:58.5%; height:4.4%; left:0.1%; top:71.1%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/yOWWxB\" title=\"Carousel - CSS Only (JS optional)\" style=\"width:58.4%; height:4.3%; left:0.1%; top:75.9%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/dMEZvq\" title=\"Tabs - CSS Only (JS optional)\" style=\"width:58.4%; height:4.6%; left:0.1%; top:80.5%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/ONYbOo\" title=\"Accordion - CSS Only (JS optional)\" style=\"width:58.7%; height:4.5%; left:0.1%; top:85.5%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/gryEJP\" title=\"Mobile Sidenav - CSS Only\" style=\"width:58.5%; height:3.9%; left:0.3%; top:90.6%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/yOrPwv\" title=\"Modal Dialog - CSS Only (JS optional)\" style=\"width:58.7%; height:3.9%; left:0.1%; top:95.3%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/ben-tools.blogspot.com\/\" title=\"Tools for Blogger\" style=\"width:58.4%; height:4.2%; left:0.1%; top:4.4%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003Ca href=\"\/\/codepen.io\/ekrof\/pen\/YqmXdQ\" title=\"CSS Only Playground\" style=\"width:58.4%; height:4.2%; left:0.1%; top:66.3%; position:absolute; cursor:pointer; display:block; z-index:5; overflow:hidden;\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cp\u003ESecara terpisah gue akan membongkar CSS Only Playground by \u003Ci\u003Eekrof\u003C\/i\u003E.\u003Cdiv class=\"fullpost\"\u003E\u003Ch3\u003EMobile Sidenav - CSS Only\u003C\/h3\u003E\u003Ca class=\"lightbox_img\" href=\"\/\/1.bp.blogspot.com\/-mhTqBFXrbWE\/X1Yz0yrgveI\/AAAAAAAAJFs\/0xkgp-E11RIq1kbvbq2n8_d26KlzP7zqgCLcBGAsYHQ\/s1438\/Mobile-Sidenav.png\" style=\"display: block; padding: 1em 0; text-align: center;\"\u003E\u003Cimg alt=\"Mobile-Sidenav\" width=\"320\" data-original-height=\"375\" data-original-width=\"1438\" src=\"\/\/1.bp.blogspot.com\/-mhTqBFXrbWE\/X1Yz0yrgveI\/AAAAAAAAJFs\/0xkgp-E11RIq1kbvbq2n8_d26KlzP7zqgCLcBGAsYHQ\/s320\/Mobile-Sidenav.png\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"codeview\" title=\"Kode CSS nav-mobile\"\u003E.nav-mobile {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 65px;\n  background: #181818;\n  color: #FFF;\n  padding: 0;\n  margin: 0;\n  cursor: auto;\n  font-size: 18px;\n  list-style-type: none;\n  z-index: 999999;\n  box-shadow: 0 5px 5px -5px #333;\n}\n.nav-mobile:after {\n  content: \u0026quot;\u0026quot;;\n  display: table;\n  clear: both;\n}\n.nav-mobile svg {\n  height: 45px;\n  width: 65px;\n}\n.nav-mobile svg path {\n  fill: #fff;\n}\n.nav-mobile svg.icon-close {\n  display: none;\n}\n.nav-mobile li {\n  width: 100%;\n  height: 45px;\n  line-height: 46px;\n  text-align: center;\n  float: left;\n}\n.nav-mobile li a {\n  display: block;\n  color: #333;\n  width: 100%;\n  height: 100%;\n  text-decoration: none;\n}\n.nav-mobile .menu-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  cursor: pointer;\n  display: block;\n}\n.nav-mobile .menu-button:after {\n  opacity: 0;\n  top: 45px;\n  content: \u0026quot;\u0026quot;;\n  width: 100vw;\n  display: block;\n  position: fixed;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  content: \u0026quot;\u0026quot;;\n  z-index: 9;\n  pointer-events: none;\n  transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);\n  transition-delay: 0.1s;\n}\n.nav-mobile #menu-toggle {\n  display: none;\n}\n.nav-mobile #menu-toggle.active ~ .menu-button .icon-close, .nav-mobile #menu-toggle:checked ~ .menu-button .icon-close {\n  display: block;\n}\n.nav-mobile #menu-toggle.active ~ .menu-button .icon-open, .nav-mobile #menu-toggle:checked ~ .menu-button .icon-open {\n  display: none;\n}\n.nav-mobile #menu-toggle.active ~ .menu-button:after, .nav-mobile #menu-toggle:checked ~ .menu-button:after {\n  opacity: 1;\n  pointer-events: auto;\n  transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);\n}\n.nav-mobile #menu-toggle.active ~ .menu-sidebar, .nav-mobile #menu-toggle:checked ~ .menu-sidebar {\n  transform: translateX(0);\n  transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);\n}\n.nav-mobile .menu-container {\n  width: 65px;\n  float: left;\n  cursor: auto;\n  position: absolute;\n}\n.nav-mobile .menu-container .menu-sidebar {\n  box-shadow: 5px 0 5px -5px #333;\n  display: block;\n  width: 65vw;\n  bottom: 0;\n  background: white;\n  color: #333;\n  position: fixed;\n  z-index: 9999999;\n  transform: translateX(-420px);\n  transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);\n  top: 45px;\n  list-style-type: none;\n  padding: 0;\n  max-width: 400px;\n}\n.nav-mobile .menu-container .menu-sidebar .arrow {\n  position: absolute;\n  line-height: 50px;\n  font-size: 32px;\n  color: #f00;\n  top: 0;\n  z-index: 0;\n}\n.nav-mobile .menu-container .menu-sidebar .arrow.left {\n  left: 20px;\n}\n.nav-mobile .menu-container .menu-sidebar .arrow.right {\n  right: 20px;\n}\n.nav-mobile .menu-container .menu-sidebar li {\n  height: 55px;\n  line-height: 55px;\n  font-size: 16px;\n  text-align: left;\n  position: relative;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  padding-left: 20px;\n  max-width: 380px;\n}\n.nav-mobile .menu-container .menu-sidebar li:hover {\n  background: #eee;\n}\n.nav-mobile .menu-container .menu-sidebar li .menu-sub {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 0;\n  overflow: hidden;\n  background: white;\n  visibility: hidden;\n  transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);\n  border-left: 1px solid #ccc;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  z-index: 2;\n  max-width: 400px;\n}\n.nav-mobile .menu-container .menu-sidebar li .menu-sub li {\n  overflow: hidden;\n}\n.nav-mobile .menu-container .menu-sidebar li .menu-sub .menu-sub-title {\n  padding-left: 40px;\n}\n.nav-mobile .menu-container .menu-sidebar li .submenu-label {\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.nav-mobile .menu-container .menu-sidebar li .submenu-toggle {\n  display: none;\n}\n.nav-mobile .menu-container .menu-sidebar li .submenu-toggle.active ~ .menu-sub, .nav-mobile .menu-container .menu-sidebar li .submenu-toggle:checked ~ .menu-sub {\n  width: 65vw;\n  visibility: visible;\n  z-index: 1;\n  transition: width 0.35s cubic-bezier(0, 0, 0.3, 1);\n}\u003C\/div\u003E\u003Cp\u003E\u003Cdiv class=\"code\" title=\"Planing HTML\"\u003E\u0026lt;ul class=\u0026quot;nav-mobile check\u0026quot;\u0026gt;\n  \u0026lt;li\u0026gt;\u0026lt;\/li\u0026gt;        \n  \u0026lt;li class=\u0026quot;menu-container\u0026quot;\u0026gt; \n    \u0026lt;input id=\u0026quot;menu-toggle\u0026quot; type=\u0026quot;checkbox\u0026quot;\u0026gt;\n    \u0026lt;label for=\u0026quot;menu-toggle\u0026quot; class=\u0026quot;menu-button\u0026quot;\u0026gt;  \n      \u0026lt;svg class=\u0026quot;icon-open\u0026quot; viewBox=\u0026quot;0 0 24 24\u0026quot;\u0026gt;\u0026lt;path d=\u0026quot;M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\u0026quot;\u0026gt;\u0026lt;\/path\u0026gt;\u0026lt;\/svg\u0026gt;\n\t  \u0026lt;svg class=\u0026quot;icon-close\u0026quot; viewBox=\u0026quot;0 0 100 100\u0026quot;\u0026gt;\u0026lt;path d=\u0026quot;M83 88c-2 2-6 2-8 0L54 66c-2-2-6-2-8 0l-22 22c-2 2-6 2-8 0l-5-5c-2-2-2-6 0-8l22-22c2-2 2-6 0-8L12 24c-2-2-2-6 0-8l5-5c2-2 6-2 8 0l22 22c2 2 6 2 8 0l22-22c2-2 6-2 8 0l5 5c2 2 2 6-.2 8l-22 22c-2 2-2 6 0 8L88 76c2 2 2 6 0 8l-5 5z\u0026quot;\/\u0026gt;\u0026lt;\/svg\u0026gt;\n    \u0026lt;\/label\u0026gt;      \n    \u0026lt;ul class=\u0026quot;menu-sidebar\u0026quot;\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;javascript:;\u0026quot;\u0026gt;Title I\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;javascript:;\u0026quot;\u0026gt;Title II\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;javascript:;\u0026quot;\u0026gt;Title III\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n      \u0026lt;li\u0026gt;\n        \u0026lt;input type=\u0026quot;checkbox\u0026quot; id=\u0026quot;sub-one\u0026quot; class=\u0026quot;submenu-toggle\u0026quot;\u0026gt;        \n        \u0026lt;label class=\u0026quot;submenu-label\u0026quot; for=\u0026quot;sub-one\u0026quot;\u0026gt;Title IV\u0026lt;\/label\u0026gt;\n        \u0026lt;div class=\u0026quot;arrow right\u0026quot;\u0026gt;\u0026amp;#8250;\u0026lt;\/div\u0026gt;           \n        \u0026lt;ul class=\u0026quot;menu-sub\u0026quot;\u0026gt;\n          \u0026lt;li class=\u0026quot;menu-sub-title\u0026quot;\u0026gt;\n            \u0026lt;label class=\u0026quot;submenu-label\u0026quot; for=\u0026quot;sub-one\u0026quot;\u0026gt;Back\u0026lt;\/label\u0026gt;\n            \u0026lt;div class=\u0026quot;arrow left\u0026quot;\u0026gt;\u0026amp;#8249;\u0026lt;\/div\u0026gt;              \n          \u0026lt;\/li\u0026gt;        \n          \u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;javascript:;\u0026quot;\u0026gt;Sub-Title IV.1\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;javascript:;\u0026quot;\u0026gt;Sub-Title IV.2\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;javascript:;\u0026quot;\u0026gt;Sub-Title IV.3\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n        \u0026lt;\/ul\u0026gt;\n      \u0026lt;\/li\u0026gt;\n      \u0026lt;li\u0026gt;\n        \u0026lt;input type=\u0026quot;checkbox\u0026quot; id=\u0026quot;sub-two\u0026quot; class=\u0026quot;submenu-toggle\u0026quot;\u0026gt;        \n        \u0026lt;label class=\u0026quot;submenu-label\u0026quot; for=\u0026quot;sub-two\u0026quot;\u0026gt;Title V\u0026lt;\/label\u0026gt;\n        \u0026lt;div class=\u0026quot;arrow right\u0026quot;\u0026gt;\u0026amp;#8250;\u0026lt;\/div\u0026gt; \n        \u0026lt;ul class=\u0026quot;menu-sub\u0026quot;\u0026gt;\n          \u0026lt;li class=\u0026quot;menu-sub-title\u0026quot;\u0026gt;\n            \u0026lt;label class=\u0026quot;submenu-label\u0026quot; for=\u0026quot;sub-two\u0026quot;\u0026gt;Back\u0026lt;\/label\u0026gt;\n            \u0026lt;div class=\u0026quot;arrow left\u0026quot;\u0026gt;\u0026amp;#8249;\u0026lt;\/div\u0026gt;              \n          \u0026lt;\/li\u0026gt;      \n          \u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;javascript:;\u0026quot;\u0026gt;Sub-Title V.1\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;javascript:;\u0026quot;\u0026gt;Sub-Title V.2\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;a href=\u0026quot;javascript:;\u0026quot;\u0026gt;Sub-Title V.3\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;     \n        \u0026lt;\/ul\u0026gt;              \n      \u0026lt;\/li\u0026gt;                                         \n    \u0026lt;\/ul\u0026gt; \n  \u0026lt;\/li\u0026gt;\n  \u0026lt;\/ul\u0026gt;\u003C\/div\u003E\u003Ch3\u003ECarousel - CSS Only\u003C\/h3\u003E\u003Ca class=\"lightbox_img\" href=\"\/\/1.bp.blogspot.com\/-RlHzRueYl6s\/X1Y0qzo8BgI\/AAAAAAAAJF0\/LuOFMeDjvowbQraZq0xhbBT3KIK4GS4gwCLcBGAsYHQ\/s551\/Carousel.png\" style=\"display: block; padding: 1em 0; text-align: center;\"\u003E\u003Cimg alt=\"Carousel\" width=\"320\" data-original-height=\"338\" data-original-width=\"551\" src=\"\/\/1.bp.blogspot.com\/-RlHzRueYl6s\/X1Y0qzo8BgI\/AAAAAAAAJF0\/LuOFMeDjvowbQraZq0xhbBT3KIK4GS4gwCLcBGAsYHQ\/s320\/Carousel.png\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"code\" title=\"Kode CSS Carousel\"\u003E.carousel-container {\n  list-style-type: none;\n  padding: 0;\n  margin: 30px auto;\n  width: 550px;\n  height: 338px;\n  border-radius: 5px;\n  position: relative;\n  z-index: 0;\n}\n.carousel-container .arrow {\n  cursor: pointer;\n  background: rgba(0, 0, 0, 0.5);\n  color: rgba(255, 255, 255, 0.5);\n  display: block;\n  width: 50px;\n  font-size: 62px;\n  text-align: center;\n  bottom: 0;\n  top: 0;\n  line-height: 330px;\n  position: absolute;\n  z-index: 9999;\n  padding-bottom: 4px;\n  padding-top: 2px;\n  border-radius: 2px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.carousel-container .arrow.next {\n  left: 0px;\n  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);\n}\n.carousel-container .arrow.back {\n  right: 0px;\n  background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);\n}\n.carousel-container .arrow:hover {\n  color: white;\n}\n.carousel-container li:nth-child(1) \u0026gt; .dot {\n  margin-left: 44.6%;\n}\n.carousel-container .carousel-content {\n  height: 0;\n  overflow: hidden;\n  line-height: 22px;\n  background: #000;\n  position: absolute;\n  top: 0px;\n  border-radius: 5px;\n  box-shadow: 0 5px 5px -5px #333;\n  list-style-type: none;\n  padding: 0;\n}\n.carousel-container .carousel-content img {\n  opacity: 0;\n  padding: 0;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  position: absolute;\n  left: 0;\n  right: 0;\n  max-width: 100%;\n  max-height: 100%;\n  height: inherit;\n  transition: 0.2s ease-in;\n}\n.carousel-container .dot {\n  float: left;\n  cursor: pointer;\n  opacity: 1;\n  width: 12px;\n  height: 12px;\n  background: rgba(255, 255, 255, 0.5);\n  position: relative;\n  margin-top: 56%;\n  border-radius: 50%;\n  z-index: 999;\n  margin-right: 8px;\n  display: block;\n}\n.carousel-container .dot:hover {\n  background: #fff;\n}\n.carousel-container .carousel-toggle {\n  display: none;\n}\n.carousel-container .carousel-toggle:checked + .dot, .carousel-container .carousel-toggle.active + .dot {\n  background: #fff;\n}\n.carousel-container .carousel-toggle:checked ~ .carousel-content, .carousel-container .carousel-toggle.active ~ .carousel-content {\n  height: 100%;\n  width: 100%;\n}\n.carousel-container .carousel-toggle:checked ~ .carousel-content img, .carousel-container .carousel-toggle.active ~ .carousel-content img {\n  opacity: 1;\n}\u003C\/div\u003E\u003Cp\u003E\u003Cdiv class=\"codeview\" title=\"Planing HTML\"\u003E\u0026lt;ul class=\u0026quot;carousel-container radio\u0026quot;\u0026gt;\n  \u0026lt;li\u0026gt;\n    \u0026lt;input class=\u0026quot;carousel-toggle\u0026quot; id=\u0026quot;slide-1\u0026quot; type=\u0026quot;radio\u0026quot; name=\u0026quot;c-toggle\u0026quot; checked\/\u0026gt; \n    \u0026lt;label class=\u0026quot;dot\u0026quot; for=\u0026quot;slide-1\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n    \u0026lt;ul class=\u0026quot;carousel-content\u0026quot;\u0026gt;\n      \u0026lt;li\u0026gt;\n        \u0026lt;img src=\u0026quot;PATH_IMG_1\u0026quot; alt=\u0026quot;PATH_IMG_1\u0026quot; \/\u0026gt;\n        \u0026lt;label class=\u0026quot;arrow back\u0026quot; for=\u0026quot;slide-2\u0026quot;\u0026gt;\u0026amp;#8250;\u0026lt;\/label\u0026gt;      \n        \u0026lt;label class=\u0026quot;arrow next\u0026quot; for=\u0026quot;slide-4\u0026quot;\u0026gt;\u0026amp;#8249;\u0026lt;\/label\u0026gt;\n      \u0026lt;\/li\u0026gt;\n    \u0026lt;\/ul\u0026gt;\n  \u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;\n    \u0026lt;input class=\u0026quot;carousel-toggle\u0026quot; id=\u0026quot;slide-2\u0026quot; type=\u0026quot;radio\u0026quot; name=\u0026quot;c-toggle\u0026quot; \/\u0026gt;   \n    \u0026lt;label class=\u0026quot;dot\u0026quot; for=\u0026quot;slide-2\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n    \u0026lt;ul class=\u0026quot;carousel-content\u0026quot;\u0026gt;\n      \u0026lt;li\u0026gt;\n        \u0026lt;img src=\u0026quot;PATH_IMG_2\u0026quot; alt=\u0026quot;PATH_IMG_2\u0026quot; \/\u0026gt;\n        \u0026lt;label class=\u0026quot;arrow back\u0026quot; for=\u0026quot;slide-3\u0026quot;\u0026gt;\u0026amp;#8250;\u0026lt;\/label\u0026gt;       \n        \u0026lt;label class=\u0026quot;arrow next\u0026quot; for=\u0026quot;slide-1\u0026quot;\u0026gt;\u0026amp;#8249;\u0026lt;\/label\u0026gt;  \n      \u0026lt;\/li\u0026gt;  \n    \u0026lt;\/ul\u0026gt;    \n  \u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;\n    \u0026lt;input class=\u0026quot;carousel-toggle\u0026quot; id=\u0026quot;slide-3\u0026quot; type=\u0026quot;radio\u0026quot; name=\u0026quot;c-toggle\u0026quot; \/\u0026gt; \n    \u0026lt;label class=\u0026quot;dot\u0026quot; for=\u0026quot;slide-3\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt; \n    \u0026lt;ul class=\u0026quot;carousel-content\u0026quot;\u0026gt;\n      \u0026lt;li\u0026gt;\n        \u0026lt;img src=\u0026quot;PATH_IMG_3\u0026quot; alt=\u0026quot;PATH_IMG_3\u0026quot; \/\u0026gt;\n        \u0026lt;label class=\u0026quot;arrow back\u0026quot; for=\u0026quot;slide-4\u0026quot;\u0026gt;\u0026amp;#8250;\u0026lt;\/label\u0026gt;                  \n        \u0026lt;label class=\u0026quot;arrow next\u0026quot; for=\u0026quot;slide-2\u0026quot;\u0026gt;\u0026amp;#8249;\u0026lt;\/label\u0026gt;\n      \u0026lt;\/li\u0026gt;\n    \u0026lt;\/ul\u0026gt;  \n  \u0026lt;\/li\u0026gt;  \n  \u0026lt;li\u0026gt;\n    \u0026lt;input class=\u0026quot;carousel-toggle\u0026quot; id=\u0026quot;slide-4\u0026quot; type=\u0026quot;radio\u0026quot; name=\u0026quot;c-toggle\u0026quot; \/\u0026gt;        \n    \u0026lt;label class=\u0026quot;dot\u0026quot; for=\u0026quot;slide-4\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n    \u0026lt;ul class=\u0026quot;carousel-content\u0026quot;\u0026gt;\n      \u0026lt;img src=\u0026quot;PATH_IMG_4\u0026quot; alt=\u0026quot;PATH_IMG_4\u0026quot; \/\u0026gt;\n      \u0026lt;label class=\u0026quot;arrow back\u0026quot; for=\u0026quot;slide-1\u0026quot;\u0026gt;\u0026amp;#8250;\u0026lt;\/label\u0026gt;                        \n      \u0026lt;label class=\u0026quot;arrow next\u0026quot; for=\u0026quot;slide-3\u0026quot;\u0026gt;\u0026amp;#8249;\u0026lt;\/label\u0026gt;                  \n    \u0026lt;\/ul\u0026gt;    \n  \u0026lt;\/li\u0026gt;  \n  \u0026lt;\/ul\u0026gt;\u003C\/div\u003E\u003Ch3\u003ETab Container - CSS Only\u003C\/h3\u003E\u003Ca class=\"lightbox_img\" href=\"\/\/1.bp.blogspot.com\/-jDHFykurWUc\/X1Y1NRFVMpI\/AAAAAAAAJGA\/0C0vON-OxhYIp4hqbyW6vkdqmzaxyuflQCLcBGAsYHQ\/s351\/Tab%2BContainer.png\" style=\"display: block; padding: 1em 0; text-align: center;\"\u003E\u003Cimg alt=\"Tab Container\" width=\"320\" data-original-height=\"230\" data-original-width=\"351\" src=\"\/\/1.bp.blogspot.com\/-jDHFykurWUc\/X1Y1NRFVMpI\/AAAAAAAAJGA\/0C0vON-OxhYIp4hqbyW6vkdqmzaxyuflQCLcBGAsYHQ\/s320\/Tab%2BContainer.png\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"codeview\" title=\"CSS TAB\"\u003E.tab-container {\n  list-style-type: none;\n  padding: 0;\n  margin: 60px auto;\n  max-width: 350px;\n  position: relative;\n  background: #fff;\n}\n.tab-container:after {\n  content: \u0026quot;\u0026quot;;\n  display: table;\n  clear: both;\n}\n.tab-container ul {\n  list-style-type: none;\n  padding: 0;\n}\n.tab-container .arrows {\n  display: block;\n  width: 60px;\n  font-size: 32px;\n  bottom: 10px;\n  right: 0px;\n  position: absolute;\n}\n.tab-container .arrows label {\n  display: inline-block;\n  cursor: pointer;\n  color: #aaa;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  margin-left: 5px;\n}\n.tab-container .arrows label:hover {\n  color: #333;\n}\n.tab-container .tab-content-container {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  height: 0;\n  opacity: 0;\n  overflow: hidden;\n  line-height: 22px;\n  background: #fff;\n  position: absolute;\n  top: 42px;\n  padding: 0px 40px 0 20px;\n  border: 2px solid #181818;\n  border-top: 0;\n  box-shadow: 0 5px 5px -5px #333;\n}\n.tab-container .tab-content-container .tab-content {\n  opacity: 0;\n  padding: 15px 0;\n  min-height: 185px;\n  transition: opacity 0.1s ease-in;\n}\n.tab-container .tab {\n  outline: 0;\n  float: left;\n  cursor: pointer;\n  opacity: 1;\n  width: 25%;\n  line-height: 40px;\n  display: block;\n  margin: 0;\n  position: relative;\n  background: #181818;\n  color: #fff;\n  text-align: center;\n  border-top: 2px solid #181818;\n  border-right: 2px solid #181818;\n  box-sizing: border-box;\n}\n.tab-container .tab.l-b {\n  border-left: 2px solid #181818;\n}\n.tab-container .tab:hover {\n  background: #000000;\n}\n.tab-container .tab-toggle {\n  display: none;\n}\n.tab-container .tab-toggle.active + .tab, .tab-container .tab-toggle:checked + .tab {\n  background: #fff;\n  color: #333;\n}\n.tab-container .tab-toggle.active ~ .tab-content-container, .tab-container .tab-toggle:checked ~ .tab-content-container {\n  height: auto;\n  opacity: 1;\n}\n.tab-container .tab-toggle.active ~ .tab-content-container .tab-content, .tab-container .tab-toggle:checked ~ .tab-content-container .tab-content {\n  opacity: 1;\n}\n.tab-container .tab-toggle.active ~ .tab-content-container .tab-content label, .tab-container .tab-toggle:checked ~ .tab-content-container .tab-content label {\n  opacity: 1;\n}\u003C\/div\u003E\u003Cp\u003E\u003Cdiv class=\"code\" title=\"HTML Plan\"\u003E\u0026lt;ul class=\u0026quot;tab-container radio\u0026quot;\u0026gt;\n  \u0026lt;li\u0026gt;\n    \u0026lt;input class=\u0026quot;tab-toggle\u0026quot; id=\u0026quot;tab-1\u0026quot; type=\u0026quot;radio\u0026quot; name=\u0026quot;toggle\u0026quot; checked \/\u0026gt; \n    \u0026lt;label data-title=\u0026quot;Tab 1\u0026quot; class=\u0026quot;tab l-b\u0026quot; for=\u0026quot;tab-1\u0026quot;\u0026gt;Tabs\u0026lt;\/label\u0026gt;            \n    \u0026lt;ul class=\u0026quot;tab-content-container\u0026quot;\u0026gt;\n      \u0026lt;li class=\u0026quot;tab-content\u0026quot;\u0026gt;\n        This is a testing text to test the tab content container. Lorem Ipsum dolor sit amet! Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \n        This is a testing text to test the tab content container. Lorem Ipsum dolor sit amet! \n        \u0026lt;div class=\u0026quot;arrows\u0026quot;\u0026gt;\n          \u0026lt;label class=\u0026quot;back\u0026quot; for=\u0026quot;tab-4\u0026quot;\u0026gt;\u0026amp;#8249;\u0026lt;\/label\u0026gt;\n          \u0026lt;label class=\u0026quot;next\u0026quot; for=\u0026quot;tab-2\u0026quot;\u0026gt;\u0026amp;#8250;\u0026lt;\/label\u0026gt;   \n        \u0026lt;\/div\u0026gt;\n      \u0026lt;\/li\u0026gt;\n    \u0026lt;\/ul\u0026gt;\n  \u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;\n    \u0026lt;input class=\u0026quot;tab-toggle\u0026quot; id=\u0026quot;tab-2\u0026quot; type=\u0026quot;radio\u0026quot; name=\u0026quot;toggle\u0026quot; \/\u0026gt;\n    \u0026lt;label class=\u0026quot;tab\u0026quot; for=\u0026quot;tab-2\u0026quot;\u0026gt;Are\u0026lt;\/label\u0026gt; \n    \u0026lt;ul class=\u0026quot;tab-content-container\u0026quot;\u0026gt;\n      \u0026lt;li class=\u0026quot;tab-content\u0026quot;\u0026gt;\n        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        \u0026lt;div class=\u0026quot;arrows\u0026quot;\u0026gt;\n          \u0026lt;label class=\u0026quot;back\u0026quot; for=\u0026quot;tab-1\u0026quot;\u0026gt;\u0026amp;#8249;\u0026lt;\/label\u0026gt;\n          \u0026lt;label class=\u0026quot;next\u0026quot; for=\u0026quot;tab-3\u0026quot;\u0026gt;\u0026amp;#8250;\u0026lt;\/label\u0026gt;   \n        \u0026lt;\/div\u0026gt;   \n      \u0026lt;\/li\u0026gt;\n    \u0026lt;\/ul\u0026gt;\n  \u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;\n    \u0026lt;input class=\u0026quot;tab-toggle\u0026quot; id=\u0026quot;tab-3\u0026quot; type=\u0026quot;radio\u0026quot; name=\u0026quot;toggle\u0026quot;\/\u0026gt;        \n    \u0026lt;label class=\u0026quot;tab\u0026quot; for=\u0026quot;tab-3\u0026quot;\u0026gt;Pretty\u0026lt;\/label\u0026gt;\n    \u0026lt;ul class=\u0026quot;tab-content-container\u0026quot;\u0026gt;\n      \u0026lt;li class=\u0026quot;tab-content\u0026quot;\u0026gt;\n        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n        \u0026lt;div class=\u0026quot;arrows\u0026quot;\u0026gt;\n          \u0026lt;label class=\u0026quot;back\u0026quot; for=\u0026quot;tab-2\u0026quot;\u0026gt;\u0026amp;#8249;\u0026lt;\/label\u0026gt;\n          \u0026lt;label class=\u0026quot;next\u0026quot; for=\u0026quot;tab-4\u0026quot;\u0026gt;\u0026amp;#8250;\u0026lt;\/label\u0026gt;   \n        \u0026lt;\/div\u0026gt;\n      \u0026lt;\/li\u0026gt;\n    \u0026lt;\/ul\u0026gt;    \n  \u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;\n    \u0026lt;input class=\u0026quot;tab-toggle\u0026quot; id=\u0026quot;tab-4\u0026quot; type=\u0026quot;radio\u0026quot; name=\u0026quot;toggle\u0026quot;\/\u0026gt;     \n    \u0026lt;label class=\u0026quot;tab\u0026quot; for=\u0026quot;tab-4\u0026quot;\u0026gt;Cool\u0026lt;\/label\u0026gt; \n    \u0026lt;ul class=\u0026quot;tab-content-container\u0026quot;\u0026gt;\n      \u0026lt;li class=\u0026quot;tab-content\u0026quot;\u0026gt;\n        This is the final content for the tab example.\n        \u0026lt;div class=\u0026quot;arrows\u0026quot;\u0026gt;\n          \u0026lt;label class=\u0026quot;back\u0026quot; for=\u0026quot;tab-3\u0026quot;\u0026gt;\u0026amp;#8249;\u0026lt;\/label\u0026gt;\n          \u0026lt;label class=\u0026quot;next\u0026quot; for=\u0026quot;tab-1\u0026quot;\u0026gt;\u0026amp;#8250;\u0026lt;\/label\u0026gt;   \n        \u0026lt;\/div\u0026gt;\n      \u0026lt;\/li\u0026gt;  \n    \u0026lt;\/ul\u0026gt;  \n  \u0026lt;\/li\u0026gt;\n  \u0026lt;\/ul\u0026gt;\u003C\/div\u003E\u003Ch3\u003E\u003Cq\u003EAccordion\u003C\/q\u003E - CSS Only\u003C\/h3\u003E\u003Ca class=\"lightbox_img\" href=\"\/\/1.bp.blogspot.com\/-h3mj9R3kxhs\/X1Y1qbzkiVI\/AAAAAAAAJGI\/kMGyoSGn2KACglmrL33YgmgnuJyO7QTqgCLcBGAsYHQ\/s300\/Accordion.png\" style=\"display: block; padding: 1em 0; text-align: center;\"\u003E\u003Cimg alt=\"Accordion\" width=\"320\" data-original-height=\"224\" data-original-width=\"300\" src=\"\/\/1.bp.blogspot.com\/-h3mj9R3kxhs\/X1Y1qbzkiVI\/AAAAAAAAJGI\/kMGyoSGn2KACglmrL33YgmgnuJyO7QTqgCLcBGAsYHQ\/s320\/Accordion.png\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"code\" title=\"CSS Accordion\"\u003E.accordion-container {\n  width: 300px;\n  margin: 60px auto;\n  border: 2px solid #181818;\n  border-radius: 4px;\n  box-shadow: 0 5px 5px -5px #333;\n  list-style-type: none;\n  padding: 0;\n}\n.accordion-container ul {\n  list-style-type: none;\n  padding-left: 0;\n}\n.accordion-container .accordion-category {\n  position: relative;\n  background: #fff;\n}\n.accordion-container .accordion-category .accordion-title {\n  padding-left: 20px;\n  height: 40px;\n  font-size: 18px;\n  line-height: 40px;\n  background: #181818;\n  color: #fff;\n  position: relative;\n  display: block;\n  cursor: pointer;\n}\n.accordion-container .accordion-category .accordion-title:hover {\n  background: #000000;\n}\n.accordion-container .accordion-category .accordion-items {\n  max-height: 0;\n  height: 0;\n  margin: 0;\n  overflow: hidden;\n  transition: 0.6s ease-in;\n}\n.accordion-container .accordion-category .accordion-items li {\n  padding: 5px 20px;\n}\n.accordion-container .accordion-category .accordion-items li:first-child {\n  padding-top: 10px;\n}\n.accordion-container .accordion-category .accordion-items li:last-child {\n  padding-bottom: 10px;\n}\n.accordion-container .accordion-category input {\n  display: none;\n}\n.accordion-container .accordion-category input.active ~ .accordion-items, .accordion-container .accordion-category input:checked ~ .accordion-items {\n  height: auto;\n  max-height: 900px;\n  -webkit-transform: translate3d(0, 0, 0);\n}\n.accordion-container .accordion-category input.active ~ .accordion-title:after, .accordion-container .accordion-category input:checked ~ .accordion-title:after, .accordion-container .accordion-category input:hover ~ .accordion-title:after {\n  content: \u0026quot;\\203A\u0026quot;;\n  position: absolute;\n  width: 40px;\n  font-size: 32px;\n  right: 0;\n  padding-left: 15px;\n  top: 0;\n  bottom: 0;\n  transform: rotate(90deg);\n}\u003C\/div\u003E\u003Cp\u003E\u003Cdiv class=\"codeview\" title=\"Syntax HTML\"\u003E\u0026lt;ul class=\u0026quot;accordion-container radio\u0026quot;\u0026gt;\n  \u0026lt;li class=\u0026quot;accordion-category\u0026quot;\u0026gt;\n    \u0026lt;input type=\u0026quot;radio\u0026quot; name=\u0026quot;a-toggle\u0026quot; id=\u0026quot;one\u0026quot; checked\u0026gt;      \n    \u0026lt;label for=\u0026quot;one\u0026quot; class=\u0026quot;accordion-title\u0026quot;\u0026gt;Accordions\u0026lt;\/label\u0026gt;\n    \u0026lt;ul class=\u0026quot;accordion-items\u0026quot;\u0026gt;    \n      \u0026lt;li\u0026gt;Item One\u0026lt;\/li\u0026gt;                    \n      \u0026lt;li\u0026gt;Item Two\u0026lt;\/li\u0026gt;                     \n      \u0026lt;li\u0026gt;Item Three\u0026lt;\/li\u0026gt;                                   \n    \u0026lt;\/ul\u0026gt;      \n  \u0026lt;\/li\u0026gt;\n  \u0026lt;li class=\u0026quot;accordion-category\u0026quot;\u0026gt;\n    \u0026lt;input id=\u0026quot;two\u0026quot; type=\u0026quot;radio\u0026quot; name=\u0026quot;a-toggle\u0026quot;\u0026gt;      \n    \u0026lt;label for=\u0026quot;two\u0026quot; class=\u0026quot;accordion-title\u0026quot;\u0026gt;Condense\u0026lt;\/label\u0026gt;\n    \u0026lt;ul class=\u0026quot;accordion-items\u0026quot;\u0026gt;\n      \u0026lt;li\u0026gt;Item A\u0026lt;\/li\u0026gt;                     \n      \u0026lt;li\u0026gt;Item B\u0026lt;\/li\u0026gt;                     \n    \u0026lt;\/ul\u0026gt;      \n  \u0026lt;\/li\u0026gt;  \n  \u0026lt;li class=\u0026quot;accordion-category\u0026quot;\u0026gt;\n    \u0026lt;input id=\u0026quot;tre\u0026quot; type=\u0026quot;radio\u0026quot; name=\u0026quot;a-toggle\u0026quot;\u0026gt;      \n    \u0026lt;label for=\u0026quot;tre\u0026quot; class=\u0026quot;accordion-title\u0026quot;\u0026gt;Stuff\u0026lt;\/label\u0026gt;\n    \u0026lt;ul class=\u0026quot;accordion-items\u0026quot;\u0026gt;\n      \u0026lt;li\u0026gt;Item 1\u0026lt;\/li\u0026gt;          \n      \u0026lt;li\u0026gt;Item 2\u0026lt;\/li\u0026gt; \n      \u0026lt;li\u0026gt;Item 3\u0026lt;\/li\u0026gt;          \n      \u0026lt;li\u0026gt;Item 4\u0026lt;\/li\u0026gt;            \n    \u0026lt;\/ul\u0026gt;\n  \u0026lt;\/ul\u0026gt;\u003C\/div\u003E\u003Ch3\u003EModal Box Dialog - CSS Only\u003C\/h3\u003E\u003Ca class=\"lightbox_img\" href=\"\/\/1.bp.blogspot.com\/-s4NDTGDHbzs\/X1Y2bsbHE-I\/AAAAAAAAJGQ\/_LmlPS88ygEHu25CmOkzinFR1wb2sjFpgCLcBGAsYHQ\/s534\/Modal%2BBox%2BDialog.png\" style=\"display: block; padding: 1em 0; text-align: center;\"\u003E\u003Cimg alt=\"Modal Box Dialog\" width=\"320\" data-original-height=\"371\" data-original-width=\"534\" src=\"\/\/1.bp.blogspot.com\/-s4NDTGDHbzs\/X1Y2bsbHE-I\/AAAAAAAAJGQ\/_LmlPS88ygEHu25CmOkzinFR1wb2sjFpgCLcBGAsYHQ\/s320\/Modal%2BBox%2BDialog.png\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"codeview\" title=\"CSS Modal\"\u003E.modal-container {\n  margin: 60px auto;\n  padding-top: 0px;\n  position: relative;\n  width: 160px;\n}\n.modal-container .modal-btn {\n  display: block;\n  margin: 0 auto;\n  color: #fff;\n  width: 160px;\n  height: 50px;\n  line-height: 50px;\n  background: #181818;\n  font-size: 22px;\n  border: 0;\n  border-radius: 3px;\n  cursor: pointer;\n  text-align: center;\n  box-shadow: 0 5px 5px -5px #333;\n  transition: background 0.3s ease-in;\n}\n.modal-container .modal-btn:hover {\n  background: #000000;\n}\n.modal-container .modal-content,\n.modal-container .modal-backdrop {\n  height: 0;\n  width: 0;\n  opacity: 0;\n  visibility: hidden;\n  overflow: hidden;\n  cursor: pointer;\n  transition: opacity 0.2s ease-in;\n}\n.modal-container .modal-close {\n  color: #aaa;\n  position: absolute;\n  right: 5px;\n  top: 5px;\n  padding-top: 3px;\n  background: #fff;\n  font-size: 16px;\n  width: 25px;\n  height: 25px;\n  font-weight: bold;\n  text-align: center;\n  cursor: pointer;\n}\n.modal-container .modal-close:hover {\n  color: #333;\n}\n.modal-container .modal-content-btn {\n  position: absolute;\n  text-align: center;\n  cursor: pointer;\n  bottom: 20px;\n  right: 30px;\n  background: #181818;\n  color: #fff;\n  width: 50px;\n  border-radius: 2px;\n  font-size: 14px;\n  height: 32px;\n  padding-top: 9px;\n  font-weight: normal;\n}\n.modal-container .modal-content-btn:hover {\n  color: #fff;\n  background: #000000;\n}\n.modal-container #modal-toggle {\n  display: none;\n}\n.modal-container #modal-toggle.active ~ .modal-backdrop, .modal-container #modal-toggle:checked ~ .modal-backdrop {\n  background-color: rgba(0, 0, 0, 0.6);\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  left: 0;\n  top: 0;\n  z-index: 9;\n  visibility: visible;\n  opacity: 1;\n  transition: opacity 0.2s ease-in;\n}\n.modal-container #modal-toggle.active ~ .modal-content, .modal-container #modal-toggle:checked ~ .modal-content {\n  opacity: 1;\n  background-color: #fff;\n  max-width: 400px;\n  width: 400px;\n  height: 280px;\n  padding: 10px 30px;\n  position: fixed;\n  left: calc(50% - 200px);\n  top: 12%;\n  border-radius: 4px;\n  z-index: 999;\n  pointer-events: auto;\n  cursor: auto;\n  visibility: visible;\n  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);\n}\n@media (max-width: 400px) {\n  .modal-container #modal-toggle.active ~ .modal-content, .modal-container #modal-toggle:checked ~ .modal-content {\n    left: 0;\n  }\n}\u003C\/div\u003E\u003Cp\u003E\u003Cpre lang=\"Kode HTML\"\u003E\u003Ccodec\u003E\u0026lt;div class=\u0026quot;modal-container check\u0026quot;\u0026gt;\n  \u0026lt;input id=\u0026quot;modal-toggle\u0026quot; type=\u0026quot;checkbox\u0026quot;\u0026gt;\n  \u0026lt;label class=\u0026quot;modal-btn\u0026quot; for=\u0026quot;modal-toggle\u0026quot;\u0026gt;Modal\u0026lt;\/label\u0026gt; \n  \u0026lt;label class=\u0026quot;modal-backdrop\u0026quot; for=\u0026quot;modal-toggle\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n  \u0026lt;div class=\u0026quot;modal-content\u0026quot;\u0026gt;\n    \u0026lt;label class=\u0026quot;modal-close\u0026quot; for=\u0026quot;modal-toggle\u0026quot;\u0026gt;\u0026amp;#x2715;\u0026lt;\/label\u0026gt;\n    \u0026lt;h2\u0026gt;Modal title\u0026lt;\/h2\u0026gt;\u0026lt;hr \/\u0026gt;\n    \u0026lt;p\u0026gt;Hello from inside the modal!\u0026lt;\/p\u0026gt; \n    \u0026lt;label class=\u0026quot;modal-content-btn\u0026quot; for=\u0026quot;modal-toggle\u0026quot;\u0026gt;OK\u0026lt;\/label\u0026gt;   \n  \u0026lt;\/div\u0026gt;          \n  \u0026lt;\/div\u0026gt;\u003C\/codec\u003E\u003C\/pre\u003E\u003Ch3\u003EMake ToolTip Click\/Hover - CSS Only\u003C\/h3\u003E\u003Ca class=\"lightbox_img\" href=\"\/\/1.bp.blogspot.com\/-h_UTb0Vaddc\/X1Y3CJssHRI\/AAAAAAAAJGY\/z83l5Z468bUFDXgLFPKp9cIaqNR6tAzTQCLcBGAsYHQ\/s283\/ToolTip.png\" style=\"display: block; padding: 1em 0; text-align: center;\"\u003E\u003Cimg alt=\"ToolTip\" width=\"320\" data-original-height=\"239\" data-original-width=\"283\" src=\"\/\/1.bp.blogspot.com\/-h_UTb0Vaddc\/X1Y3CJssHRI\/AAAAAAAAJGY\/z83l5Z468bUFDXgLFPKp9cIaqNR6tAzTQCLcBGAsYHQ\/s320\/ToolTip.png\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"code\" title=\"CSS Tooltip\"\u003E.tooltip-container {\n  margin: 60px auto;\n  padding-top: 0px;\n  position: relative;\n  width: 160px;\n}\n.tooltip-container .tooltip-btn {\n  display: block;\n  margin: 0 auto;\n  color: #fff;\n  width: 160px;\n  height: 50px;\n  line-height: 50px;\n  background: #181818;\n  font-size: 22px;\n  border: 0;\n  border-radius: 3px;\n  cursor: pointer;\n  text-align: center;\n  box-shadow: 0 5px 5px -5px #333;\n  transition: background 0.3s ease-in;\n}\n.tooltip-container .tooltip-btn:hover {\n  background: #000000;\n}\n.tooltip-container .tooltip-btn.tooltip-toggle:hover ~ .tooltip-content {\n  opacity: 1;\n  background-color: #fff;\n  max-width: 400px;\n  width: 200px;\n  min-height: 70px;\n  padding: 0px 20px;\n  position: absolute;\n  left: calc(50% - 100px);\n  top: 145%;\n  border-radius: 4px;\n  z-index: 999;\n  pointer-events: auto;\n  cursor: auto;\n  visibility: visible;\n  overflow: visible;\n  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);\n}\n@media (max-width: 400px) {\n  .tooltip-container .tooltip-btn.tooltip-toggle:hover ~ .tooltip-content {\n    left: 0;\n  }\n}\n.tooltip-container .tooltip-btn.tooltip-toggle:hover ~ .tooltip-content:before {\n  content: \u0026quot;\u0026quot;;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 10px 10px 10px;\n  border-color: transparent transparent #ffffff transparent;\n  position: absolute;\n  top: -10px;\n  left: 30px;\n}\n.tooltip-container .tooltip-content,\n.tooltip-container .tooltip-backdrop {\n  height: 0;\n  width: 0;\n  opacity: 0;\n  visibility: hidden;\n  overflow: hidden;\n  transition: opacity 0.2s ease-in;\n}\n.tooltip-container #tooltip-toggle {\n  display: none;\n}\n.tooltip-container #tooltip-toggle.active ~ .tooltip-backdrop, .tooltip-container #tooltip-toggle:checked ~ .tooltip-backdrop {\n  background-color: transparent;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  left: 0;\n  top: 0;\n  z-index: 9;\n  visibility: visible;\n  opacity: 1;\n  transition: opacity 0.2s ease-in;\n}\n.tooltip-container #tooltip-toggle.active ~ .tooltip-content, .tooltip-container #tooltip-toggle:checked ~ .tooltip-content {\n  opacity: 1;\n  background-color: #fff;\n  max-width: 400px;\n  width: 200px;\n  min-height: 70px;\n  padding: 0px 20px;\n  position: absolute;\n  left: calc(50% - 100px);\n  top: 145%;\n  border-radius: 4px;\n  z-index: 999;\n  pointer-events: auto;\n  visibility: visible;\n  overflow: visible;\n  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);\n}\n@media (max-width: 400px) {\n  .tooltip-container #tooltip-toggle.active ~ .tooltip-content, .tooltip-container #tooltip-toggle:checked ~ .tooltip-content {\n    left: 0;\n  }\n}\n.tooltip-container #tooltip-toggle.active ~ .tooltip-content:before, .tooltip-container #tooltip-toggle:checked ~ .tooltip-content:before {\n  content: \u0026quot;\u0026quot;;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 10px 10px 10px;\n  border-color: transparent transparent #ffffff transparent;\n  position: absolute;\n  top: -10px;\n  left: 30px;\n}\u003C\/div\u003E\u003Cp\u003E\u003Cpre lang=\"Tooltip Click\"\u003E\u003Ccodec\u003E\u0026lt;div class=\u0026quot;tooltip-container check\u0026quot;\u0026gt;\n  \u0026lt;input id=\u0026quot;tooltip-toggle\u0026quot; type=\u0026quot;checkbox\u0026quot;\u0026gt;\n  \u0026lt;label class=\u0026quot;tooltip-btn\u0026quot; for=\u0026quot;tooltip-toggle\u0026quot;\u0026gt;Tooltip click\u0026lt;\/label\u0026gt; \n  \u0026lt;label class=\u0026quot;tooltip-backdrop\u0026quot; for=\u0026quot;tooltip-toggle\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n  \u0026lt;div class=\u0026quot;tooltip-content\u0026quot;\u0026gt;\n    \u0026lt;p\u0026gt;Hello from inside the CSS tooltip!\u0026lt;\/p\u0026gt; \n  \u0026lt;\/div\u0026gt;          \n\u0026lt;\/div\u0026gt;\u003C\/codec\u003E\u003C\/pre\u003E\u003Cpre lang=\"Tooltip Hover\"\u003E\u003Ccodec\u003E\u0026lt;div class=\u0026quot;tooltip-container\u0026quot;\u0026gt;\n  \u0026lt;div class=\u0026quot;tooltip-btn tooltip-toggle\u0026quot;\u0026gt;Tooltip hover\u0026lt;\/div\u0026gt; \n  \u0026lt;div class=\u0026quot;tooltip-content\u0026quot;\u0026gt;\n    \u0026lt;p\u0026gt;Hello from inside the CSS tooltip!\u0026lt;\/p\u0026gt; \n  \u0026lt;\/div\u0026gt;          \n  \u0026lt;\/div\u0026gt;\u003C\/codec\u003E\u003C\/pre\u003E\u003Ch3\u003E5-star rating - CSS Only\u003C\/h3\u003E\u003Ca class=\"lightbox_img\" href=\"\/\/1.bp.blogspot.com\/-409f3NenqyM\/X1Y3gxZ-vWI\/AAAAAAAAJGg\/cSeT2WDG4uk7L3OV_3-nfzoi0TvyHlYVgCLcBGAsYHQ\/s214\/star-rating.png\" style=\"display: block; padding: 1em 0; text-align: center;\"\u003E\u003Cimg alt=\"star-rating\" data-original-height=\"82\" data-original-width=\"214\" src=\"\/\/1.bp.blogspot.com\/-409f3NenqyM\/X1Y3gxZ-vWI\/AAAAAAAAJGg\/cSeT2WDG4uk7L3OV_3-nfzoi0TvyHlYVgCLcBGAsYHQ\/s320\/star-rating.png\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"codeview\" title=\"CSS Star Rating\"\u003E.star-container {\n  text-align: center;\n  font-size: 0;\n}\n.star-container label {\n  display: inline-block;\n  cursor: pointer;\n}\n.star-container label:after {\n  content: \u0026quot;\\2605\u0026quot;;\n  font-size: 46px;\n  color: #999;\n  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);\n}\n.star-container label:hover:after {\n  color: #F89406;\n}\n.star-container input {\n  display: none;\n}\n.star-container #one:checked ~ label[for=one]:after,\n.star-container #two:checked ~ label[for=two]:after,\n.star-container #three:checked ~ label[for=three]:after,\n.star-container #four:checked ~ label[for=four]:after,\n.star-container #five:checked ~ label[for=five]:after {\n  color: #F89406;\n}\n.star-container #two:checked ~ label[for=one]:after {\n  color: #F89406;\n}\n.star-container #three:checked ~ label[for=one]:after, .star-container #three:checked ~ label[for=two]:after {\n  color: #F89406;\n}\n.star-container #four:checked ~ label[for=one]:after, .star-container #four:checked ~ label[for=two]:after, .star-container #four:checked ~ label[for=three]:after {\n  color: #F89406;\n}\n.star-container #five:checked ~ label[for=one]:after, .star-container #five:checked ~ label[for=two]:after, .star-container #five:checked ~ label[for=three]:after, .star-container #five:checked ~ label[for=four]:after {\n  color: #F89406;\n}\u003C\/div\u003E\u003Cp\u003E\u003Cpre lang=\"HTML Brooo\"\u003E\u003Ccodec\u003E\u0026lt;div class=\u0026quot;star-container\u0026quot;\u0026gt;\n  \u0026lt;input type=\u0026quot;radio\u0026quot; name=\u0026quot;starred\u0026quot; id=\u0026quot;five\u0026quot;\/\u0026gt; \n  \u0026lt;input type=\u0026quot;radio\u0026quot; name=\u0026quot;starred\u0026quot; id=\u0026quot;four\u0026quot;\/\u0026gt; \n  \u0026lt;input type=\u0026quot;radio\u0026quot; name=\u0026quot;starred\u0026quot; id=\u0026quot;three\u0026quot;\/\u0026gt;\n  \u0026lt;input type=\u0026quot;radio\u0026quot; name=\u0026quot;starred\u0026quot; id=\u0026quot;two\u0026quot;\/\u0026gt;\n  \u0026lt;input type=\u0026quot;radio\u0026quot; name=\u0026quot;starred\u0026quot; id=\u0026quot;one\u0026quot;\/\u0026gt;\n  \u0026lt;label for=\u0026quot;one\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n  \u0026lt;label for=\u0026quot;two\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n  \u0026lt;label for=\u0026quot;three\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n  \u0026lt;label for=\u0026quot;four\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n  \u0026lt;label for=\u0026quot;five\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n  \u0026lt;\/div\u0026gt;\u003C\/codec\u003E\u003C\/pre\u003E\u003Ch3\u003ESteps Container - CSS Only\u003C\/h3\u003E\u003Ca class=\"lightbox_img\" href=\"\/\/1.bp.blogspot.com\/-4-DIFwlEBsU\/X1Y4Gp3WLYI\/AAAAAAAAJGo\/RV8EbY7z6yQLZpwJVLV_MdthddfjRw-BgCLcBGAsYHQ\/s417\/Steps%2BContainer.png\" style=\"display: block; padding: 1em 0; text-align: center;\"\u003E\u003Cimg alt=\"Steps Container\" width=\"320\" data-original-height=\"305\" data-original-width=\"417\" src=\"\/\/1.bp.blogspot.com\/-4-DIFwlEBsU\/X1Y4Gp3WLYI\/AAAAAAAAJGo\/RV8EbY7z6yQLZpwJVLV_MdthddfjRw-BgCLcBGAsYHQ\/s320\/Steps%2BContainer.png\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"code\" title=\"CSSnyah\"\u003E.step-container {\n  width: 400px;\n  margin: 30px auto;\n  min-height: 200px;\n  position: relative;\n}\n.step-container:after {\n  content: \u0026quot;\u0026quot;;\n  display: table;\n  clear: both;\n}\n.step-container .step-content {\n  display: none;\n  border: 2px solid #181818;\n  border-radius: 2px;\n  background: #fff;\n  height: 100%;\n  position: absolute;\n  top: 70px;\n  overflow-x: auto;\n}\n.step-container .step-content .text {\n  padding: 15px;\n}\n.step-container .step-dot {\n  float: left;\n  width: 33.333%;\n  text-align: center;\n  padding-top: 40px;\n  position: relative;\n}\n.step-container .step-dot:after {\n  content: \u0026quot;\u0026quot;;\n  width: 30px;\n  height: 30px;\n  background: #fff;\n  color: #666;\n  display: block;\n  border-radius: 50%;\n  border: 2px solid #219150;\n  padding-top: 3px;\n  position: absolute;\n  top: 0px;\n  left: 40%;\n  z-index: 99;\n  box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.3);\n  transition: 0.1s ease-in;\n}\n.step-container .step-dot.one:after {\n  content: \u0026quot;1\u0026quot;;\n}\n.step-container .step-dot.two:after {\n  content: \u0026quot;2\u0026quot;;\n}\n.step-container .step-dot.three:after {\n  content: \u0026quot;3\u0026quot;;\n}\n.step-container .step-dot.one:before {\n  display: none;\n}\n.step-container .step-dot:before {\n  content: \u0026quot;\u0026quot;;\n  width: 100%;\n  height: 4px;\n  background: #999;\n  display: block;\n  position: absolute;\n  top: 12px;\n  left: -41%;\n  box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.3);\n  transition: 0.1s ease-in;\n}\n.step-container label {\n  cursor: pointer;\n  padding: 10px 0;\n  display: block;\n  width: 100px;\n  float: right;\n  user-select: none;\n  -webkit-user-select: none;\n  text-align: center;\n  background: #181818;\n  color: #fff;\n  margin-left: 15px;\n  border-bottom-left-radius: 2px;\n}\n.step-container label:hover {\n  background: #000000;\n}\n.step-container input[name=\u0026#39;toggler\u0026#39;] {\n  display: none;\n}\n.step-container input[name=\u0026#39;toggler\u0026#39;]:checked + .step-dot + .step-content {\n  display: block;\n}\n.step-container input[name=\u0026#39;toggler\u0026#39;]:checked + .step-dot:after {\n  background: #219150;\n  color: #fff;\n}\n.step-container input[name=\u0026#39;toggler\u0026#39;]:checked ~ input:checked + .step-dot:before {\n  background: #219150;\n}\n.step-container input[name=\u0026#39;toggler\u0026#39;]:checked ~ input:not(:checked) + .step-dot {\n  color: #888;\n}\n.step-container input[name=\u0026#39;toggler\u0026#39;]:checked ~ input:not(:checked) + .step-dot:after {\n  border-color: #888;\n  color: #888;\n}\u003C\/div\u003E\u003Cp\u003E\u003Cdiv class=\"codeview\" title=\"HTMLnyah\"\u003E\u0026lt;div class=\u0026quot;step-container\u0026quot;\u0026gt;\n  \u0026lt;input type=\u0026quot;checkbox\u0026quot; id=\u0026quot;step-1\u0026quot; name=\u0026quot;toggler\u0026quot; checked\/\u0026gt;\n  \u0026lt;div class=\u0026quot;step-dot one\u0026quot;\u0026gt;Ready\u0026lt;\/div\u0026gt; \n  \u0026lt;div class=\u0026quot;step-content\u0026quot;\u0026gt;\n    \u0026lt;label for=\u0026quot;step-2\u0026quot;\u0026gt;Next\u0026lt;\/label\u0026gt;         \n    \u0026lt;div class=\u0026quot;text\u0026quot;\u0026gt;BLAH 1\u0026lt;\/div\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;input type=\u0026quot;checkbox\u0026quot; id=\u0026quot;step-2\u0026quot; name=\u0026quot;toggler\u0026quot; \/\u0026gt;\n  \u0026lt;div class=\u0026quot;step-dot two\u0026quot;\u0026gt;Set\u0026lt;\/div\u0026gt;  \n  \u0026lt;div class=\u0026quot;step-content\u0026quot;\u0026gt;\n    \u0026lt;label for=\u0026quot;step-3\u0026quot;\u0026gt;Next\u0026lt;\/label\u0026gt;            \n    \u0026lt;div class=\u0026quot;text\u0026quot;\u0026gt;BLAH 2\u0026lt;\/div\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;input type=\u0026quot;checkbox\u0026quot; id=\u0026quot;step-3\u0026quot; name=\u0026quot;toggler\u0026quot; \/\u0026gt;\n    \u0026lt;div class=\u0026quot;step-dot three\u0026quot;\u0026gt;Go!\u0026lt;\/div\u0026gt;  \n  \u0026lt;div class=\u0026quot;step-content\u0026quot;\u0026gt;\n    \u0026lt;div class=\u0026quot;text\u0026quot;\u0026gt;BLAH 3\u0026lt;\/div\u0026gt;\n  \u0026lt;\/div\u0026gt;\n  \u0026lt;\/div\u0026gt;\u003C\/div\u003E\u003Ch3\u003EToggle Read More - CSS Only\u003C\/h3\u003E\u003Ca class=\"lightbox_img\" href=\"\/\/1.bp.blogspot.com\/-Bvnf31B5KsA\/X1Y4djEG69I\/AAAAAAAAJGw\/hif-QIDzI3Ac2RTJ4XE5jGv3Br8U8ShvQCLcBGAsYHQ\/s400\/Toggle%2BRead%2BMore.png\" style=\"display: block; padding: 1em 0; text-align: center;\"\u003E\u003Cimg alt=\"Toggle Read More\" width=\"320\" data-original-height=\"110\" data-original-width=\"400\" src=\"\/\/1.bp.blogspot.com\/-Bvnf31B5KsA\/X1Y4djEG69I\/AAAAAAAAJGw\/hif-QIDzI3Ac2RTJ4XE5jGv3Br8U8ShvQCLcBGAsYHQ\/s320\/Toggle%2BRead%2BMore.png\"\/\u003E\u003C\/a\u003E\u003Cdiv class=\"codeview\" title=\"CSS Coded\"\u003E.readmo {\n  width: 400px;\n  border: 2px solid #181818;\n  margin: 30px auto;\n  padding: 0px 0 30px;\n  background: white;\n  position: relative;\n}\n.readmo p {\n  padding: 0px 10px 0px;\n  margin-bottom: 10px;\n  max-height: 50px;\n  overflow: hidden;\n  transition: max-height 0.1s ease-in;\n}\n.readmo label {\n  display: block;\n  cursor: pointer;\n  text-align: center;\n  padding: 0px 0 0px;\n  margin: 0px 0 0 0;\n  position: absolute;\n  width: 100%;\n  bottom: 0px;\n  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.94) 95%, white 100%);\n  \/* w3c *\/\n}\n.readmo label:after {\n  content: \u0026quot;\\203A\u0026quot;;\n  color: #999;\n  position: relative;\n  width: 100%;\n  font-size: 32px;\n  padding: 0;\n  display: block;\n  transform: rotate(90deg);\n}\n.readmo label:hover:after {\n  color: #333;\n}\n.readmo input[type=checkbox] {\n  display: none;\n}\n.readmo input[type=checkbox]:checked + label:after {\n  transform: rotate(270deg);\n}\n.readmo input[type=checkbox]:checked ~ p {\n  max-height: 200px;\n  transition: max-height 0.1s ease-in;\n}\u003C\/div\u003E\u003Cp\u003E\u003Cpre lang=\"HTML\"\u003E\u003Ccodec\u003E\u0026lt;div class=\u0026quot;readmo\u0026quot;\u0026gt;\n  \u0026lt;input type=\u0026quot;checkbox\u0026quot; id=\u0026quot;toggler\u0026quot; \/\u0026gt; \n  \u0026lt;label for=\u0026quot;toggler\u0026quot;\u0026gt;\u0026lt;\/label\u0026gt;\n  \u0026lt;p\u0026gt;BLEH BLAH BLOH\u0026lt;\/p\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/codec\u003E\u003C\/pre\u003ESatu source saja kalau dibongkar jadi segitu bro @-) :-SS 8-| =))\u003Cp\u003E\u003Cb\u003E\u003Cred\u003EBONUS\u003C\/red\u003E\u003C\/b\u003E\u003Cp align='center'\u003E\u003Cu onClick=\"window.open('\/\/codepen.io\/ig_design\/pen\/BajVZre');\"\u003EPure CSS Modal\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/avstorm\/pen\/zYraNOq');\"\u003E📦 Button\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/ig_design\/pen\/VwedgWj');\"\u003EPricing - pure css\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/dev_loop\/pen\/PoZBOBx');\"\u003EMenu Hover Interaction\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/argyleink\/pen\/OJMEpGp');\"\u003ECSS Gradient Text\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/chancesq\/pen\/KKVxJwm');\"\u003EPink Lemonade\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/yuhomyan\/pen\/abdRKrM');\"\u003ENeumorphism Social Share Button\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/yuhomyan\/details\/bGEQMLZ');\"\u003EPracticalmorphism Social Share Button\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/havardob\/pen\/eYJPwdb');\"\u003ECard component with floating labels\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/lynnandtonic\/pen\/dyGjvLB');\"\u003ECSS leaning card effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/jkantner\/pen\/eYJboxN');\"\u003ESearch Input Caret Jump\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/equinusocio\/pen\/yLeGZWb');\"\u003EMark text effect on scroll\u003C\/u\u003E w\/ IO - \u003Cu onClick=\"window.open('\/\/codepen.io\/yemon\/pen\/yLeGQwx');\"\u003EImage masking with pure CSS\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/djalilhebal\/pen\/oNbJxzd');\"\u003EDanganronpa click effect\u003C\/u\u003E (first attempt) - \u003Cu onClick=\"window.open('\/\/codepen.io\/alphardex\/pen\/OJNLyOv');\"\u003EMenu Hover Slide Fill\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/amitsheen\/pen\/WNweryv');\"\u003ETurning pages with CSS\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/GeoffreyCrofte\/pen\/OJMaMxa');\"\u003EResponsive components without media-queries\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/yuhomyan\/pen\/OJMejWJ');\"\u003ECandy Color Button Animation\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/vineethtrv\/pen\/NWxZqMM');\"\u003ECSS3 Loader \u0026 Spinners\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/takaneichinose\/pen\/QWyXjNP');\"\u003ENo Javascript Table with Pagination\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/ig_design\/pen\/KKVjpXx');\"\u003ECustom Cursor Effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/chancesq\/pen\/MWKREVg');\"\u003EWarning\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/amitsheen\/pen\/xxZeyjO');\"\u003EDashed Border Generator\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/yuhomyan\/pen\/LYNVVNO');\"\u003EBlack \u0026 White Button\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/vikramcodes\/pen\/WNwbqGp');\"\u003EColor Palette Generator\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/scottyzen\/pen\/ZEWYdZm');\"\u003ERadio button styling\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/airen\/pen\/wvGKRJe');\"\u003ESVG viewBox\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/prathamkumar\/pen\/KKzdXpY');\"\u003EGlowing Text\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/nat-davydova\/pen\/jOqbVwg');\"\u003EFancy Navigation\u003C\/u\u003E (+ hover effects) - \u003Cu onClick=\"window.open('\/\/codepen.io\/chriscoyier\/pen\/OJNVywW');\"\u003EDraw SVG to Canvas and Save to Files\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/Mamboleoo\/pen\/RwarxQa');\"\u003EEven lines background effects on text\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/Octavector\/pen\/yLONLGE');\"\u003ESimple animation timeline\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/KazuyoshiGoto\/pen\/gvzMZK');\"\u003ECSS Spotlight\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/shshaw\/pen\/MoxrPV');\"\u003EHover Highlight Effect\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/codewithjalaj\/pen\/wvGKZNy');\"\u003EPure CSS Project Filter Tabs\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/saracela\/pen\/wvGKjxp');\"\u003ETasty Menu\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/uiswarup\/pen\/XWdXGGV');\"\u003EError 404\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/ddharvesh\/pen\/abNNWze');\"\u003ERipped images\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/domjancik\/pen\/XWdjrQv');\"\u003ECode Scrubber\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/thamaragerigr\/pen\/poyEbmJ');\"\u003E📁Folder 📁 Animation using scss iteration\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/gokul_ramesh\/pen\/rNeMyop');\"\u003EPage Turn Animation using Turn JS\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/aniketkudale\/pen\/GRZrwQW');\"\u003EColor Search\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/jh3y\/pen\/PoNWLKp');\"\u003EColor search engine\u003C\/u\u003E w\/ React \u0026\u0026 GSAP 🎨 - \u003Cu onClick=\"window.open('\/\/codepen.io\/alphardex\/pen\/wvGqmRK');\"\u003EShare Button Hidden Icon\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/saranya-mohan\/pen\/oNxeBbd');\"\u003ELake image with water ripples\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/12afaelPereira\/pen\/wvGrKWZ');\"\u003EFloating Image\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/jfirestorm44\/pen\/vYGZKpo');\"\u003EAnimated Buttons\u003C\/u\u003E - \u003Cu onClick=\"window.open('\/\/codepen.io\/yuhomyan\/pen\/abNEWEr');\"\u003ESoft UI Buttons\u003C\/u\u003E\u003Cp\u003ESilah sobat kunjungi, dijamin maknyus :-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\/6317570398859479771\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"https:\/\/beben-koben.blogspot.com\/2020\/09\/css-only-playground-by-ekrof.html#comment-form","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4918276818492892488\/posts\/default\/6317570398859479771"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/4918276818492892488\/posts\/default\/6317570398859479771"},{"rel":"alternate","type":"text/html","href":"https:\/\/beben-koben.blogspot.com\/2020\/09\/css-only-playground-by-ekrof.html","title":"CSS Only Playground by ekrof"}],"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\/-Egn4eXhxLWE\/X1Ye98uLMxI\/AAAAAAAAJFg\/4pJTTXMTqXgzWT59lW5p0OnHzaJDYBEqACLcBGAsYHQ\/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":"-35.227697736178847 72.4628728 21.392769936178844 142.7753728"}}});