Tutorial Blog for Stylish Blogger

CSS Only Playground by ekrof

2020-09-07T20:43:00.001+07:00

Salah satu kebiasaan gue dalam aktifitas memosting yaitu suka memberikan BONUS 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 ;)

Seperti yg satu ini ekrof on CodePen:

Secara terpisah gue akan membongkar CSS Only Playground by ekrof.

Mobile Sidenav - CSS Only

.nav-mobile { position: fixed; top: 0; left: 0; width: 65px; background: #181818; color: #FFF; padding: 0; margin: 0; cursor: auto; font-size: 18px; list-style-type: none; z-index: 999999; box-shadow: 0 5px 5px -5px #333; } .nav-mobile:after { content: ""; display: table; clear: both; } .nav-mobile svg { height: 45px; width: 65px; } .nav-mobile svg path { fill: #fff; } .nav-mobile svg.icon-close { display: none; } .nav-mobile li { width: 100%; height: 45px; line-height: 46px; text-align: center; float: left; } .nav-mobile li a { display: block; color: #333; width: 100%; height: 100%; text-decoration: none; } .nav-mobile .menu-button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; display: block; } .nav-mobile .menu-button:after { opacity: 0; top: 45px; content: ""; width: 100vw; display: block; position: fixed; height: 100vh; background: rgba(0, 0, 0, 0.5); content: ""; z-index: 9; pointer-events: none; transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1); transition-delay: 0.1s; } .nav-mobile #menu-toggle { display: none; } .nav-mobile #menu-toggle.active ~ .menu-button .icon-close, .nav-mobile #menu-toggle:checked ~ .menu-button .icon-close { display: block; } .nav-mobile #menu-toggle.active ~ .menu-button .icon-open, .nav-mobile #menu-toggle:checked ~ .menu-button .icon-open { display: none; } .nav-mobile #menu-toggle.active ~ .menu-button:after, .nav-mobile #menu-toggle:checked ~ .menu-button:after { opacity: 1; pointer-events: auto; transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1); } .nav-mobile #menu-toggle.active ~ .menu-sidebar, .nav-mobile #menu-toggle:checked ~ .menu-sidebar { transform: translateX(0); transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1); } .nav-mobile .menu-container { width: 65px; float: left; cursor: auto; position: absolute; } .nav-mobile .menu-container .menu-sidebar { box-shadow: 5px 0 5px -5px #333; display: block; width: 65vw; bottom: 0; background: white; color: #333; position: fixed; z-index: 9999999; transform: translateX(-420px); transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1); top: 45px; list-style-type: none; padding: 0; max-width: 400px; } .nav-mobile .menu-container .menu-sidebar .arrow { position: absolute; line-height: 50px; font-size: 32px; color: #f00; top: 0; z-index: 0; } .nav-mobile .menu-container .menu-sidebar .arrow.left { left: 20px; } .nav-mobile .menu-container .menu-sidebar .arrow.right { right: 20px; } .nav-mobile .menu-container .menu-sidebar li { height: 55px; line-height: 55px; font-size: 16px; text-align: left; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-left: 20px; max-width: 380px; } .nav-mobile .menu-container .menu-sidebar li:hover { background: #eee; } .nav-mobile .menu-container .menu-sidebar li .menu-sub { position: fixed; top: 0; right: 0; bottom: 0; width: 0; overflow: hidden; background: white; visibility: hidden; transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); border-left: 1px solid #ccc; list-style-type: none; padding: 0; margin: 0; z-index: 2; max-width: 400px; } .nav-mobile .menu-container .menu-sidebar li .menu-sub li { overflow: hidden; } .nav-mobile .menu-container .menu-sidebar li .menu-sub .menu-sub-title { padding-left: 40px; } .nav-mobile .menu-container .menu-sidebar li .submenu-label { cursor: pointer; width: 100%; height: 100%; display: block; } .nav-mobile .menu-container .menu-sidebar li .submenu-toggle { display: none; } .nav-mobile .menu-container .menu-sidebar li .submenu-toggle.active ~ .menu-sub, .nav-mobile .menu-container .menu-sidebar li .submenu-toggle:checked ~ .menu-sub { width: 65vw; visibility: visible; z-index: 1; transition: width 0.35s cubic-bezier(0, 0, 0.3, 1); }

<ul class="nav-mobile check"> <li></li> <li class="menu-container"> <input id="menu-toggle" type="checkbox"> <label for="menu-toggle" class="menu-button"> <svg class="icon-open" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg> <svg class="icon-close" viewBox="0 0 100 100"><path d="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"/></svg> </label> <ul class="menu-sidebar"> <li><a href="javascript:;">Title I</a></li> <li><a href="javascript:;">Title II</a></li> <li><a href="javascript:;">Title III</a></li> <li> <input type="checkbox" id="sub-one" class="submenu-toggle"> <label class="submenu-label" for="sub-one">Title IV</label> <div class="arrow right">›</div> <ul class="menu-sub"> <li class="menu-sub-title"> <label class="submenu-label" for="sub-one">Back</label> <div class="arrow left">‹</div> </li> <li><a href="javascript:;">Sub-Title IV.1</a></li> <li><a href="javascript:;">Sub-Title IV.2</a></li> <li><a href="javascript:;">Sub-Title IV.3</a></li> </ul> </li> <li> <input type="checkbox" id="sub-two" class="submenu-toggle"> <label class="submenu-label" for="sub-two">Title V</label> <div class="arrow right">›</div> <ul class="menu-sub"> <li class="menu-sub-title"> <label class="submenu-label" for="sub-two">Back</label> <div class="arrow left">‹</div> </li> <li><a href="javascript:;">Sub-Title V.1</a></li> <li><a href="javascript:;">Sub-Title V.2</a></li> <li><a href="javascript:;">Sub-Title V.3</a></li> </ul> </li> </ul> </li> </ul>

Carousel - CSS Only

.carousel-container { list-style-type: none; padding: 0; margin: 30px auto; width: 550px; height: 338px; border-radius: 5px; position: relative; z-index: 0; } .carousel-container .arrow { cursor: pointer; background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.5); display: block; width: 50px; font-size: 62px; text-align: center; bottom: 0; top: 0; line-height: 330px; position: absolute; z-index: 9999; padding-bottom: 4px; padding-top: 2px; border-radius: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .carousel-container .arrow.next { left: 0px; background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent); } .carousel-container .arrow.back { right: 0px; background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent); } .carousel-container .arrow:hover { color: white; } .carousel-container li:nth-child(1) > .dot { margin-left: 44.6%; } .carousel-container .carousel-content { height: 0; overflow: hidden; line-height: 22px; background: #000; position: absolute; top: 0px; border-radius: 5px; box-shadow: 0 5px 5px -5px #333; list-style-type: none; padding: 0; } .carousel-container .carousel-content img { opacity: 0; padding: 0; top: 0; bottom: 0; margin: auto; position: absolute; left: 0; right: 0; max-width: 100%; max-height: 100%; height: inherit; transition: 0.2s ease-in; } .carousel-container .dot { float: left; cursor: pointer; opacity: 1; width: 12px; height: 12px; background: rgba(255, 255, 255, 0.5); position: relative; margin-top: 56%; border-radius: 50%; z-index: 999; margin-right: 8px; display: block; } .carousel-container .dot:hover { background: #fff; } .carousel-container .carousel-toggle { display: none; } .carousel-container .carousel-toggle:checked + .dot, .carousel-container .carousel-toggle.active + .dot { background: #fff; } .carousel-container .carousel-toggle:checked ~ .carousel-content, .carousel-container .carousel-toggle.active ~ .carousel-content { height: 100%; width: 100%; } .carousel-container .carousel-toggle:checked ~ .carousel-content img, .carousel-container .carousel-toggle.active ~ .carousel-content img { opacity: 1; }

Tab Container - CSS Only

.tab-container { list-style-type: none; padding: 0; margin: 60px auto; max-width: 350px; position: relative; background: #fff; } .tab-container:after { content: ""; display: table; clear: both; } .tab-container ul { list-style-type: none; padding: 0; } .tab-container .arrows { display: block; width: 60px; font-size: 32px; bottom: 10px; right: 0px; position: absolute; } .tab-container .arrows label { display: inline-block; cursor: pointer; color: #aaa; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-left: 5px; } .tab-container .arrows label:hover { color: #333; } .tab-container .tab-content-container { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; height: 0; opacity: 0; overflow: hidden; line-height: 22px; background: #fff; position: absolute; top: 42px; padding: 0px 40px 0 20px; border: 2px solid #181818; border-top: 0; box-shadow: 0 5px 5px -5px #333; } .tab-container .tab-content-container .tab-content { opacity: 0; padding: 15px 0; min-height: 185px; transition: opacity 0.1s ease-in; } .tab-container .tab { outline: 0; float: left; cursor: pointer; opacity: 1; width: 25%; line-height: 40px; display: block; margin: 0; position: relative; background: #181818; color: #fff; text-align: center; border-top: 2px solid #181818; border-right: 2px solid #181818; box-sizing: border-box; } .tab-container .tab.l-b { border-left: 2px solid #181818; } .tab-container .tab:hover { background: #000000; } .tab-container .tab-toggle { display: none; } .tab-container .tab-toggle.active + .tab, .tab-container .tab-toggle:checked + .tab { background: #fff; color: #333; } .tab-container .tab-toggle.active ~ .tab-content-container, .tab-container .tab-toggle:checked ~ .tab-content-container { height: auto; opacity: 1; } .tab-container .tab-toggle.active ~ .tab-content-container .tab-content, .tab-container .tab-toggle:checked ~ .tab-content-container .tab-content { opacity: 1; } .tab-container .tab-toggle.active ~ .tab-content-container .tab-content label, .tab-container .tab-toggle:checked ~ .tab-content-container .tab-content label { opacity: 1; }

<ul class="tab-container radio"> <li> <input class="tab-toggle" id="tab-1" type="radio" name="toggle" checked /> <label data-title="Tab 1" class="tab l-b" for="tab-1">Tabs</label> <ul class="tab-content-container"> <li class="tab-content"> 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. This is a testing text to test the tab content container. Lorem Ipsum dolor sit amet! <div class="arrows"> <label class="back" for="tab-4">‹</label> <label class="next" for="tab-2">›</label> </div> </li> </ul> </li> <li> <input class="tab-toggle" id="tab-2" type="radio" name="toggle" /> <label class="tab" for="tab-2">Are</label> <ul class="tab-content-container"> <li class="tab-content"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <div class="arrows"> <label class="back" for="tab-1">‹</label> <label class="next" for="tab-3">›</label> </div> </li> </ul> </li> <li> <input class="tab-toggle" id="tab-3" type="radio" name="toggle"/> <label class="tab" for="tab-3">Pretty</label> <ul class="tab-content-container"> <li class="tab-content"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <div class="arrows"> <label class="back" for="tab-2">‹</label> <label class="next" for="tab-4">›</label> </div> </li> </ul> </li> <li> <input class="tab-toggle" id="tab-4" type="radio" name="toggle"/> <label class="tab" for="tab-4">Cool</label> <ul class="tab-content-container"> <li class="tab-content"> This is the final content for the tab example. <div class="arrows"> <label class="back" for="tab-3">‹</label> <label class="next" for="tab-1">›</label> </div> </li> </ul> </li> </ul>

Accordion - CSS Only

.accordion-container { width: 300px; margin: 60px auto; border: 2px solid #181818; border-radius: 4px; box-shadow: 0 5px 5px -5px #333; list-style-type: none; padding: 0; } .accordion-container ul { list-style-type: none; padding-left: 0; } .accordion-container .accordion-category { position: relative; background: #fff; } .accordion-container .accordion-category .accordion-title { padding-left: 20px; height: 40px; font-size: 18px; line-height: 40px; background: #181818; color: #fff; position: relative; display: block; cursor: pointer; } .accordion-container .accordion-category .accordion-title:hover { background: #000000; } .accordion-container .accordion-category .accordion-items { max-height: 0; height: 0; margin: 0; overflow: hidden; transition: 0.6s ease-in; } .accordion-container .accordion-category .accordion-items li { padding: 5px 20px; } .accordion-container .accordion-category .accordion-items li:first-child { padding-top: 10px; } .accordion-container .accordion-category .accordion-items li:last-child { padding-bottom: 10px; } .accordion-container .accordion-category input { display: none; } .accordion-container .accordion-category input.active ~ .accordion-items, .accordion-container .accordion-category input:checked ~ .accordion-items { height: auto; max-height: 900px; -webkit-transform: translate3d(0, 0, 0); } .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 { content: "\203A"; position: absolute; width: 40px; font-size: 32px; right: 0; padding-left: 15px; top: 0; bottom: 0; transform: rotate(90deg); }

<ul class="accordion-container radio"> <li class="accordion-category"> <input type="radio" name="a-toggle" id="one" checked> <label for="one" class="accordion-title">Accordions</label> <ul class="accordion-items"> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul> </li> <li class="accordion-category"> <input id="two" type="radio" name="a-toggle"> <label for="two" class="accordion-title">Condense</label> <ul class="accordion-items"> <li>Item A</li> <li>Item B</li> </ul> </li> <li class="accordion-category"> <input id="tre" type="radio" name="a-toggle"> <label for="tre" class="accordion-title">Stuff</label> <ul class="accordion-items"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </ul>

Modal Box Dialog - CSS Only

.modal-container { margin: 60px auto; padding-top: 0px; position: relative; width: 160px; } .modal-container .modal-btn { display: block; margin: 0 auto; color: #fff; width: 160px; height: 50px; line-height: 50px; background: #181818; font-size: 22px; border: 0; border-radius: 3px; cursor: pointer; text-align: center; box-shadow: 0 5px 5px -5px #333; transition: background 0.3s ease-in; } .modal-container .modal-btn:hover { background: #000000; } .modal-container .modal-content, .modal-container .modal-backdrop { height: 0; width: 0; opacity: 0; visibility: hidden; overflow: hidden; cursor: pointer; transition: opacity 0.2s ease-in; } .modal-container .modal-close { color: #aaa; position: absolute; right: 5px; top: 5px; padding-top: 3px; background: #fff; font-size: 16px; width: 25px; height: 25px; font-weight: bold; text-align: center; cursor: pointer; } .modal-container .modal-close:hover { color: #333; } .modal-container .modal-content-btn { position: absolute; text-align: center; cursor: pointer; bottom: 20px; right: 30px; background: #181818; color: #fff; width: 50px; border-radius: 2px; font-size: 14px; height: 32px; padding-top: 9px; font-weight: normal; } .modal-container .modal-content-btn:hover { color: #fff; background: #000000; } .modal-container #modal-toggle { display: none; } .modal-container #modal-toggle.active ~ .modal-backdrop, .modal-container #modal-toggle:checked ~ .modal-backdrop { background-color: rgba(0, 0, 0, 0.6); width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 9; visibility: visible; opacity: 1; transition: opacity 0.2s ease-in; } .modal-container #modal-toggle.active ~ .modal-content, .modal-container #modal-toggle:checked ~ .modal-content { opacity: 1; background-color: #fff; max-width: 400px; width: 400px; height: 280px; padding: 10px 30px; position: fixed; left: calc(50% - 200px); top: 12%; border-radius: 4px; z-index: 999; pointer-events: auto; cursor: auto; visibility: visible; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6); } @media (max-width: 400px) { .modal-container #modal-toggle.active ~ .modal-content, .modal-container #modal-toggle:checked ~ .modal-content { left: 0; } }

<div class="modal-container check">
  <input id="modal-toggle" type="checkbox">
  <label class="modal-btn" for="modal-toggle">Modal</label> 
  <label class="modal-backdrop" for="modal-toggle"></label>
  <div class="modal-content">
    <label class="modal-close" for="modal-toggle">&#x2715;</label>
    <h2>Modal title</h2><hr />
    <p>Hello from inside the modal!</p> 
    <label class="modal-content-btn" for="modal-toggle">OK</label>   
  </div>          
  </div>

Make ToolTip Click/Hover - CSS Only

.tooltip-container { margin: 60px auto; padding-top: 0px; position: relative; width: 160px; } .tooltip-container .tooltip-btn { display: block; margin: 0 auto; color: #fff; width: 160px; height: 50px; line-height: 50px; background: #181818; font-size: 22px; border: 0; border-radius: 3px; cursor: pointer; text-align: center; box-shadow: 0 5px 5px -5px #333; transition: background 0.3s ease-in; } .tooltip-container .tooltip-btn:hover { background: #000000; } .tooltip-container .tooltip-btn.tooltip-toggle:hover ~ .tooltip-content { opacity: 1; background-color: #fff; max-width: 400px; width: 200px; min-height: 70px; padding: 0px 20px; position: absolute; left: calc(50% - 100px); top: 145%; border-radius: 4px; z-index: 999; pointer-events: auto; cursor: auto; visibility: visible; overflow: visible; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6); } @media (max-width: 400px) { .tooltip-container .tooltip-btn.tooltip-toggle:hover ~ .tooltip-content { left: 0; } } .tooltip-container .tooltip-btn.tooltip-toggle:hover ~ .tooltip-content:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ffffff transparent; position: absolute; top: -10px; left: 30px; } .tooltip-container .tooltip-content, .tooltip-container .tooltip-backdrop { height: 0; width: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: opacity 0.2s ease-in; } .tooltip-container #tooltip-toggle { display: none; } .tooltip-container #tooltip-toggle.active ~ .tooltip-backdrop, .tooltip-container #tooltip-toggle:checked ~ .tooltip-backdrop { background-color: transparent; width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 9; visibility: visible; opacity: 1; transition: opacity 0.2s ease-in; } .tooltip-container #tooltip-toggle.active ~ .tooltip-content, .tooltip-container #tooltip-toggle:checked ~ .tooltip-content { opacity: 1; background-color: #fff; max-width: 400px; width: 200px; min-height: 70px; padding: 0px 20px; position: absolute; left: calc(50% - 100px); top: 145%; border-radius: 4px; z-index: 999; pointer-events: auto; visibility: visible; overflow: visible; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6); } @media (max-width: 400px) { .tooltip-container #tooltip-toggle.active ~ .tooltip-content, .tooltip-container #tooltip-toggle:checked ~ .tooltip-content { left: 0; } } .tooltip-container #tooltip-toggle.active ~ .tooltip-content:before, .tooltip-container #tooltip-toggle:checked ~ .tooltip-content:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ffffff transparent; position: absolute; top: -10px; left: 30px; }

<div class="tooltip-container check">
  <input id="tooltip-toggle" type="checkbox">
  <label class="tooltip-btn" for="tooltip-toggle">Tooltip click</label> 
  <label class="tooltip-backdrop" for="tooltip-toggle"></label>
  <div class="tooltip-content">
    <p>Hello from inside the CSS tooltip!</p> 
  </div>          
</div>

<div class="tooltip-container">
  <div class="tooltip-btn tooltip-toggle">Tooltip hover</div> 
  <div class="tooltip-content">
    <p>Hello from inside the CSS tooltip!</p> 
  </div>          
  </div>

5-star rating - CSS Only

.star-container { text-align: center; font-size: 0; } .star-container label { display: inline-block; cursor: pointer; } .star-container label:after { content: "\2605"; font-size: 46px; color: #999; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } .star-container label:hover:after { color: #F89406; } .star-container input { display: none; } .star-container #one:checked ~ label[for=one]:after, .star-container #two:checked ~ label[for=two]:after, .star-container #three:checked ~ label[for=three]:after, .star-container #four:checked ~ label[for=four]:after, .star-container #five:checked ~ label[for=five]:after { color: #F89406; } .star-container #two:checked ~ label[for=one]:after { color: #F89406; } .star-container #three:checked ~ label[for=one]:after, .star-container #three:checked ~ label[for=two]:after { color: #F89406; } .star-container #four:checked ~ label[for=one]:after, .star-container #four:checked ~ label[for=two]:after, .star-container #four:checked ~ label[for=three]:after { color: #F89406; } .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 { color: #F89406; }

<div class="star-container">
  <input type="radio" name="starred" id="five"/> 
  <input type="radio" name="starred" id="four"/> 
  <input type="radio" name="starred" id="three"/>
  <input type="radio" name="starred" id="two"/>
  <input type="radio" name="starred" id="one"/>
  <label for="one"></label>
  <label for="two"></label>
  <label for="three"></label>
  <label for="four"></label>
  <label for="five"></label>
  </div>

Steps Container - CSS Only

.step-container { width: 400px; margin: 30px auto; min-height: 200px; position: relative; } .step-container:after { content: ""; display: table; clear: both; } .step-container .step-content { display: none; border: 2px solid #181818; border-radius: 2px; background: #fff; height: 100%; position: absolute; top: 70px; overflow-x: auto; } .step-container .step-content .text { padding: 15px; } .step-container .step-dot { float: left; width: 33.333%; text-align: center; padding-top: 40px; position: relative; } .step-container .step-dot:after { content: ""; width: 30px; height: 30px; background: #fff; color: #666; display: block; border-radius: 50%; border: 2px solid #219150; padding-top: 3px; position: absolute; top: 0px; left: 40%; z-index: 99; box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.3); transition: 0.1s ease-in; } .step-container .step-dot.one:after { content: "1"; } .step-container .step-dot.two:after { content: "2"; } .step-container .step-dot.three:after { content: "3"; } .step-container .step-dot.one:before { display: none; } .step-container .step-dot:before { content: ""; width: 100%; height: 4px; background: #999; display: block; position: absolute; top: 12px; left: -41%; box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.3); transition: 0.1s ease-in; } .step-container label { cursor: pointer; padding: 10px 0; display: block; width: 100px; float: right; user-select: none; -webkit-user-select: none; text-align: center; background: #181818; color: #fff; margin-left: 15px; border-bottom-left-radius: 2px; } .step-container label:hover { background: #000000; } .step-container input[name='toggler'] { display: none; } .step-container input[name='toggler']:checked + .step-dot + .step-content { display: block; } .step-container input[name='toggler']:checked + .step-dot:after { background: #219150; color: #fff; } .step-container input[name='toggler']:checked ~ input:checked + .step-dot:before { background: #219150; } .step-container input[name='toggler']:checked ~ input:not(:checked) + .step-dot { color: #888; } .step-container input[name='toggler']:checked ~ input:not(:checked) + .step-dot:after { border-color: #888; color: #888; }

<div class="step-container"> <input type="checkbox" id="step-1" name="toggler" checked/> <div class="step-dot one">Ready</div> <div class="step-content"> <label for="step-2">Next</label> <div class="text">BLAH 1</div> </div> <input type="checkbox" id="step-2" name="toggler" /> <div class="step-dot two">Set</div> <div class="step-content"> <label for="step-3">Next</label> <div class="text">BLAH 2</div> </div> <input type="checkbox" id="step-3" name="toggler" /> <div class="step-dot three">Go!</div> <div class="step-content"> <div class="text">BLAH 3</div> </div> </div>

Toggle Read More - CSS Only

.readmo { width: 400px; border: 2px solid #181818; margin: 30px auto; padding: 0px 0 30px; background: white; position: relative; } .readmo p { padding: 0px 10px 0px; margin-bottom: 10px; max-height: 50px; overflow: hidden; transition: max-height 0.1s ease-in; } .readmo label { display: block; cursor: pointer; text-align: center; padding: 0px 0 0px; margin: 0px 0 0 0; position: absolute; width: 100%; bottom: 0px; 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%); /* w3c */ } .readmo label:after { content: "\203A"; color: #999; position: relative; width: 100%; font-size: 32px; padding: 0; display: block; transform: rotate(90deg); } .readmo label:hover:after { color: #333; } .readmo input[type=checkbox] { display: none; } .readmo input[type=checkbox]:checked + label:after { transform: rotate(270deg); } .readmo input[type=checkbox]:checked ~ p { max-height: 200px; transition: max-height 0.1s ease-in; }

<div class="readmo">
  <input type="checkbox" id="toggler" /> 
  <label for="toggler"></label>
  <p>BLEH BLAH BLOH</p>
</div>

Satu source saja kalau dibongkar jadi segitu bro @-) :-SS 8-| =))

BONUS

Pure CSS Modal - 📦 Button - Pricing - pure css - Menu Hover Interaction - CSS Gradient Text - Pink Lemonade - Neumorphism Social Share Button - Practicalmorphism Social Share Button - Card component with floating labels - CSS leaning card effect - Search Input Caret Jump - Mark text effect on scroll w/ IO - Image masking with pure CSS - Danganronpa click effect (first attempt) - Menu Hover Slide Fill - Turning pages with CSS - Responsive components without media-queries - Candy Color Button Animation - CSS3 Loader & Spinners - No Javascript Table with Pagination - Custom Cursor Effect - Warning - Dashed Border Generator - Black & White Button - Color Palette Generator - Radio button styling - SVG viewBox - Glowing Text - Fancy Navigation (+ hover effects) - Draw SVG to Canvas and Save to Files - Even lines background effects on text - Simple animation timeline - CSS Spotlight - Hover Highlight Effect - Pure CSS Project Filter Tabs - Tasty Menu - Error 404 - Ripped images - Code Scrubber - 📁Folder 📁 Animation using scss iteration - Page Turn Animation using Turn JS - Color Search - Color search engine w/ React && GSAP 🎨 - Share Button Hidden Icon - Lake image with water ripples - Floating Image - Animated Buttons - Soft UI Buttons

Silah sobat kunjungi, dijamin maknyus :-bd

Make the Shadow Effect Match the Color of the Image

2020-07-09T17:56:00.000+07:00

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

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

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

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

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

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

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

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

BONUS:

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

Happy blogging :-bd

The Magic of CSS Code, It's Awesome

2020-06-08T20:45:00.000+07:00

Ketika 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 source link dan melakukan sedikit utak-atik apa bisa dijadikan bahan postingan atau tidak ;)) Dua contoh hal yg membuat gue berdecak ~~towewewww~~ creativity pure using CSS :-O

Kadang 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 @-)

.compare { display: flex; align-items: center; margin: 5px auto; width: 100%; height: 250px; padding: 10px; color: #31808c; overflow: hidden; background-color: #dbe0e4; text-align: center; font: 1.05rem/1 'Rubik', sans-serif; box-sizing: border-box; } .toggle-column { flex: 1; } .toggle-column img { width: 65%; max-height: 55vh; object-fit: contain; } p { text-align: left; } .vs-column { height: 100%; display: flex; flex-direction: column; } .vs-column::before, .vs-column::after { content: ''; flex: 1; align-self: center; border-left: 2px dashed #c9baa7; } .vs { width: 50px; height: 50px; margin: 20px 10px; border-radius: 50%; color: #f5f4ef; font-size: 1.5rem; line-height: 50px; background-color: #c9baa7; }

<div class="compare">
<div class="toggle-column">
  <img src="PATH_IMG" />
</div>
<div class="vs-column">
  <div class="vs">vs</div>
</div>
<div class="toggle-column">
<p>BLAH-BLEH-BLOH</p>
</div>
</div>

Silahkan 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 :)>-

BON US

Hover with Clip-Path Effect - Sliding tabs | CSS transitions only - Image Compare Viewer - CSS Speech Bubble (svg data uri) - Holiday Feature Folding Cards - Expand Information - NOISY IMAGE GRID - Image Hovers - Card Reveal - CPC - Image hover - Shifting Image on Hover - Image Magnifier Glass on Hover - CSS Image Hover Effects - Random Picker (Image Hover) - Extreme Hover - HTML + CSS - CSS Clip-Path Hover Effect - Custom Search - TGMT - Morse - CSS Image Gallery - Declaring Bits of Unselectable Text - CSS Image Hover Effects - Very Simple Pure CSS Carousel - CSS-only modal - CSS variable image zoom 🔍😅 - Select All... Then Select Some - A Pen by ycw - Pure CSS "Authentication" 😅🔒 - Pure-CSS Tooltips - A Very Simple Pure CSS 3D Room - px2rem - CSS Only, Content Overflow Shadows - Button Neon (: hover fx) - Border Buttons - Social Media Buttons Hover Effect - Pure CSS navigation toggle animation - Movie Ticket Animation - Loop 23 - Gradient border - Button Hover

Keder euy mosting pake editor blog baru #-o mau upload gambar saja jadi ribet :))

Happy blogging lah \m/

Zwei coole CSS Tricks von Dr. Robin

2020-04-09T16:45:00.000+07:00

Berawal 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
Pertama gue mendapatkan ini colorful shadows! 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!

Sobat 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.Beberapa hal yg mesti diperhatikan jika sobat menginginkan trik ini masuk ke blog kalian:

Browser sudah support CSS3 transform & filter
Trick ini akan menggunakan 2 tags image!
Niat & keinginan dalam penerapan ke dalam template :D

.colors_shadows {
  position: relative;
  padding: 0;
  width: 500px;
  max-width: 90vw;
  margin: 25px auto;
}
.light-shadow {
  transform: translate3d(0,0,0);
  filter: blur(5px) brightness(1.1) saturate(1);
}
.large-shadow {
  transform: translate3d(0,5px,0);
  filter: blur(15px) brightness(1) saturate(1);
}
.colors_shadows::after, .large-shadow, .light-shadow {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-size: 100% 100%;
  filter: blur(15px) saturate(2);
}
.colors_shadows img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

<div class="colors_shadows">
 <img src="URL-IMAGE" alt="" />
 <img src="URL-IMAGE" class="large-shadow" alt="" />
</div>

Gue sudah buat 2 biji efek filter light-shadow and large-shadow Kalian tinggal panggil salah satu atau mau dipakai dua²nya (class="large-shadow" or class="light-shadow") Kreasikan juga dengan menambahkan kode CSS ke dalam property declaration.

Masih ingat dengan hal diatas Pertama gue mendapatkan ini..., sebagai bloglang gue telusuri dari mana sumbernya. Ternyata mentok ke cosha. Silah kunjungi halaman tsb jika ingin memakai versi script dan tentunya memakai shiny new picture tag :P
Petualangan masih berlanjut, aku satroni web 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 (~~kue kelezzz lapis~~) :))

Ketika melakukan hover/sorot ke gambar, maka akan sirna gradient background and title as protector!Aslinya memakai script dengan berbagai embel-embel keren lain yg dibawanya. Gue hidupkan developer tools browser, dan mulai beraksi comot sana-sini dan diperoleh...

.robin_title {
 font-size: 202%;
 position: absolute;
 text-align: center;
 transition: opacity .5s ease-in-out;
}
.robin_image {
 z-index: -1;
 object-fit: cover;
 object-position: center;
}
.robin_image,.robin_link {
 padding: 0;
 height: auto;
 width: 500px;
 max-width: 100%;
 margin: 0 auto;
 position: relative;
}
.robin_link {
 z-index: 1;
 display: flex;
 color: white;
 overflow: hidden;
 border-radius: 15px;
 align-items: center;
 text-decoration: none;
 justify-content: center;
 transition: transform .5s ease-in-out;
}
.robin_link:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 border-radius: inherit;
 box-sizing: border-box;
 background-color: #444;
 transition: opacity .5s ease-in-out;
}
.robin_link.pengki:after {
 background: linear-gradient(180deg,rgba(58,28,113,.5),rgba(253,187,45,.5));
}
.robin_link.pingki:after {
 background: linear-gradient(90deg,rgba(255,0,132,.5),rgba(255,255,255,.5));
}
.robin_link:hover {
 transform: scale(1.05);
}
.robin_link:hover .robin_title,.robin_link:hover:after {
 opacity: 0;
}

<a class="robin_link pingki" href="LINK-TUJUAN" title="">
 <h2 class="robin_title">PINGKI</h2>
 <img class="robin_image" src="URL-IMAGE" alt=""/>
</a>

Gue sudah buat 2 biji efek linear pengki dan pingki Kalian tinggal panggil salah satu atau mau dipakai dua²nya (class="robin_link pingki" or class="robin_link pengki") Kreasikan juga dengan menambahkan kode CSS ke dalam property declaration. Biar lebih full stylish :-)
NB:

Saya hanya seorang blogger dengan guru bernama ONE (Otodidak NEkat). Harap maklum jika ada kesalahan dalam aturan pengkodean. Koreksi dan benarkan menurut aturan oleh kalian ya :)

BONUS:

Button Effect - 3D Editable Text Effect - Rainbow Effect - Animate feTurbulence Filter - Turbulence - Color: Your name as a color - Password generator - Card hover FX - Wave Text - dashed border icon animations - Native smooth scrolling - How to Build a Simple Full-Screen Slideshow With Vanilla JavaScript - Placeholder support for contentEditable elements, without JavaScript - Useful Broken Images - Stacked rainbow cards - Extract colors from Image (React) - Neumorphic Color Palette - Digital Bookshelf - Parallax Horizontal Image Scroller -- No JS! - Glass Effect with CSS Masks - Exciting Multi-line Highlights - Buttons popper - Adding an image to a document... - Tucked Corners - AppleTV 3D Parallax Cards - Dynamic Active Table of Contents - Card Hover Interaction | HTML & CSS - Goldsmiths Uni - glitch - Search animation - Only CSS - Masked & Skewed - Website Hero

Salam COVID-19 bin corona :-&

Make Search Box use placeholder-shown selector Technique

2020-02-15T19:30:00.000+07:00

2020 telah tiba! Pembaharuan terjadi disana-sini. Tidak terkecuali pemberhentian layanan dimana-mana :D Jarang melakukan kegiatan posting, sampai² lupa rumus/jurus gue dalam mengetik =)) ~~Ngemeng-ngemeng~~ tentang pembaharuan (blogspot), mungkin diantara sobat sudah melihatnya! Terlihat pada bagian dashboard blog sudah lebih full stylish saat ini. Sebagai salah satu mesin pencari yang digandrungi orang google, pada bagian search box mengalami perubahan!Sekarang AA Koben mau coba berbagi cara membuat kotak pencarian yg seperti itu! Saat anda mengetik pada kotak pencarian akan muncul icon search (🔍) imut-imut :(|) Tidak sama dengan google, tetapi konsepnya yg mirip.Demo I & source kode

Demo II & source kode
Yang terakhir, mirip dengan yang ke-II, tetapi diberikan sedikit sentuhan efek B-)
Demo III & source kode

Harap diperhatikan, disini gue hanya memberikan kode CSS. Adapun penulisan syntax <form> pencarian sobat ganti sendiri :)>-

Original idea by Liam on codepen with title :placeholder-shown selector
Bonus link codepen selection buat kalian yg cari ide/bahan postingan:

simple popover - Sign Up Modal - Buttons UI Kit - double exposure carousel slider - Build a Filtering Component in Pure CSS - The more menu - Accordion / Dropdown / Toggle Pure CSS - My First Color Tools Project - Polygon-style gradient pull quote - CSS TABS - Pure CSS menu cutout effect - BBC News style joined bullets - Pure CSS Accordion - 5-Way Gradient Generator - Pure CSS Card Carousel - Tabs - CSS + JS - Old Typewriter Text Effect - Center Focus Feature Section - Pure CSS Animated Search Bar - CSS-Only Gooey Content Toggle - Gradient Ordered List - Scrolling table - -webkit-box-reflect & SVG filters - Social Menu Share with SVG - Social Media Share Cards - Floating Aside HTML Buttons - CSS Grid Menu - Awesome Flexbox - Details element with custom arrow - Scroll Based Animation - Drop Spread Blur - Reveal Effect Text Animation - Image slideshow HTML and CSS only - Drag-n-drop sticky, with no JS! - PUZZLE MAKER - Blur background on click (modal window) - The circular menu - Video created using HTML and CSS only - Taking advantage of :target / Proposing :target-within - Underline.js - Sliding Tile Puzzle with Custom Images in Vue - Info Button - Amazing Button Hover - React select and crop image - Box skew hover - Image glitch effect - Banners - final demo - Social Media Buttons - Link & Button - Shatter Effect - Locked input field - CSS only - Gradient Playground - Styled "select" options using CSS3 and Flexbox - Color Search w/ React Hooks 🎨 - Find emoji by description - Tabs Navigation UI - Night Party Mode - CSS Only - Social Icons - Hover Effect - Challenges: CSS Strange Nav - magnifying image view with zoom 🔍 - Input group :focus-within - Palette Panda - Simple image comparison slider - Line distortion - Scroll page loader (pure CSS no JS) - Animated Verbs - Animated Portrait w/ GSAP 2.0 - Mini Music Player - VueJS - CSS Modal - (2019) Custom Checkbox, Radio, Switch - CSS Grid-ient - Gradient color button with hover glow - Multiplication Lookup Table - 50+ Pure CSS3 Preloaders (Latest) - Share Selected Text - Modern Gradient Buttons - Happy Fun Nav - Dark mode toggle expanding circle - CSS Swinging Text Animation - LazyLoading Videos with IntersectionObserver - Instagram downloader - 2019 Mood Calendar - TechGirlz CSS Animation (Finished) - Social Animation - Dribbble//Simple Icons - Menu Interaction - One background for multiple divs - Pure CSS Responsive List & Tooltips - Only CSS: Sunset Bird (Orange&Blue) - Footnotes - RSS Single Element - Random Password Generator - Blur Reveal - Navigation Menu w/ Animations - Navigation with Sub-Navigation (CPC) - Document Title Ticker - Web Design - Hover, I dare you! - CSS Only - Multi-line spanning animated underline. - Image Password Strength - Link Fill on Hover - Image Animation Effects - Utilities - Fullscreen Nav - Horizontal - Section numbering with CSS - Stylish Social Buttons - CSS only slider - smallest slider ever w/o JS - cpc-checkbox-hack - Magic with details // CSS Only Dropdown - Animated Search Interaction - 3D CSS Transform Rotation Builder - Menu Hover Fill Text - Pure CSS circular border patterns - Cut/Copy/Paste - Gradient Text Overlay - Color Wheel - Social Icon Gooey Effects - Bring Back the Marquee - Multi line text underline CSS - Clip Path Hover Animation - Keyboard accessible

Adios Amigos...Parantos...Yuk Babay :-h

Make Awesome Box Modal & Accordion Pure using CSS

2019-04-20T19:40:00.002+07:00

Ada sedikit update os windows di tempat gawe, yang dulu masih pakai windows XP, sekarang dipasangin Windows Embedded 8.1 Industry Enterprise. Ternyata selama belum update windOwS, browser yg gue pakai mentok di versi yg hanya support terhadap Win-XP! Dampaknya gw tidak bisa melihat hasil karya dari para developer and master :( Setelah update os & browser...WOW ternyata kreasi orang pada keren punya B-) + makin pusing kodingnye :-O
Begitulah curcol edisi kali ini, dan pertama kali masuk ke dashboard blogger ada notification:Karena keterbatasan ilmu & pengetahuan saya, maka artikel sekarang akan mengulang tentang bagaimana membuat beautyful CSS modal n' awesome accordion menu murni hanya menggunakan CSS :)

Pure CSS Modals A Pen By Akshay

.modal-open {
color: inline;
cursor: pointer;
display: inline;
}
.modal-label {
position: relative;
}
.modal-radio {
opacity: 0;
position: absolute;
visibility: hidden;
}
.modal {
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
transform: scale(0);
transition: opacity .25s, transform .25s;
z-index: 99;
}
.modal2 {
transform: scale(0.8) translate(0,-100%);
transition: transform .35s,opacity .35s;
}
.modal3 {
transform: translate(0,100%) scale(.9);
}
.modal4 {
transform: scale(0) rotate(180deg);
}
#modal-open:checked + .modal {
opacity: 1;
transform: scale(1);
}
#modal-open2:checked + .modal2 {
transform: scale(1) translate(0,0);
opacity: 1;
}
#modal-open3:checked + .modal3 {
transform: scale(1) translate(0,0);
opacity: 1;
}
#modal-open4:checked + .modal4 {
transform: scale(1) rotate(0deg);
opacity: 1;
}
.overlay {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.789);
}
.modal .content {
width: 70%;
top: 15%;
left: 15%;
height: 300px;
padding: 20px;
max-height: 70%;
background: #fff;
border-radius: 15px;
position: absolute;
box-shadow: 0 3px 15px -2px #ccc;
}
.close-btn {
width: 30px;
height: 30px;
top: 10px;
right: 20px;
cursor: pointer;
position: absolute;
border-radius: 50%;
border: 2px solid #f44336;
}
.close-btn:after,.close-btn:before {
content: "";
width: 70%;
height: 2px;
left: 15%;
top: 50%;
position: absolute;
background: #f44336;
top: calc(50% - 1px);
transform-origin: 50% 50%;
transform: rotate(45deg);
}
.close-btn:before {
transform: rotate(-45deg);
}
.action-btn {
color: #fff;
border-radius: 15px;
display: inline-block;
padding: 10px 20px;
background: #4caf50;
}

Harap diperhatikan kode CSS tersebut! Karena kode itu berisikan 4 jenis gaya MODAL BOX. Jika sobat ingin memakai satu gaya saja, hapus selector dan isi kode dari .modal2, .modal3, .modal4, #modal-open2:checked + .modal2, #modal-open3:checked + .modal3, #modal-open4:checked + .modal4
Berikut cara/contoh penulisan taging HTML untuk ke-4 gaya modal.

<div class="content">
<label class="modal-open modal-label" for="modal-open">
<p>Open Modal 1</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open" class="modal-radio"/>
<div class="modal">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 1</p>
</div>
</div>
</div>

<div class="content">
<label class="modal-open modal-label" for="modal-open2">
<p>Open Modal 2</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open2" class="modal-radio"/>
<div class="modal modal2">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 2</p>
</div>
</div>
</div>

<div class="content">
<label class="modal-open modal-label" for="modal-open3">
<p>Open Modal 3</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open3" class="modal-radio"/>
<div class="modal modal3">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 3</p>
</div>
</div>
</div>

<div class="content">
<label class="modal-open modal-label" for="modal-open4">
<p>Open Modal 4</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open4" class="modal-radio"/>
<div class="modal modal4">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 4</p>
<label class="modal-label action-btn">
OK <input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
</div>
</div>

Maybe you want to try Interactive Modal with Funny Animations? Please explore coidea.website for other awesome content. Beres urusan modol lanjut pada topik kedua yaitu akordion!

Awesome accordion menu using only HTML & CSS A Pen By Ahmad Emran

.mainMenu {
width: 100%;
display: block;
border-radius: 10px;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.item {
border-top: 1px solid #444857;
overflow: hidden;
}
.btn {
display: block;
padding: 15px 20px;
background-color: #1a1b1f;
color: #aaaebc;
position: relative;
}
.btn:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right:8px solid transparent;
border-top:10px solid #1a1b1f;
right: 15px;
bottom: -10px;
z-index: 9;
}
/*
.btn i {margin-right: 10px;}
*/
.subMenu {
background: #333641;
overflow: hidden;
transition: max-height 0.7s;
max-height: 0;
}
.subMenu a {
display: block;
padding: 15px 20px;
color: #fff;
font-size: 14px;
border-bottom: 1px solid #1a1b1f;
position: relative;
}
.subMenu a:before {
content: '';
opacity: 0;
transition: opacity 0.3s;

}
.subMenu a:hover:before {
content: '';
position: absolute;
height: 0;
width: 6px;
left: 0;
top:0;
opacity: 1;
/* background-color: #d8d824; */
border-top: 24px solid transparent;
border-left: 11px solid #fff;
border-bottom: 24px solid transparent;
}
.subMenu a:after{
content: '';
opacity: 0;
transition: opacity 0.3s;

}
.subMenu a:hover:after {
content: '';
position: absolute;
height: 0;
width: 6px;
right: 0px;
top:0;
opacity: 1;
/* background-color: #d8d824; */
border-top: 24px solid transparent;
border-right: 11px solid #fff;
border-bottom: 24px solid transparent;
}
.subMenu a:hover {
background: #273057;
background: -moz-linear-gradient(top, #333641 0%, #333641 50%, #666B7A 51%, #666B7A 100%);
background: -webkit-linear-gradient(top, #333641 0%, #333641 50%, #666B7A 51%, #666B7A 100);
background: linear-gradient(to bottom, #333641 0%,#333641 50%,#666B7A 51%,#666B7A 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#333641', endColorstr='#666B7A',GradientType=0 );
transition: all 0.3s;
border-bottom: 1px solid #666B7A;
}
.subMenu a: last-child {
border:none;
}
.item:target .subMenu {
max-height: 10em;
}

<div class="wrapper">
 <ui class="mainMenu">
 <li class="item" id="account">
 <a href="#TITLE I" class="btn">TITLE I</a>
 <div class="subMenu">
  <a href="">item-1</a>
  <a href="">item-2</a>
  <a href="">item-3</a>
 </div>
 </li>
 <li class="item" id="about">
 <a href="#TITLE II" class="btn">TITLE II</a>
 <div class="subMenu">
  <a href="">item-1</a>
  <a href="">item-2</a>
 </div>
 </li>
 <li class="item" id="support">
 <a href="#TITLE III" class="btn">TITLE III</a>
 <div class="subMenu">
  <a href="">item-1</a>
 </div>
 </li>
 <li class="item">
 <a href="#" class="btn">Close All</a>
 </li>
 </ui>
</div>

Pada sumber disertakan dengan bumbu font-awesome, disini saya menghilangkannya :D Jadi jika bagi kalian yg memang menggunakan font-icon harap melihat pada sumer cara tag HTML-nya ;)

Bonus

previewSlider - Trippy CSS effect - Map-inspired border - CSS Animations: Obvious CTA Buttons - Off-Canvas menu on Pure CSS - File Tree CSS - Client side screenshot - Random Color Palette Generator with Tinycolor.js - css scroll-behavior: smooth - Full Page slider - Dark Mode without Javascript - Checkboxes and radios pure css - Typewriter Effect HTML & CSS - Pure JS FLIP Transition - Animated Info Card - Under-Engineered Toggles - Anime Quote Image Maker - Splitting an image - Reduced Motion Mixin - Dolly/Hitchcock Zoom Effect in CSS

Bye :-h

From Writer to Silent Reader, it's Good!

2019-02-23T15:31:00.000+07:00

Tahun telah berganti menjadi baru kembali, tetapi aktifitas mosting belum ada sama sekali :P Bukan tanpa sebab belum melakukan post! Akan tetapi di tahun 2019 ini front-end blog/web sudah semakin maju dan instant. Banyak para developer berlomba memamerkan kabisa dengan membuat berbagai macam tools :D Apakah sobat kenal dengan Tutorial Republic Salah satu web online development tutorials seperti W3Schools. Di website tutorialrepublic ada beberapa tools, salah satunya adalah HTML Editor Seperti kalian ketahui, blog gue tempat mengumpulkan source html-editor? Dengan nama codelab, dia adalah korban gua berikutnya ;)) Sobat bisa mencomot dengan gratisan, plus tool color picker jebolan developer.mozilla.org

Codelab	Color Picker

Download: tutorialrepublic.7z in Google Drive.
Password: ~~siganteng-kalem~~

Jika sobat ingin mempelajari tentang color alias warna, sobat bisa mencoba ColorBox by Lyft Design. Kepengen emoticon or emoji you can try OpenMoji & Emoji Builder. Ingin melihat efek color blend sobat bisa satroni Blendy. Cobalah terlebih dahulu google fonts dengan menggunakan Tyffle. Fix broken css grid using by Broken Grid. Secuil koleksi Front-End-Wizard by chiragbhansali. Easily make tints and shades in 10% increments use Tint & Shade Generator or Color Tinter and Shader.

BONUS...

Material UI popup - Minimal Button with Amazing Hover Effects - Fancy Hover Animation #2 - CSS Image Comparison Slider - Multiline padded text: experiments - CSS3 buttons hover effects with FontAwesome5 - Opening Credits - CSS3 Glass Buttons v2 - PaperTooltip - Perspective Mouse Scroll - CSS button with bubbles - SVG water effect - CSS only drop down menu - Slider on hover - Custom Checkbox Slider with Label - Sticky Progress - Four Side Navigation - CSS-only ripple toggle with dynamic text colour - Image Scrambler Ft. Hunter the Pup! - 3D Retro Buttons - Emerging dropdown - Folding Profile Gallery - CSS Reflection - Overlay menu - Simplicity 6 - Minimap with CSS element() & HTML input range - Hotel page concept - position sticky can do a lot - CodePen Portfolio Generator - Search Box Focus Effect - Select Text And Share - Expanding grid on click - iFrame Preview on Hover - GLITCH

Sepertinya pada tahun 2019 ini saya akan banyak menjadi silent reader dari pada posted writer :D :-h

Encode base64 Automatic to Show Posted

2018-11-13T16:14:00.000+07:00

Base64 adalah kelompok skema pengkodean binary-to-text serupa yang mewakili binary data dalam format string ASCII dengan menerjemahkannya ke representasi radix-64. Istilah Base64 berasal dari penyandian transfer konten MIME spesifik. Setiap digit Base64 mewakili tepat 6 bit data. Tiga 8-bit byte (yaitu, total 24 bit) karena itu dapat diwakili oleh empat digit 6-bit Base64. Itulah penjelasan singkat mengenai Base64 dari wikipedia yang diterjemahkan via google translate.
Secara khusus kegunaan base-64 gue juga kagak tauk, tetapi ane tahu dengan melakukan convert/encode tulisan yang terbaca bisa menjadi tulisan alien (alias menjadi deretan kode-kode bit!)

Dengan kelebihannya ini, kita bisa memanfaatkan dalam area postingan untuk melakukan encode/decode! Singkatnya apabila sobat mau menyembunyikan konten (tulisan) maka lakukanlah encode terlebih dahulu, yg kemudian secara otomatis akan di decode di area postingan? Contoh sederhana begini, AA Koben menulis abcde dalam bahasa base64, YWJjZGU= Saat sobat menuliskan YWJjZGU= di HTML Editor post blogger nanti akan langsung tertuliskan abcde pada artikel post! Tetapi ketika dilakukan View Page Source tidak akan ketemu tulisan abcde!!!

Letakan script tepat sebelum/diatas taging </head> Klik kanan pada mouse, Save Link As dan lakukan hosting javascript berikut base64.min.js

Ketika sobat akan melakukan posting blog, jangan lupa tulisan/kode dilakukan encoding terlebih dahulu. Sesudah itu tulis dengan format di html-editor post blog seperti berikut

<script type="text/javascript">document.write(Base64.decode("KODE/TULISAN HASIL ENCODING TARUH DI SINI"));</script>

Tools encodingnya mshang.ca/base64-js

Harap diperhatikan, penulisan dalam bentuk script/base64 katanya buruk bagi index/SEO. Saya tidak bertanggung jawab atas itu semua :D

Bonus:

The "Read more" link - GSAP 'Menu' Experiment - Reactive Photo Gallery - CSS Text Reveal - Useful Broken Images - Search field animations with material icons - Diagonal stripe border effects - 100Day CSS Challenge #40 - Sea - Mobile Nav bar - Ribbon Menu - Glitch Photo Filters CSS - Image Transitions Using SVG Filters - Image Transition On Scroll (GSAP) - CSS3 trendy retro photo effect - CSS Gradient Hover Effect - photo effect - Click to Copy String Interaction - Buddons - 3D Navbar

Now, Border Radius Can Be Like This!

2018-10-23T19:05:00.000+07:00

Ada satu topik hangat yang lagi menjadi sorotan di dunia CSS! Tepatnya adalah CSS Borders. Topic ini menjadi ramai karena si border dikombinasikan dengan efek animation. Sehingga border yang biasanya kita lihat selalu statis sekarang bisa menjadi dinamis berlenggak-lenggok seperti seorang penari jaipong :D
Salah satu contoh telah dibuatkan oleh codepener Mstr. Piotr Galor Pure CSS Gooey Morph

Mantap toh :-bd Mungkin itu terlalu berdisko, bagaimana dengan karya dari Mstr Nick Lewis Animating border-radius

Animating border radius

Bagaimanakah caranya kita bisa mendapatkan gaya border seperti itu? Kalau bikin secara manual mungkin akan sedikit ribet, tetapi berbeda cerita jika kita mempunyai tools-nya :D

Silahkan pilih mau pakai yg mana:

Border radius
Fancy Border Radius

Sudah begitu ajah mostingnya, urusan sobat mo dipakai untuk apaan tinggal kreasikan sesuai dengan kebutuhan :)

Bonus

envelope border - Making an Image Magnifier in jQuery - ColorBox by Lyft Design - Exploding Bubble Text - Pure CSS Toggle Buttons | ON-OFF Switches - Social Media 3D Ghost Buttons in just CSS - A Fancy CSS Animated Gallery Covers - Color Namer - Random color harmonies - Black Mirror Cracked Text Effect - 100DaysCSS-12 - Generate a Colour - Glitch Effect on Hover - Stacked Image Gallery - SVG Menu Experiments w/viewBox Zoom - Portfolio Items CSS3 transitions effects - Pure CSS Select Box With Direction Aware Hover Effect - Just Another Menu (Pure CSS) - Social share button - Media Icons

Make the appearance of youtube look like we want

2018-10-01T16:51:00.000+07:00

Apakah sobat sedang mencari kumpulan tutorial untuk memperindah blog kalian? Anda tidak salah datang kemari, karena dimari tempatnya berkumpul artikel unik dari seluruh penjuru alam nyata dan ghaib. Tinggal menuju kotak pencarian, ketik apa yg kalian cari, kemudian enter...jebret, pasti ada artikel full stylish tertampilkan :D Pada kesempatan ini AA Koben membawa tut's ringan seputar trik bagaimana cara merubah tampilan (warna) video youtube! Ada ± 21 perubahan warna yang bisa anda terapkan! Karena browser gue tidak update, maka efek perubahan tidak berjalan sebagaimana mestinya.

Oleh karena itu silahkan update browser ke versi terbaru agar seluruh selector & declaration CSS berjalan sempurna. Berikut adalah sekrinsyut tampilan default (normal) salah satu video youtube.Nanti setelah ditambahkan efek CSS hitam-putih (black & white) akan menjadi beginong.Bagaimana bisa menjadi begitu, berikut bumbu-bumbu CSS untuk meraciknya.

.filt_vid {
width: 404px;
height: 360px;
display: block;
text-align: center;
box-sizing: border-box;
margin: 5px auto 0 auto;
background-color: #fcfcfc;
}
.filt_vid input {
display: none;
}
.filt_vid input:nth-of-type(1):checked ~ label:nth-of-type(1) {
color: #FFF;
background-color: #F00;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);
}
.filt_vid input:nth-of-type(2):checked ~ label:nth-of-type(2) {
color: #FFF;
background-color: #404040;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);
}
.filt_vid input:nth-of-type(2):checked ~ iframe {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.filt_vid label {
cursor: pointer;
padding: 10px 20px;
border-radius: 3px;
margin: 0 5px 10px 0;
display: inline-block;
transition: 0.5s ease;
background-color: #eee;
}
.filt_vid label:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);
}
.filt_vid iframe {
width: 100%;
height: calc(100vh - 210px);
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.25);
}

<div class="filt_vid">
<input type="radio" name="radio" id="noFilter"/>
<input type="radio" name="radio" id="bwFilter" checked="checked"/>
<label for="noFilter">Normal</label>
<label for="bwFilter">Black & White</label>
<iframe src="https://www.youtube.com/embed/WA8NVBi9atk?autoplay=0;rel=0;controls=0;showinfo=0" frameborder="0" allowfullscreen encrypted-media"></iframe>
</div>

Jika sobat ingin efek yg lain atau mau di pakai semua tinggal perhatikan baris kode berikut

.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

Kalau mau pakai efek Sepia kode CSSnya sbb.

.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: sepia(1);
          filter: sepia(1);
}

Efek Saturate

.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: saturate(10);
          filter: saturate(10);
}

Efek Hue Rotate

.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
}

Efek Hard Light

.filt_vid input:nth-of-type(2):checked ~ iframe {
  mix-blend-mode: hard-light;
}

Efek Contrast

.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: contrast(200%);
          filter: contrast(200%);
}

Efek Blur

.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: blur(5px);
          filter: blur(5px);
}

Source and all demo can you find it Apply css filters on a video in pure CSS.
BONUS

Search field animation - Blinking Text Input - Aquarium with fish animation [Pure CSS] - HoverEffectIdeas-1 - HoverEffectIdeas-2 - Animated Search Form With Micro Interactions - Block effect text intro - Transition Effect With mix-blend-mode - Don't Click! - 3D - CSS Social Tiles - Perspective button hover effect - Making an Image Magnifier in jQuery - ColorBox by Lyft Design

Bye :-h

Aneka Ragam Macam Jenis CSS3

2018-09-14T20:10:00.000+07:00

Ketika ada keinginan menulis untuk posting blog, walau tema post sudah sedikit basi, apa boleh buat 'sob ini juga merupakan salah satu cara dalam menjaga eksistensi kita dalam beraktifitas nge-blog :D Sekarang AA Koben akan berbagi tutorial CSS3 ringan yang tentu saja tidak menghilangkan ciri khas ane yg kental dengan slogan full stylish B-) Untuk mempersingkat lahan editor langsung saja pada bagian pertama yaitu membuat konten gambar dengan hover bergaya efek shine!
Make Shine Effect for Image

.shine_img {
position: relative;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
display: inline-block;
}
.shine_img:after {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 100%;
height: 100%;
transform: skewX (-20deg);
background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
}
.shine_img:hover:after {
animation: shine 1.5s ease;
}
@keyframes shine {
100% {
left: 200%;
}
}

<div class="shine_img">

  <img src="LINK-IMAGE" />

</div>

DEMO
Make Shine Effect for Text

.shine_text {
border: 0;
color: #fff;
outline: none;
font-size: 12px;
cursor: pointer;
overflow: hidden;
font-weight: 400;
background: #000;
position: relative;
padding: 14px 42px;
border-radius: 3px;
letter-spacing: 0.2em;
display: inline-block;
transition: all 0.3s ease;
}
.shine_text:after {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 100%;
height: 100%;
transform: skewX (-25deg);
background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
}
.shine_text:hover:after {
animation: shine 1.5s ease;
}
.shine_text:active {
transform: translateY(1px);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
@keyframes shine {
100% {
left: 200%;
}
}

<div class="shine_text">

 YOUR TEXT

</div>

DEMO

Make Image Cloudy
Pada bagian ini sobat harus mempunyai default 2 gambar awan dengan resolusi 1000 x 600 px. Kalau susah carinya silahkan upload dulu di hostingan masing² gambar awannya! awan-1.png & awan-2.png

.abs_bg {
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
}
.abs_bg div {
margin: 0;
}
.fog {
width: 50%;
height: 50%;
margin: 5px auto;
position: relative;
background-color: #333;
}
.fog_cont {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
.fog_img {
width: 300vw;
position: absolute;
height: 100vh;
}
.awan_satu {
background: url("awan-1.png") repeat-x;
background-size: contain;
background-position: center;
-webkit-animation: gerak 60s linear infinite;
animation: gerak 60s linear infinite;
}
.awan_dua {
background: url("awan-2.png") repeat-x;
background-size: contain;
background-position: center;
-webkit-animation: gerak 40s linear infinite;
animation: gerak 40s linear infinite;
}
@-webkit-keyframes gerak {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200vw, 0, 0);
transform: translate3d(-200vw, 0, 0);
}
}
@keyframes gerak {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200vw, 0, 0);
transform: translate3d(-200vw, 0, 0);
}
}

<div class="fog">

<div class="abs_bg" style="background-image: url('IMAGE-POST');"></div>

 <div class="fog_cont">

  <div class="fog_img awan_satu"></div><div class="fog_img awan_dua"></div>

 </div>

</div>

Make Lightning Effect

.container {
width: 242px;
height: 363px;
display: block;
margin: 5px auto;
position: relative;
animation: lightning 10s linear infinite;
}
@keyframes lightning {
0% {
opacity:1;
}
1% {
opacity: 0.9;
}
2%{
opacity:1;
}
3% {
opacity:0.9;
}
4% {
opacity:1;
}
80% {
opacity:1;
}
81% {
opacity:0.9;
}
82% {
opacity:1;
}
}

<img src="LINK IMAGE" class="container" />DEMO
Yang terakhir membuat efek serelek selonjor :D

.expand_able {
max-height: 40px;
overflow: hidden;
position: relative;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
-webkit-box-shadow: inset 0 -17px 20px -20px #ccc;
-o-box-shadow: inset 0 -17px 20px -20px #ccc;
box-shadow: inset 0 -17px 20px -20px #ccc;
-webkit-transition: all 500ms ease-in-out 100ms;
-o-transition: all 500ms ease-in-out 100ms;
transition: all 500ms ease-in-out 100ms;
}
.expand_able:after {
right: 5px;
bottom: 3px;
color: #555;
font-size: 11px;
font-style: italic;
content: "More...";
position: absolute;
}
.expand_able:hover,.expand_able.open {
max-height: 999px;
-webkit-box-shadow: inset 0 0 0 0 #ccc;
-o-box-shadow: inset 0 0 0 0 #ccc;
box-shadow: inset 0 0 0 0 #ccc;
}
.expand_able:hover:after,.expand_able.open:after {
opacity: 0;
}

<div class="expand_able">

<p>Ada apa ya di sini! Coba sorot dong?</p>

<p>YOUR TEXT PARAGRAPH 1 HERE</p>

<p>YOUR TEXT PARAGRAPH 2 HERE</p>

<p>YOUR TEXT PARAGRAPH 3 HERE</p>

</div>

DEMO
Resources and other:

Button Shine - Shine Effect - Glossy Button with Shine - Pacific Northwest Fog - Rain - JavaScript - 3D perspective card XY - Feed Concept

Bye :-h

Hack Your Brain, Blogger

2018-08-30T17:09:00.001+07:00

Ternyata dalam kesempatan jika tidak punya kemauan dan kreatifitas akan menghasilkan ~~blank idea~~! Ujung aspal pondok gede kata judul lagu, ujung-ujungnya searching juga kalau mau cari jawaban :D Kepingin post berbobot apa daya kemampuan kurang mumpuni. Ingin pos biasa-biasa saja, males ngeposnya. Mau sedikit unik & kreatif apa daya ilmu cuma sebatas ngayal :-s Balik lagi ajah menjadi silent reader si bloglang dibalik layar :))

Banyak cara dilakukan untuk mengaburkan atau menyembunyikan sebuah konten! Salah satu tekniknya adalah mengubah gambar menjadi emoji? Gambar digenerate dan dirubah bentuk dengan deretan emoji. Biasanya gambar yg sedikit seronok/tidak layak tayang. Teknik ini bisa dikatakan menyensor gambar :">
Demo dan contoh kreasi Image Emojifier:

Silahkan download tools dari sumber Image Emojifier a pen by Jon Kantner.

Sobat blogger juga dapat menyiasati objek gambar dengan berbagai macam efek yg dihasilkan dari syntax SVG seperti simple hover effects with CSS filters! Ada seorang member codepen pro dengan nick master yoksel banyak bermain dengan kode SVG.

Saya praktek ria dengan syntax-svg yang gue bikin menjadi internal style sheet. Tidak tauk juga salah atau benar. Dan mungkin hanya berjalan di perambah mozilla.

Before	After

Code & demo Cat + feComposite.

Writing SVG internal style sheet is pure only a practice, if you want to use it, please consider the related factors.

Other:

Poster with feComposite
FeTurbulence, feColorMatrix, feDisplacementMap
feTurbulence, feColorMatrix, feDisplacementMap
Wild stroke: feMorphology, feTurbulence, feDisplacementMap
Turbulence SVG-filter
feTurbulence+feColorMatrix+feDisplacementMap

Masih berlanjut, karena seperti yg gue bilang, lagi malas :D

Bonus

Rainbow Text-Shadow - Let me see what you got! - CSS-only double-click - Link with gradient background on hover - Animate navigation on scroll (without jquery) - Low Poly Background Generator - MENU Multi Level Dropdowns - 3D buttons with Highlights and Shadows - A text sliding effect UI - On/off toggle switch - Colour Melody - Splitting: CSS vars for split words & chars - Search Bar - Shimmering neon text - Fold - CSS Grid album with nice hover effect - Shorthand-Background Social Media Logos - 3D Book BrowsingSee you I-)

Makes Hamburger Menu & Share Button

2018-07-19T13:26:00.001+07:00

Walaupun sudah banyak artikel dengan topik menu, apa mau di kata! Bagi sobat blogger yang mau membuat ataupun mengganti menu navigasi, AA Koben akan berikan satu rekomendasi. Karena lagi trending menu dengan tema hamburger iconic, maka dari pada itu gue akan buatkan yang seperti itu! Setelah ditengok-tengok gak ada mirip sama sekali sama burger? Mungkin karena bertumpukan, 3 garis menyerupai ham-bur-ger! Kok gak semen sekalian =))

Kode CSS menu drawer with off-click

<nav class="menu">
<input id ="menu_toggle" type="checkbox" class='menu_toggle'/>
<label for="menu_toggle" class="menu_toggle-label">
<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
<path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' />
</svg>
<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>
</label>
<ol class='menu_content'>
<li class="menu-item"><a href="#0">Title I</a></li>
<li class="menu-item"><a href="#0">Title II</a></li>
<li class="menu-item">
<a href="#0">Title III</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Sub Title III</a></li>
<li class="menu-item"><a href="#0">Sub Title III</a></li>
<li class="menu-item"><a href="#0">Sub Title III</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Title IV</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Title V</a></li>
</ol>
</nav>

Source & Demo ~ Another Choice with JS.

Harap diperhatikan syntax SVG di dalam HTML! Karena blogger berbasis xHTML, kalau ada kode error, berarti harus di phrase terlebih dahulu kodenya :D

Satu lagi tema yg enggak ada habisnya untuk di bahas yaitu tentang tombol berbagi! Ane akan share juga satu tutorial membuat share button full stylish punya b-)

Kode CSS share button

<div class="share-button">
<div class="share-button_back">
<a class="share_link" href="#" title="twitter">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M36,19c0,0,0,0,0,1c0,8-6,16-16,16 c-3,0-6-1-9-3c0,0,1,0,1,0c3,0,5-1,7-2 c-3-0-5-2-5-4c0,0,1,0,1,0c1,0,1-0,2-0 c-3-1-5-3-5-6c0-0,0-0,0-0c1,0,2,1,3,1 c-2-1-3-3-3-5c0-1,0-2,1-3c3,3,7,6,12,6 c-0-0-0-1-0-1c0-3,3-6,6-6c2,0,3,1,4,2 c1-0,3-1,4-1c-0,1-1,2-3,3c1-0,2-0,3-1 C38,17,37,18,36,19z"></path>
</g></g>
</svg>
</a>
<a class="share_link " href="#" title="facebook">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M31,26h-4c0,6,0,14,0,14h-6c0,0,0-8,0-14h-3v-5h3 v-3c0-2,1-6,6-6l4,0v5c0,0-3,0-3,0c-1,0-1,0-1,1v3h5L31,26z "></path>
</g></g>
</svg>
</a>
<a class="share_link" href="#" title="google plus">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g><g>
<path d="M22,29c-0-0-0-0-0-0c-1-0-1-0-2-0h-0 c-3,0-5,2-5,3c0,2,2,3,4,3c3,0,5-1,5-3 c0-0-0-0-0-1C23,30,23,30,22,29z"></path>
<path d="M20,22c0,0,0,0,0,0c1,0,1-0,2-1c1-1,1-2,1-3 c-0-2-2-4-3-4l-0-0c-1,0-1,0-1,1c-1,1-1,2-1,3 c0,2,2,4,3,4H20L20,22z"></path>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M22,37c-1,0-2,0-3,0c-1,0-2-0-3-0 c-2-1-4-2-4-3c-0-1-0-1-0-2c0-1,0-1,0-2 c1-2,4-4,7-4c0,0,0,0,0,0c-0-0-0-1-0-1 c0-0,0-1,0-1c-3-0-6-3-6-6c0-2,2-5,5-6 c1-0,2-0,2-0h7c0,0,0,0,1,0c0,0-0,1-0,1l-2,1 c-0,0-0,0-0,0H25c1,1,1,2,1,4c0,2-1,3-2,4 c-1,1-1,1-1,2c0,0,1,1,2,2c2,1,3,3,3,5 C27,34,25,36,22,37z M39,24c0,0-0,1-1,1H34v4 c0,0-0,1-1,1h-1c-0,0-1-0-1-1v-4h-4c-0,0-1-0-1-1V23 c0-0,0-1,1-1h4v-4c0-0,0-1,1-1h1c0,0,1,0,1,1v4h4 c0,0,1,0,1,1V24z"></path>
</g></g></g>
</svg>
</a>
<a class="share_link" href="#" title="dribbble">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<g>
<path d="M49,48c0-0,0-0,1-0c-0-1-1-2-1-3 c-9,3-18,3-20,3c-0,0-0,0-0,0c0,5,2,9,5,13 C34,59,40,51,49,48z M61,33c-4-3-8-5-13-5 c-1,0-3,0-4,0c1,1,4,6,7,11C57,38,60,34,61,33z M36,64C40,66,44,68,48,68c3,0,5-0,7-1c-0-2-1-8-4-15 C41,55,37,62,36,64z M47,41c-3-5-6-10-7-11 c-5,3-9,8-11,13h0C31,44,38,43,47,41z M56,50 c2,6,3,12,4,14c4-3,7-8,8-13c-1-0-4-1-8-1 C58,50,57,50,56,50z M48,0C21,0,0,21,0,48c0,27,21,48,48,48s48-21,48-48 C96,21,75,0,48,0z M48,71c-13,0-23-11-23-23S35,25,48,25S71,35,71,48 S61,71,48,71z M53,43c0,1,1,2,1,3c0,0,0,1,0,1 c1-0,3-0,4-0c4,0,8,1,9,1c-0-4-2-8-4-12 C63,37,59,41,53,43z"></path>
</g>
</svg>
</a>
</div>
<div class="share-button_front">
<p class="share-button_text">
Share
</p>
</div>
</div>

Lagi lagi harap diperhatikan penggunaan syntax <svg>...</svg> Saya mau buatkan link khusus blogspot, tapi dikarenakan bentrok dengan kode emoticon postingan, jadi kagak bisa :(

Source & Demo Share Button ~ Share Button using base64 URL.

BONUS:

Pulled out text animation - Interactive CSS Filter React Component - Toggle CSS filter Grayscale on image with jQuery - Checkbox my Accordion - Text Only Checkboxes

:-h

Make Comparison Table with CSS Flexbox

2018-07-03T15:22:00.000+07:00

Ketika kesibukan bertambah dan virus malas lagi menerpa ternyata baru terasa ngeblog itu membutuhkan watku & tenaga ekstra :D Belum lagi saat kita ingin mau melakukan posting, ternyata tidak ada ide/bahan untuk melakukan itu semua! Mentok-mentok berkeliaran di dunia maya dan baca-baca apa yang lagi trending :P Mungkin salah satu faktor ide menjadi mandek yaitu kita tanpa sadar disibukan oleh kesibukan yg tidak tentu (~~baca update-an medsos~~) =))

Berikut adalah salah satu contoh penulisan markup tabel HTML sederhana, berisi dua kolom dan dua baris:

 <table>
  <tr>
    <th>Bulan</th>
    <th>Simpan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>$300</td>
  </tr>
</table>

Sekarang AA Koben ingin berbagi sedikit trik dan info bagaimana membuat penulisan mark-up tabel menggunakan teknik CSS flexbox. Hasil akhir seperti berikut:

<div class="comptbl">
<ul class="brs">
<li class="legend">Head Title I</li>
<li class="heat">Head Title II</li>
<li class="heat">Head Title III</li>
<li class="heat">Head Title IV</li>
<li class="heat">Head Title V</li>
</ul>
<ul class="brs">
<li class="legend">Head Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
</ul>
<ul class="brs">
<li class="legend">Head Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
</ul>
<ul class="brs">
<li class="legend">Head Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
</ul>
<ul class="brs">
<li class="legend">Head Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
</ul>
<ul class="brs">
<li class="legend"></li>
<li><a href="" class="calltoact">Title Button I</a></li>
<li><a href="" class="calltoact">Title Button II</a></li>
<li><a href="" class="calltoact">Title Button III</a></li>
<li><a href="" class="calltoact">Title Button IV</a></li>
</ul>
</div>

Kode CSS Comparison Table.
Source & demo Creating a clean CSS Comparison Table with CSS flexbox.
BONUS:

CSS only Perspective Menus - Pure CSS accordion - Pure CSS 3D cards - Animated button with rainbow hover - CSS Lightbox - Animated Speech Bubble Nav - Playful CSS figure & figcaption - Figure & Figcaption - Multiple transitions on a button - Accessible SVG Link List with Tooltips - Responsive 3D Flip Menu - Scrolling Gradient - Images Slider using CSS - Expanding and Collapsing Hamburger Menu - CSS Droplet Menu Animation

How To Make This Tutorial :D

2018-05-29T14:16:00.000+07:00

Lumayan sudah agak lama tidak login ke account blogger, padahal online tiap hari :D eh sekalinya log-in ada beberapa pemberitahuan!Apakah ada di antara sobat yang memposting dan menerangkan tentang hal tersebut :-?? Gue menemukan satu tutorial CSS mengenai Hover Effect Macam begini saja bumbunya

.lifted {
width: 25%;
height: 50px;
display: block;
min-width: 250px;
border-radius: 5px;
position: relative;
margin-bottom: 11px;
color: darkslategray;
box-sizing: border-box;
padding: 14px 25px 0 45px;
box-shadow: 1px 2px 1px -1px #777;
transition: background 200ms ease-in-out;
background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%);
}
.shadow {
position: relative;
}
.shadow:before {
z-index: -1;
content: "";
bottom: 13px;
right: 7px;
width: 75%;
top: 0;
position: absolute;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
transition: all 150ms ease-in-out;
}
.lifted:hover {
background: linear-gradient(to right, #abbd73 0%, #abbd73 100%);
}
.shadow:hover::before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
bottom: 20px;
z-index: -10;
}
.circle {
position: absolute;
top: 14px;
left: 15px;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px #FFF;
}

DEMO: codepen.io/BastianAndre/pen/eBBvVz

AA akan berikan style blockquote kepunyaan princess Lea Verou :D Ramuannya seperti ini

blockquote {
margin: 15px 0 0 10px;
padding: .3em 1em .3em 2em;
background: #ffecd0;
border-left: .7em double rgba(255, 255, 255, .3);
font-family: 'Palatino Linotype', Palatino, Georgia, serif;
}
blockquote:before {
content: '\275D';
float: left;
display: block;
margin-left: -.52em;
margin-top: -.23em;
color: #f72;
font-size: 700%;
line-height: 1;
}
blockquote cite {
margin: 5px 0 0;
display: block;
}
.entry-content li {
list-style: none;
padding-left: 1em;
}
.entry-content ol {
counter-reset: counter;
}
.entry-content ul > li {
text-indent: -1.5em;
}
.entry-content li ul {
padding-left: 1em;
}
.entry-content li:before {
font-size: 1.6em;
line-height: .8;
padding-right: .1em;
}
.entry-content li:before {
content: 'âž›';
color: rgba(0, 0, 0, .2);
}
.entry-content ol > li {
list-style: none;
text-indent: -1.5em;
margin: 1em 0 0 1em;
}
.entry-content ol > li:before {
counter-increment: counter;
content: counter(counter);
font-size: 4em;
line-height: .2em;
padding: .05em 0 .05em;
display: inline-block;
vertical-align: middle;
font-family: Raleway, 'Helvetica Neue', Helvetica, sans-serif;
}
.entry-content ol > li:nth-child(even) {
padding-left: 3em;
padding-right: 0;
}
.entry-content ol > li:nth-child(even) > ul {
padding-left: 4em;
}
.entry-content ol ol > li:before {
font-size: 3em;
color: #ccc;
}
.entry-content ol ol > li:nth-child(even) {
padding-left: 0;
}
.entry-content ol ol ol > li:before {
font-size: 2em;
color: #bbb;
}
.entry-content ul.omitted li:before {
content: '\2718';
color: #b00;
}

<div class="entry-content">
<blockquote>
<ol>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
</ol>
</blockquote>
</div>

DEMO: lea.verou.me/2018/04/quicker-storify-export

Bagi sobat yang kepengen memasang serangga di blog, bisa coba dengan memakai Auz/Bug.
BONUS:

@keyframers 1.4.0 | Expanding Environments - Sidebar Menu Concept - Accordion Image Gallery - Gallery hover effect + Gallery expanded - WebGL Hover Effect - Blend modes selective desaturation effect - keyframes.app

Top Level Information 2018

2018-05-02T15:07:00.001+07:00

Informasi berharga di tahun 2018 bagi blogger yang tidak mau di panggil ketinggalan berita up to date, from Mr. Beben Koben in the house :-) Pada postingan sebelumnya mengenai text editor, gue punya satu rekomendasi lagi bagi kalian untuk melihat Textbox.io Bagi kalian yg berminat, silahkan dipelajari lebih lanjut, ini saya kasih mode offline-nya textbox.io.7z ;))
Mungkin di antara elo-elo semua sudah tidak asing lagi dengan Font Awesome? Jangan dikira tidak akan ada saingan, are you ready for Fontisto :-? Kalau mau memepelajarinya, ini saya kasih fontisto mode off-line tetapi masih versi v=201 :D

Sudah 2 siki info tuh gue berikan! Lanjutkan inpoh dengan yg lagi mencari tutorial ttg zoom image you must check this out swapping images with the sizes attribute. Saya membaca artikel dari Philip Walton, walau kagak ngerti juga! Satu hal yg menjadi perhatian ane adalah halaman demonya tentang Responsive Components! Kalau anda mau berkreatifitas sedikit, bisa dijadikan halaman dashboard admin tuh :-" Kalau malas buatnya silahkan sikat sufee admin dashboard by puikinsh. Nih juga niiih hajar WebSlides. Mau memanipulasi gambar dengan HTML5 canvas, gua beri blend.js
Build a download button full of micro interactions for stylish blogger.

Apalagi yaaa...

Tidak punya aplikasi photoshop gunakanlah versi online

Pixlr Editor
Pixlr Express
Photopea
Photoshop Online Free
Sumopaint Lite
miniPaint

Bagi kalian twitter maniac Twemoji Awesome. CKEditor 5 v10.0.0 sudah keluar loh! Udahan ajah yah bro, capek ngeutik, males :P

BONUS:

goldfishes - CSS-Only Responsive Layout with Smooth Transitions - One page scroll Pure CSS - Viewport Units Flexible Layout - Image Effects - Tumblr photogrid/photoset with flex-box in place of JavaScript - font combination generator - nexus like menu - Two Face slider - Full Page CSS Only Parallax 📸 Gallery - @keyframers 1.2.0 Reactive Animations with RxJS - Popup / Overlay - Mobil Menu - Sidebar - Navigation - 3d 文字跑马灯特效 - expanding link indicator - [JS/CSS] Flat Gradient Generator - Reading Progress Bar

Text Editor Customize Modify

2018-04-06T16:53:00.000+07:00

Blogger post editor tidak lain adalah sebuah text editor. Dari teks-editor yang beginning sampai dengan tingkat advanced banyak ditawarkan. AA Koben akan berbagi informasi bagaimana cara membuat text-editor sederhana, yang munkin dapat dikembangkan menjadi high level :D Tapi sebelum itu ada beberapa issue yg musti sobat tauk :P
Bagi user Bootstrap dari github dengan nick Vegetam sudah membuat sebuah Bootstrap Page Generator as layout it or The Web Page Generator, Boostrap Page Generator 4 maybe you can try Bootstrap 4 Interface Builder. Untuk penggila form action ada Bootstrap Form Builder.

Sobat mencari source CSS animasi bisa langsung meluncur ke 25+ CSS Animation Libraries. Apakah kalian ingin membuat QRCode, mungkin ini salah satunya bisa menjadi rujukan qrcodejs. Gue menemukan text editor sederhana dengan gaya notebook paper dari Subin's Blog.Ternyata master tovic juga sudah buat, dengan penambahan fitur di sana-sini JavaScript Text Editor & JavaScript Rich Text Editor. Ketiga sources teks editor tersebut bisa sobat dapatkan dengan gratis. Bagi user yang malas seperti saya, ana sudah buatkan sepaket!
Text Editor.7z for learning.

BONUS...

Image Merge slider - 3D Slider Pure CSS - Animate a Container on Mouse Over Using Perspective and Transform - Pure Css Sidebar Toggle Menu - Gmail Application - Beautiful Minimalist Web Tab Component V2 - Polaroid Effect with CSS - Free Intro to Web Development slides (with demos)

See you :-h

Make Corner Stuff With CSS

2018-03-15T16:27:00.001+07:00

Dahulu ketika awal-awal ngeblog, ketika berkunjung ke blogsite orang kalian pasti sering bertanya bagaimana cara melakukan/bikin seperti itu :D Mungkin masih ingat salah satu tutorial yang cukup fenomenal yaitu trik membuat segala ada di pojok! Biasanya dipasangin gambar bergerak untuk menarik para pengunjung ;)) Karena sekarang sudah ada CSS 3 hal itu bisa dikembangkan lagi menjadi lebih keren b-) AA Koben ingin berbagi cara membuat template-corner (original source) or corner_stuff (modification)

Gua dapetin dari codepen.io dengan nick account Sean Codes! Berikut beberapa karyanya:

Recursive Hover Nav (Only CSS)
MacOS Dock with CSS!
Floating Nav to Top Fix Expand v2
Split Text Menu
VVVVV
Show Hide

Perhatikan pojok kanan atas dan pojok kiri bawah ada sesuatu! Berikut ini adalah ramuan bumbu kode CSS yg musti sobat pasangkan pada template.

Buka link berikut dan ambil kode CSS Corner Stuff.
Syntax HTML

<div class="corner_stuff corner_top corner_right"> 
  <div class="corner_title">sean codes <i class="corner_icon">❓</i></div>
  <div class="corner_links"><a class="corner_link"><span><small>Hi! Nice to meet you! <i></i></small></span></a><a class="corner_link" href="//instagram.com/beben.koben" target="_blank"><span><i></i> instagram</span></a><a class="corner_link" href="//codepen.io/beben-koben" target="_blank"><span><i></i> codepen</span> </a><a class="corner_link" href="https://github.com/beben-koben" target="_blank"><span><i></i> github</span> </a></div>
</div>
<div class="corner_stuff corner_bottom corner_left corner_small">
  <div class="corner_title" onclick="window.location=window.location">reload <i class="corner_icon></i></div>
</div>

Bonus top

Lightbox Gallery Hover Effect - Visual Studio Code in React with working closing opened file - CSS Line Counter - HTML Kitchen-sink - SVG Text Portrait - Chrome desktop theme-color - Preload Images - Animation Border - Period1K - JS1K 2016 Entry - Live Screen Effect using matrix3d() - Komische Uhr - Share Modal Without Javascript (checkbox hack) - Multi-level Side Nav Menu - [CSS] Elastic menu - Increase Font Size with CSS Variables - Menu Animations (CSS Only) - c(ss)arousel - pure CSS carousels 🎪🐎🎪🐎🎪🐎 - JQ | Image Gallery Layout (JSON & Infinite Scroll) - Pure CSS Flip Card - [SCSS] Snow box-shadow no image, no js

Tools terbaru

Emojiers - The ultimate free Emoji database! - Screenshot Bin | API for Website Screenshots & Thumbnails - CSS Gradient

Bye :-h

Look View Page Source Tool Offline

2018-02-14T17:41:00.001+07:00

Memasuki bulan ke-2 di awal tahun 2018 ini, belum menemukan sesuatu yang gereget punya bro :-< Lumayan ada informasi dari CSS-Tricks yg bisa sobat baca! Melakukan keliling ternyata para developer sedang rajin pada membuat tolls warna. Ini ada beberapa gue dapet, colorable, colouris and .colors(). Ini baru juga sob, tool untuk melihat jumlah kata/kalimat word counter. Rada susah untuk saya dalam mengikuti perkembangan berita dari web Codrops. Karena web browser engine ane tidak update :D

Dikarenakan belum ada yg keren punya, dan lagi pada doyan membuat tools, maka dari itu AA Koben juga akan berbagi sedikit 1 buah tools bagi kalian ;)) Bagusnya enggak seberapa dan sudah tersedia pada setiap bawaan engine-browser. Kalian sudah pada kenal tentunya, tak lain dan tak bukan tool tersebut adalah fitur View Page Source. Klik kanan pada mouse atau pencet tombol keyboard Ctrl + U langkah tercepat untuk mengaksesnya!
Kalau mau melihat page source 10 halaman pages-site sekaligus bagaimana, dan tanpa membuka halaman tersebut terlebih dahulu?

Silahkan bagi kalian yg perlu, lakukan Save Page As pada link berikut view-page-source.

Kalau mau berjalan secara offline, silahkan buka hasil save pada text editor kalian, kemudian cari kode...<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>...gantikan link jQuery kepunyaan google dengan link script jQuery yg ada pada komputer/host/hard-disk/flash-disk kalian!

BONUS

Css text effects - Social.svg.min - CSS-Cursors - Simple and Responsive Menu (HTML5 and CSS3 only) - Full Page Horizontal Accordion - Pure CSS Emoji Checkbox - Inspirational hover in portrait image - The Social Drawer

Save Page As in Format Reader View Firefox Trick

2018-01-24T16:58:00.000+07:00

Apa yang sobat lakukan jika menemukan sebuah link page dimana kontennya tampak berguna. Apalagi kegunannya itu bisa dipakai di kemudian hari. Minimal pasti kita akan melakukan save link tersebut! Cara lain yaitu dengan melakukan Save Page As... toh? AA Koben akan berbagi trik & tips bagaimana cara menyimpan/mengkoleksi links-page yg bermanfaat bagi kita, untuk bisa dibaca kapan saja sobat inginkan! Cara tercepat sudah tentu melakukan Save Page As...(Web Page, complete), cara kedua dengan jasa web convertor (image, PDF, Word, or etc), cara ketiga dengan bantuan tools bawaan browser (Web Developer).

Ide ini saya dapatkan dengan menggunakan browser mozilla, dimana pada browser engine ini terdapat satu fitur Enter Reader View (berada tepat dibelakang box search dekat tombol Reload Page), ditandai dengan icon buku.Kalau icon buku tidak muncul, sobat bisa melakukannya secara manual dengan rumusan about:reader?url=LINK-TUJUAN Kita akan melakukan Save Page As... di mana posisi halaman page terbuka dengan format Reader View :-? Sebagai contoh silahkan sobat download About-Reader.7z kemudian ekstrak.

Tahapan dalam membuat Reader-View adalah

Buat satu folder dan beri title (About-Reader).
Di dalam folder About-Reader, buat sebuah folder lagi beri title (Data-files).
Di dalam folder Data-files, buat kembali 3 buah folder (atau lebih sesuai kebutuhan) beri nama (css, image, and js)

Folder-folder tersebut gunanya adalah untuk menyimpan data hasil dari melakukan Save Page As...dengan format Reader-View.
Ilustrasi...
Ketika sobat menemukan halaman website dan dirasakan isi konten sangat bermanfaat, lakukan klik pada icon buku (Enter Reader View). Dilanjutkan dengan klik kanan pada mouse (pada keyboard pencet Ctrl + S) Simpan hasil save pada folder yg dibuat tadi (dalam contoh folder About-Reader)

Nanti akan didapatkan 2 jenis hasil save file yg berbeda. Saya melakukan percobaan dengan link address https://www.w3schools.com/html/default.asp Ketika di save akan menghasilkan hasil save-an HTML Tutorial.htm dan HTML Tutorial_files Buka folder HTML Tutorial_files, kalau ada gambar simpan gambar tersebut pada folder image yg berada di folder Data-files.
Kemudian buka teks editor sobat (Notepad), buka file HTML Tutorial.htm, gantikan semua link yg tertuju ke folder HTML Tutorial_files degantikan dengan link ke Data-files (css, images, and js).

Memang agak sedikit kelihatan ribet, tetapi kalau sudah dipraktekan sangatlah mudah sob :) Inti dari trik ini membuat semua halaman page yg ingin kita simpan tetapi dalam format Reader-View. Dengan begini, kita tidak usah melakukan save CSS, JS secara utuh seperti kita melakukan Save Page As... secara normal. Kalau normal CSS/JS yg tidak perlu akan ikut tersave!
Semoga kalian faham & mengerti apa yg saya maksudkan, sebagai contoh hasil kerja saya melakukan save-page-as dengan format reader-view, dengan korban web

https://adam-marsden.co.uk/css-cheat-sheet

Download CSS Cheat Sheet on Reader-View Mode.
Bonus

Recursive Hover Nav (Only CSS) - MacOS Dock with CSS - Floating Nav to Top Fix Expand v2 - Split Text Menu - VVVVV - Show Hide - Drop Menu Pure CSS3 - Curtain Reveal Effect with Sticky Positioning & Scroll Snap Points No-JS - Bubbly button (Design by Gal Shir) - HTML5 Tags

Add Syntax Highlighter with Tag pre, div, code, p

2018-01-11T15:54:00.000+07:00

Banyak sekali kegunaan dari keberadaan fitur syntax highlighter Apalagi bagi kalangan para coderer, programmer, writer, or blogger! Sangkin pentingnya banyak di luaran sana web online yang menawarkan jasa pemasangan/pemakaian dari SyntaxHighlighter. Paling instant dan mengenakan sobat bisa mencoba: hilite, highlight.hohli, or tohtml. Kalau sobat pengen permanen dipasangkan di blog, maka pilihan AA Koben patut diperhitungkan ;))
Pilihanku jatuh kepada CodeMirror. Yes, kenapa gue memilih ini, karena ada beberapa penggunaan tag yg tidak biasa dalam pemakaiannya nanti! Pada umumnya taging yg di gunakan dalam pemakaian syntax-highlighting ketika sobat melakukan posting code/script adalah penggunaan tag <pre> atau <code>

Dengan bantuan codemirror & jQuery, sekarang kita bisa menuliskan script/coded secara suka-suka. Nanti sobat bisa memakai tag pre, code, div, p, or etc dalam pemanggilannya. Bahan-bahan yg mesti tersedia adalah...

Requirements


<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/htmlmixed/htmlmixed.min.js"></script&gt;

.codek {
    margin: 0;
    vertical-align: middle;
}
.inline {
    display: inline-block;
    margin: 0;
}
.CodeMirror,.CodeMirror-scroll {
    height: auto !important;   
    overflow: hidden;
}
.CodeMirror-sizer,.CodeMirror-linenumbers {
    background: #FFF;
}

Tempatkan bahan² di tempat semestinya :D Tambahkan declaration properti CSS sesuai selera. Jika sudah terpasang, jQuery script, tidak usah dipasangkan lagi. Perhatikan juga mode codemirror-nya. Pada kasus ini saya mencomot mode htmlmixed. Kalian bisa ganti/tambahkan sesuai kebutuhan modenya. Ane juga memakai link via CDN by cdnjs.

Langkah terakhir pasangkan seonggok script berikut sebelum/diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
$('.codek').each(function() {    
    var $this = $(this),
        $code = $this.html(),
        $unescaped = $('<div/>').html($code).text();   
    $this.empty();
    CodeMirror(this, {
        value: $unescaped,
        mode: 'javascript',
        lineNumbers: !$this.is('.inline'),
        readOnly: true
    });    
});
//]]>
</script>

Ketika mau postingkan kode/script ada baiknya di lakukan phrase terlebih dahulu. Berikut tag yang bisa kalian pergunakan dalam postingan...

<code class="codek inline">Your

balh-bleh-bloh</code>

<div class="codek">bleh() { 

    return bloh;

}</div>

<div class="codek inline"><h4>unescape test</h4></div>

<pre class="codek">

    your phrase script add here

</pre>

Kuncinya harus ada class="codek"

Source & demo by jsfiddle.net/mofle/tZVsS

BONUS

Menu - CSS Mega Menu - CSS 3d box - Product Template powered with Bootstrap - Pure CSS Drag & Drop - Gooey text background with SVG filters - Sticky Title/Page Progress Bar - Hexagon Badges with Font Awesome icons - CSS Transform Creator - CSS-Only Nested Dropdown Navigation - CSS-only shimmering neon text - Pure CSS Background Image Scroll Effect - Perspective Nav CSS Only One Page Design

Bye :-h

Try-It-Yourself Code Editor Offline ++

2017-12-30T15:41:00.000+07:00

Setiap bertemu dengan bagian akhir kebanyakan dari kita mengucapkan, tidak terasa sudah di penghujung tahun 2017 lagi yah! Dilanjutkan dengan, selamat datang tahun baru 2018...~~WTF~~. Dengan seiring bergantinya tahun ke tahun sudah tentu diikuti dengan silih bergantinya sesuatu itu sendiri. Yang tua digantikan sama yang muda, yang usang jadi baru kembali, siklus ya begitu 3:-O
Di penghujung tahun ini, AA Koben akan berbagi sedikit informasi ringan. Apakah kalian penggemar dari Font Awesome? Silahkan sikat versi terbaru yaitu Font Awesome 5 Released! Kurang seru kalau awesome cuma sejenis! Nih awesome yg lain buat kalian agar lebih awwsome lagih emoji-awesome. Salah satu trik jika ingin membuat emotikon tanpa menggunakan javascsript, full CSS dan image doang B-)

Salah satu andalan bahan untuk postingan di blog ini adalah mengenai HTML Editor Saya tidak bosan² berburu terus sampe bosan =)) Menclok di blogsite www.bachors.com, silahkan sobat kunjungi sekedar melihat-lihat. Ican Bachors lumayan punya proyek/coding yg bisa kalian comot :D Ini salah satunya

Code Sandbox Fiddle

Kalau kurang, silahkan dipilah-pilih saja mau yg mana:

jstinker by eakman.
jstinker by johncipponeri.
Tiny-editor by lipten.
codeFiddle by sw4.

Saya sendiri sudah buatkan satu Try it Editor hasil nyomot buat kalian, itu juga kalau mau ;))

Sebenarnya kepunyaan javascriptkit.com :D Gue hanya ngedit sana-sini biar sedikit full style. JavaScript Kit Try-It-Yourself code editor di bangun menggunakan the high performance code editor for the web is ACE. Saya nemu ini juga ~~danielsadventure.info/HTML5FileDemo/SaxonInterface.html~~ gak tauk buat apaan. Ke dua tools tersebut bisa sobat miliki secara gratis :(|)

Download editor.javascriptkit.com via Google Drive.
Password .7z 2%!7%!-ZQBe^4g&K

Ini mah cuma iseng saja, silah cari ada tools apa saja di site ini Index of /, kalau ketemu bisa kalian miliki =))

Bai bay...:-h

Stylish Tools For You Bloggish

2017-12-06T16:48:00.001+07:00

Ketika sobat mengunjungi web codepen, coba tengok halaman fork, project atau new code. Begitupun coba biasakan oleh kalian ketika menyatroni web github, acak-acak halaman Repositoriesnya. Memang butuh waktu santai kalau mau melakukan itu semua ;)) Oke, saya akan berbagi karya cipta dari hasil mengacak-ngacak one repositories page git-hub by victornpb! This is the page victornpb (Victor) repositories. AA Koben menemukan ini urlchecker! Karena tidak ada demo page, maka saya download dulu, tampaklah seperti ini:Namanya urlchecker, mungkin tujuan kreasi itu adalah untuk mengecek url apakah masih aktif/tidak yang akan tampil di dalam konten iframe. Dulu saya pernah membuat hal serupa (menampilkan web pada kolom frame meny style), tetapi lupa judul postingannya :D
Dikarenakan tampilan url-checker masih polos, saya coba memasukan bootstrap by bootstrapious. Ternyata cukup memusingkan harus tahu selector, description, identify bla-bla-bla untuk membuatnya #:-S Hasil akhir Fitur apa saja yang gue tanamkan di sana...hohoho :-"

Mini CodePen in 439 Bytes get from Tommy Hodgins.codegolfIDEmarkdown-herebrowserpadjQuery MiniColors

Itulah fitur-fitur yg gue cekokin, di samping fitur tersembunyi lainnya! Apakah sobat tertarik memiliki itu semua? Silahkan beli seharga $1 billion =)) Download saja, kemudian silahkan kalian tes-tes dan pelajari sendiri karyaku ini :-B
Download here urlchecker modification by Beben-Koben URLchecker-Project.7z - Google Drive.

Kalau websitenya pakai anti iframe, tidak akan muncul, dan kalau ada website yang memasang ikaln popup akan terdeteksi, sobat tinggal pencet tombol TAB pada keyboard untuk mengizinkan.

BONUS

To-do List with animated interactions - Text Image Mosaic - Menu - Radio Button Group with Gradient - Image loading effects [background-size: 0, :before, :after] - CSS Mega Menu - CSS 3d box - editable content - Product Template powered with Bootstrap - Pure CSS Drag & Drop - Morphing Fullscreen Navigation Menu [~60fps animation]

Tunggu karya-karyaku yang lainnya okeee *-:) :-h

Are You Looking for Image Editor

2017-11-27T23:22:00.000+07:00

Gara-gara memosting tentang image tilt fffect CSS, saya jadi melanglang buana menjelajah! Ternyata kalau kita berbicara mengenai efek pada gambar, itu bisa termasuk juga ke dalam tutorial dengan tema image manipulation (manipulasi gambar) :D Salah satu javascript yang lumayan terkenal dalam urusan memanipulasi gambar adalah CamanJS.
Berikut beberapa sources kreasi yg memakai Caman-JavaScript:

CamanJS Interactive Examples.
CamanJS Filter Example.
Image Editor Demo Built with Caman.

Dari ketiga rujukan itu, ternyata tidak ada yg menyertakan fitur upload image dari local storage :-?? Saya jadi penasaran, dan mencoba-coba kasak-kusuk dengan modal nekat mencari cara bagaimana dari ke-3 source di atas digabungkan fitur-fiturnya plus fitur upload local image from your storage? Hasil akhir seperti berikut:Karena saya pengguna sejati mozilla, karya ini hanya bisa di buka pada browser tersebut :D Soalnya kalau di buka di chrome ada perbedaan penulisan path yg mana saya malas alias tidak ngerti kinerja browser google chrome ;)) Bagi yg berminat mencoba dan mengembangkan silahkan download CamanJS 127 KB.
Tested on mozilla versi 42 & 52. Kalau kepengen yg lebih canggih dan keren punya juga ada kok! Let's cekidot...

jspaint

miniPaint

webgl-filter

pm-image-editor

JsImgEditor

nuophoto

jie

tui image-editor

summer

iwage

imageeditor by ckm100

photo-editor

Sino Image Editor

Image Editor by Tom Yuan

Html Image Editor

editest

Harap diperhatikan syarat-syarat yg berlaku baik itu file atau browser sobat sudah mendukung atau belum (canvas, webgl, etc). Satu lagi, karena ini permainan dengan si canvas, jangan coba-coba ngedit gambar dengan size yg besar kalau nggak mau browsernya nge hang yah >:)

Jangan tanya saya soal script, karena saya tidak mengerti sama sekali ^:)^

Image Tilt Effect CSS Stand Alone

2017-11-15T18:03:00.000+07:00

Salah satu cara mendapatkan ide untuk postingan adalah mengacak-ngacak arsip web-blog orang :D In 2015/05/28 master Mary Lou telah memposting tentang Image Tilt Effect. Silahkan sobat baca, lihat demonya kemudian jangan lupa download juga sourcenya. Menurut gue pengertian tilt effect adalah suatu efek ngeblur, berbayang, bergerak-gerak di campur menjadi satu...nah begitu kira-kira ;)) AA Koben cuman mau menjelaskan cara bagaimana pemakaian image tilt-effect karya Mary-Lou ini!

Perhatian: Teknik ini menggunakan beberapa properti CSS yang hanya bekerja di browser modern (yaitu 3D Transforms). Efeknya hanya bekerja pada hover yang berarti efeknya tidak dapat dilihat pada perangkat sentuh pada saat ini.

Setelah mendapatkan hasil download berupa ImageTiltEffect.zip silahkan sobat lakukan un-zip. Kalau di sana file menjadi satu dengan keterangan dan demo dari si-empunya. Inilah tugas saya untuk memisahkan bumbu-bumbu utama dalam membangun efek tilt. Hal pertama yang mesti sobat lakukan adalah memasang tilteffect.css & tiltfx.js ke dalam template blog

Berikut adalah kode CSS hasil pemisahan yg saya buat. Silahkan sobat edit-edit lagi sesuai dengan keperluan. Kalau sobat sudah mempunyai CSS selector gambar pd template, tinggal atur-atur propertinya saja!

.tilt_img {
position: relative;
height: 0;
width: 400px;
height: 300px;
margin: 5px auto;
cursor: move;
}
.tilt_img-4 {
overflow: hidden;
}
.tilt_img img {
max-width: 100%;
display: block;
}
.tilt_img-2::after {
content: '';
position: absolute;
box-shadow: inset 0 0 50px 30px rgba(2,0,37,0.8);
pointer-events: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.tilt_img-3 .tilt {
-webkit-filter: grayscale(100%) brightness(105%) contrast(120%);
filter: grayscale(100%) brightness(105%) contrast(120%);
-webkit-transition: filter 0.5s, -webkit-filter 0.5s;
transition: filter 0.5s, -webkit-filter 0.5s;
}
.tilt_img-3 .tilt:hover {
-webkit-filter: none;
filter: none;
}
.tilt_img-4 .tilt {
width: 120%;
height: 120%;
top: -10%;
left: -10%;
}

/* tilteffect.css */
.tilt {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.tilt__back,.tilt__front {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tilt__back {
position: relative;
}
.tilt__front {
position: absolute;
top: 0;
left: 0;
}
.tilt_img-border .tilt__back,.tilt_img-border .tilt__front {
border: 1px solid #333;
}
.tilt_img-border .tilt {
overflow: visible;
}

Ada 12 macam efek yg bisa kalian dapatkan, selain penggunaan untuk background! Sobat bisa lihat demonya. Sudah begitu aja ah...wekekekekkk =:)

Similar and other

Dua Cool CSS3 Effect.
Cool CSS3 Zooming and Tilting Effect
Mouse over Parallax or 3D Tilt Effect
jQuery Plugin To Create Tilt / Parallax Effects For Images
A tiny parallax tilt effect for jQuery

Bay Bai :-h