Make Awesome Box Modal & Accordion Pure using CSS

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!

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

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!

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:

1. Border radius
2. 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