Update Post November 2016

Mungkin salah satu cara agar eksis memposting di blog adalah melakukan update artikel yang sudah pernah dibahas sob :D Waktu itu AA Koben pernah bercerita tentang seekor kancil eh salah, pure CSS cinema effect! Pada sesi itu masih menyertakan sebuah gambar untuk memperlihatkan efek cinemanya. Nah kesempatan kali ini murni 100% akan menggunakan kode CSS.
Look demo in make cinema grain effect use css3 Source by Old Timey Film In 1 Div

.pane {
height: 350px;
width: 500px;
margin: 15px auto;
overflow: hidden;
position: relative;
filter: sepia(100%);
border: 5px dashed #111;
background-repeat: no-repeat;
background-color: transparent;
background-position: center 0px;
animation: jitter 5s linear infinite;
}
.pane img {
top: 50%;
left: 50%;
width: auto;
height: 100%;
position: absolute;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.pane:hover,.pane:hover:before,.pane:hover:after {
border: none;
filter: none;
animation: none;
background: none;
transition: all .5s ease-in-out;
}
.pane:before {
top: 0px;
left: 0px;
content: '';
width: 100%;
height: 100%;
padding: 5px 0;
filter:blur(2px);
position: absolute;
animation: jitter2 5s linear infinite;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 47%,rgba(0,0,0,0) 48%,rgba(0,0,0,1) 100%);
}
.pane:after {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
content: '';
filter:blur(3px);
position: absolute;
border-left: solid 1px black;
border-right: solid 1px black;
animation: artifacts 5s linear infinite;
}
@keyframes jitter {
0% {
}
10% {
background-position: center -10px;
}
21% {
background-position: center -5px;
filter:brightness(2) sepia(100%);
}
21.1% {
background-position: center -35px;
}
21.2% {
background-position: center -4px;
filter:brightness(1) sepia(100%);
}
21.3% {
background-position: center -25px;
}
21.4% {
background-position: center -52px;
}
21.5% {
background-position: center -5px;
}
21.6% {
background-position: center -60px;
}
22% {
background-position: center 0px;
}
91% {
background-position: center -5px;
}
91.1% {
background-position: center -35px;
}
91.9% {
background-position: center -4px;
}
91.3% {
background-position: center -95px;
}
91.4% {
background-position: center -59px;
}
91.5% {
background-position: center -5px;
}
91.6% {
background-position: center -60px;
}
99% {
background-position: center 0px;
}
}
@keyframes jitter2 {
0% {
}
10% {
margin-top:-10px;
content: '°';
color:rgba(0,0,0,.6);
}
21% {
margin-top:-5px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.31) 47%,rgba(0,0,0,.2) 48%,rgba(0,0,0,1) 100%);
content:'';
}
21.1% {
margin-top:-25px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.31) 47%,rgba(0,0,0,.2) 48%,rgba(0,0,0,1) 100%);
}
21.2% {
margin-top:-4px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 47%,rgba(0,0,0,0) 48%,rgba(0,0,0,1) 100%);
}
21.3% {
margin-top:-15px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.31) 47%,rgba(0,0,0,.2) 48%,rgba(0,0,0,1) 100%);
}
21.4% {
margin-top:-25px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 47%,rgba(0,0,0,0) 48%,rgba(0,0,0,1) 100%);
}
21.5% {
margin-top:-5px;
}
21.6% {
margin-top:-30px;
}
22% {
margin-top:0px;
}
91% {
margin-top:-5px;
}
91.1% {
margin-top:-25px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.31) 47%,rgba(0,0,0,.2) 48%,rgba(0,0,0,1) 100%);
}
91.9% {
margin-top:-4px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 47%,rgba(0,0,0,0) 48%,rgba(0,0,0,1) 100%);
}
91.3% {
margin-top:-5px;
}
91.4% {
margin-top:-21px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.31) 47%,rgba(0,0,0,.2) 48%,rgba(0,0,0,1) 100%);
}
91.5% {
margin-top:-5px;
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.01) 47%,rgba(0,0,0,0) 48%,rgba(0,0,0,1) 100%);
}
91.6% {
margin-top:-31px;
}
99% {
margin-top:0px;
}
}
@keyframes artifacts{
0%{
left:0%;
width:100%;
}
20%{
left:20%;
width:70%;
}
40%{
left:10%;
width:80%;
}
60%{
left:50%;
width:0%;
filter:blur(5px);
}
80%{
left:60%;
width:20%;
}
90%{
left:10%;
width:60%;
filter:blur(3px);
}
100%{
left:0%;
width:100%;
}
}

Syntax HTML<div class="pane">
<img src="LINK-IMAGE" alt="" />
</div>Harap perhatikan property CSS sudah memakai level 3. Tingkat advanced ;)) Selain kreasi efek yg tak kunjung habis, ada beberapa karya yang tak henti-henti selalu saja ada yg membuat :"> Do you still remember about CSS TABS! Fitur yg punya fungsi mirip dengan accordion Lets how to make responsive pure css tabs & accordion, without position absolute & with a selected state.

.tabs {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 112%;
}
.tabs label {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
display: block;
padding: 0.7rem 1rem;
margin-right: 0.1rem;
cursor: pointer;
background: #90CAF9;
font-weight: bold;
-webkit-transition: background ease 0.2s;
transition: background ease 0.2s;
}
.tabs .tab {
-webkit-box-ordinal-group: 100;
-webkit-order: 99;
-ms-flex-order: 99;
order: 99;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
background: #fff;
}
.tabs input[type="radio"] {
position: absolute;
opacity: 0;
}
.tabs input[type="radio"]:checked + label {
background: #fff;
}
.tabs input[type="radio"]:checked + label + .tab {
display: block;
}
@media (max-width: 45em) {
.tabs .tab,
.tabs label {
-webkit-box-ordinal-group: NaN;
-webkit-order: initial;
-ms-flex-order: initial;
order: initial;
}
.tabs label {
width: 100%;
margin-right: 0;
margin-top: 0.2rem;
}
}

<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">Tab One</label>
<div class="tab">
<p>YOUR CONTENT I HERE.</p>
</div>

<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">Tab Two</label>
<div class="tab">
<p>YOUR CONTENT II HERE..</p>
</div>

<input type="radio" name="tabs" id="tabthree">
<label for="tabthree">Tab Three</label>
<div class="tab">
<p>YOUR CONTENT III HERE...</p>
</div>
</div>

Jika sobat kepengen menambahkan koten tab, harus perhatikan baris kode berikut

<input type="radio" name="tabs" id="UNIK-ID">
 <label for="UNIK-ID">Tab Three</label>

Harus sama dalam kesatuan tagging, berbeda secara keseluruhan.
Source & demo by mikestreety

Efek sudah, urusan tabs beres juga, terakhir bonus AA akan coba-coba bahas salah satu topik yg tidak kunjung abis pada ngebahas yaitu mengenai hover
Now i will shared to you, how to make hover with shine effect!

.btn-wrapper {
display: block;
margin: 10px 0 0 -74.5px;
text-align: center;
}
.btn {
display: inline-block;
background: #A09EBB;
padding: 10px 30px;
position: absolute;
z-index: 0;
overflow: hidden;
cursor: pointer;
border-radius: 2px;
color: #FFF;
border: 1px solid #6c3b96;
font-weight: bold;
font-family: sans-serif;
letter-spacing: 1px;
}
.btn:after {
content: "";
display: inline-block;
position: absolute;
z-index: 1;
background: rgba(255,255,255,0.1);
width: 150%;
height: 100%;
bottom: -80px;
right: 40px;
transform: rotate(35deg);
}
.btn-wrapper:hover a {
animation: grow 600ms ease-in-out forwards;
}
.btn-wrapper:hover a:after {
animation: shine 2s ease-in-out forwards;
animation-iteration-count: infinite;
}
@keyframes shine {
from {
transform: translateX (0px) translateY(0px) rotate(35deg);
opacity: 0.1;
}
to {
transform: translateX (200px) translateY(-300px) rotate(35deg);
opacity: 1;
}
}
@keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}

HTML language syntax<div class="btn-wrapper">
<a href="" class="btn">TITLE</a>
</div>Demo in hover and shine Source by John Garcia

BONUS:

HEX 2 RGB 2 HSL Conversion - Pure CSS Flickering TV screen - CSS Icons - CSS Hover Effects for Links - Descender Capable Underlines - Dots (Image Interpolation) - Quick modal animation test - Image Instagram like - Hidden menu - Printer Pull Down To Refresh - Hamburger Icon Animations - Sticky positioning - FAB Animation: Share Button - Material Cards Design - User Profile - Styling without ids/classes - gradient-randomizer - CSS Only Image Tile Filtering Effect - Woohooo! - Quick nav with sub-menu - Links with Marginalia Notes - Basic Tooltip - pure css drawer - Email Vault - Throw your letters

Bye :-h