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