da 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
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 mod
ol 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 ;)
BonuspreviewSlider - 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
Sekarang AA Koben mau coba berbagi 
Nanti setelah ditambahkan efek CSS hitam-putih (black & white) akan menjadi beginong.
Bagaimana bisa menjadi begitu, berikut bumbu-bumbu CSS untuk meraciknya.
Efek 
Efek 
Efek 
Efek 
Efek 
Source and all demo can you find it Apply css filters on a video in pure CSS.
