Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS
Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.
Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.
Your ads here!!!
Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

Resources

21 Februari 2015

UNTITLED

21 Februari 2015

0 Komentar WTF
Berbicara tentang efek di dunia website memang susah habisnya. Selalu saja ada kreasi baru berdatangan dari para master koding! Apakah sobat pernah melihat film televisi jadul dengan gaya warna cuma hitam-putih dan terdapat garis-garis serta runyeum semut menyertai? Dalam dunia CSS hal seperti itu bisa dinamakan dengan CSS Cinema Effect, Film Grain Effect with CSS3 atau yg lain. Gue punya 2 link resource berbicara mengenai hal ini Creating a Film Grain Effect with CSS3 dan Pure CSS Cinema Effect.

Karena kurang kerjaan dan artikel unik lagi susah carinya plus nungguin berbuka puasa menahan lapar & dahaga, AA coba-coba gabungkan saja kode CSS dari kedua resource tersebut ;))
Untuk menerapkan efek cinema film terhadap gambar, sobat harus mempunyai 2 gambar ini terlebih dahulu (Lakukan Save As, lalu hosting masing²):

  1. Grain.PNG
  2. Scratch.PNG
DEMO

.grain {
width: 400px;
height: 300px;
display: block;
overflow: hidden;
margin: 3em auto;
position: relative;
transition: all 0.5s ease-out 0s;
}
.grain img {
max-width: 400px;
max-height: 300px;
width: 100%;
height: inherit !important;
}
.grain:hover,.grain:hover:after {
transform: scale(1.3);
background: transparent !important;
box-shadow: 0 0 3px #333;
}
.grain > * {
z-index: 2;
}
.grain:after {
background: url("Grain.PNG");
content: "";
left: -100%;
top: -103%;
width: 300%;
height: 300%;
z-index: 1;
display: block;
position: absolute;
animation: grain .5s steps(1) infinite;
-webkit-animation: grain .5s steps(1) infinite;
}
.grain span {
color: #fff;
display: block;
font-family: initial;
letter-spacing: 1px;
line-height: 10px;
position: relative;
text-align: center;
bottom: 25px;
text-align: center;
text-shadow: 0 3px 1px rgba(0, 0, 0, 0.4);
}
.outer-scratch, .inner-scratch {
height: inherit;
}
.outer-scratch:after, .inner-scratch:after {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .09;
position: absolute;
padding-left: 100px;
animation: scratch 0.55s steps(1) infinite;
-webkit-animation: scratch 0.55s steps(1) infinite;
background: url("Scratch.PNG") repeat center center;
}
.inner-scratch:after {
left: 30%;
animation: inner-scratch 2s infinite;
-webkit-animation: inner-scratch 2s infinite;
}
@keyframes grain{0%,100%{-moz-transform:translate(0,0);-ms-transform:translate(0,0);-webkit-transform:translate(0,0);transform:translate(0,0)}10%{-moz-transform:translate(-5%,-10%);-ms-transform:translate(-5%,-10%);-webkit-transform:translate(-5%,-10%);transform:translate(-5%,-10%)}20%{-moz-transform:translate(-15%,5%);-ms-transform:translate(-15%,5%);-webkit-transform:translate(-15%,5%);transform:translate(-15%,5%)}30%{-moz-transform:translate(7%,-25%);-ms-transform:translate(7%,-25%);-webkit-transform:translate(7%,-25%);transform:translate(7%,-25%)}40%{-moz-transform:translate(-5%,25%);-ms-transform:translate(-5%,25%);-webkit-transform:translate(-5%,25%);transform:translate(-5%,25%)}50%{-moz-transform:translate(-15%,10%);-ms-transform:translate(-15%,10%);-webkit-transform:translate(-15%,10%);transform:translate(-15%,10%)}60%{-moz-transform:translate(15%,0%);-ms-transform:translate(15%,0%);-webkit-transform:translate(15%,0%);transform:translate(15%,0%)}70%{-moz-transform:translate(0%,15%);-ms-transform:translate(0%,15%);-webkit-transform:translate(0%,15%);transform:translate(0%,15%)}80%{-moz-transform:translate(3%,35%);-ms-transform:translate(3%,35%);-webkit-transform:translate(3%,35%);transform:translate(3%,35%)}90%{-moz-transform:translate(-10%,10%);-ms-transform:translate(-10%,10%);-webkit-transform:translate(-10%,10%);transform:translate(-10%,10%)}}
@keyframes scratch{0%,100%{transform:translateX (0);opacity:0.075}10%{transform:translateX (-1%)}20%{transform:translateX (1%)}30%{transform:translateX (-2%);opacity:0.09}40%{transform:translateX (3%)}50%{transform:translateX (-3%);opacity:0.05}60%{transform:translateX (8%)}70%{transform:translateX (-3%)}80%{transform:translateX (10%);opacity:0.02}90%{transform:translateX (-2%)}}
@keyframes inner-scratch{0%{transform:translateX (0);opacity:0.08}10%{transform:translateX (-1%)}20%{transform:translateX (1%)}30%{transform:translateX (-2%)}40%{transform:translateX (3%)}50%{transform:translateX (-3%);opacity:0.06}60%{transform:translateX (8%)}70%{transform:translateX (-3%)}80%{transform:translateX (10%);opacity:0.03}90%{transform:translateX (20%)}100%{transform:translateX (30%)}}
<div class="grain">
<div class="outer-scratch"><div class="inner-scratch">
<img src="LINK-IMAGE" alt=""/>
  <span>Keterangan or Kata-Kata</span>
</div></div>
</div>
BONUS:
Material Multi-Button Pure CSS - Drop the CAPS! 🎤🎤 - Too many icons... - A Pen by Stefan Göllner - CSS Animation/Transition Demos - Text Shadow Generator - Halftone Newspaper Effect with SVG Filters (Chrome) - pure CSS, 1 element crossbrowser reflection - The Matrix GIF Maker - 3D accordion (simple folding paper effect) - React Markdown Previewer - Form with a bunch of HTML5 Validation and CSS3 Help - jrreeJ reveal navigation - Css3 Transform - Invisible Ink | Mouse Over! iOS 10 - Expounder - Show container height/width using SVG - Social share urls

0 Komentar WTF
Waktu masih kecil, mungkin sobat pernah naik korsel! Kalau di dunia HTML korsel yang dimaksudkan bukan seperti yg kita duga? Carousel nama proyek besutan dari DizzyZane. Inspirasi dari Carousel CSS Only (JS optional) from codepen, dikembangkan dengan menambahkan click for fullscreen :-) Carousel di sini adalah tidak lain slider image Untuk lebih jelas silahkan lihat demo https://dizzyzane.github.io/carousel-css Source file: Carousel made using Jade, Stylus.
Setelah melihat kodenya, AA Koben comot CSS code yg membuat image menjadi bisa full-screen ketika di klik! Diterapkan untuk single image. Seperti apa jadinya ramuan...let's bekicot!!!

codepen.io/beben-koben/full/LZEYBR

.carousel-container {
padding: 0;
margin: 0 auto;
display: block;
max-width: 100%;
width: 400px;
height: 300px;
position: relative;
list-style-type: none;
}
.carousel-container .carousel-content {
height: 300px;
overflow: hidden;
background: rgba(0,0,0,0.9);
position: absolute;
top: 0;
box-shadow: 0 5px 5px -5px #333;
padding: 0;
text-align: center;
line-height: 296px;
}
.carousel-container .carousel-content img {
opacity: 0;
padding: 0;
width: auto;
height: auto;
max-height: 300px;
max-width: 400px;
vertical-align: middle;
-webkit-animation-name: ziim;
-webkit-animation-duration: 0.6s;
animation-name: ziim;
animation-duration: 0.6s;
}
@-webkit-keyframes ziim {
from {-webkit-transform:scale(1)}
to {-webkit-transform:scale(0)}
}
@keyframes ziim {
from {transform:scale(1)}
to {transform:scale(0)}
}
.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;
}
.carousel-fullscreen {
position: absolute;
bottom: 0;
right: 0;
margin: 0 4px 4px 0;
width: 27px;
height: 27px;
cursor: pointer;
background: #000 url('IMAGE 27px x 27px') no-repeat center center;
}
.carouselFullScreen:checked,.carouselFullScreen.active {
display: block;
height: 100%;
}
.carouselFullScreen:checked+.carousel-container,.carouselFullScreen.active+.carousel-container {
margin: 0;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.carouselFullScreen:checked+.carousel-container .carousel-toggle:checked ~.carousel-content >li,.carouselFullScreen.active+.carousel-container .carousel-toggle:checked ~.carousel-content >li {
height: 100%;
line-height: 99vh;
}
.carouselFullScreen:checked+.carousel-container .carousel-fullscreen,.carouselFullScreen.active+.carousel-container .carousel-fullscreen {
width: 54px;
height: 54px;
background: #000 url('IMAGE 54px x 54px') no-repeat center center;
}
.carouselFullScreen:checked+.carousel-container img,.carouselFullScreen.active+.carousel-container img {
width: auto;
height: 100%;
max-height: 100vh;
max-width: 100vw;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
input[type=checkbox].carouselFullScreen,input[type=checkbox].carousel-toggle {
visibility: hidden;
}
Silahkan edit-edit kembali sesuai dengan kebutuhan masing-masing :) Gantikan kode IMAGE 27px x 27px dan IMAGE 54px x 54px dengan gambar kreasi kalian. Itu gambar untuk menandakan click full screen!
<input id="UNIK-ID" type="checkbox" class="carouselFullScreen" />
    <ul class="carousel-container">
        <li>
            <input type="checkbox" checked="checked" class="carousel-toggle" />
            <ul class="carousel-content">
                <li><img src="LINK-GAMBAR" alt="" /></li>
            </ul>
        </li>
        <label for="UNIK-ID" class="carousel-fullscreen"></label>
</ul>
Perhatikan code UNIK-ID harus sama dalam satu kesatuan dan harus berbeda untuk membuat lebih dari satu image.
DONE.
Bonus:
CSS + HTML only Accordion Element - jQuery Facebook album browser (sample-all-albums) - One font a day keeps the doctor away - Header Navigation Menu - ASCII-art folder structure diagram in semantic markup + CSS - Facebook Album Browser - HTML5 Accessibility - flag-icon-css - emojionearea - Image hover effects that work with or without bootstrap - How to Use the HTML5 Full-Screen API - Full screen image viewer - CSS loaders and timing functions - CSS-only modal
See you :-h

0 Komentar WTF
Melanjutkan tema postingan sebelumnya mengenai bumpy lists for full style lists content. Jadi artikel sekarang masih berkutat seputar klik srot merosot :P Ada yang bilang dropdown dan ada pula yang berkata select box! Kalau dilihat-lihat berbeda namun ada kemiripan dalam fungsinya? Satu yg pasti tetap srot merosot bro =)) Sekarang AA Koben akan berbagi tutorial bagaimana cara membuat CSS dropdown with hover. Jadi ketika melakukan sorot, akan merosotlah konten...tidak perlu repot-repot ;))
.dropdown {
z-index: 1000;
position: relative;
margin: auto;
width: 250px;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown .selection {
position: relative;
cursor: pointer;
background-color: #F1F1F1;
color: #737373;
padding: 10px;
z-index: 100;
border-radius: 3px;
margin-top: 20px;
}
.dropdown .selection:after {
position: absolute;
content: '';
top: 50%;
right: 8px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: 8px solid transparent;
border-bottom: 0;
border-top: 8px solid #737373;
width: 0;
}
.dropdown .options {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 100%;
min-width: 100%;
background-color: #FFF;
height: 0;
overflow: hidden;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown .options div {
padding: 0 10px;
cursor: pointer;
line-height: 1.5;
}
.dropdown .options div:hover {
background-color: #F1F1F1;
color: #333;
-webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown:hover .options {
height: auto;
padding: 10px 0;
}
.dropdown:hover .selection {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropdown:hover .selection:after {
border: 8px solid transparent;
border-top: 0;
border-bottom: 8px solid #737373;
}

<div class="dropdown">
<div class="selection">Selected</div>
<div class="options">
<div>List 1</div>
<div>List 2</div>
<div>List 3</div>
<div>List 4</div>
<div>List 5</div>
<div>List 6</div>
<div>List 7</div>
<div>List 8</div>
<div>List 9</div>
</div>
</div>
DEMO: codepen.io/beben-koben/full/xVooVq/

Ada satu lagi yang unik dan simpel, namun ada persamaan. A Pen By Kriszta talk about Card fold down effect with dynamic height. Jika sobat berminat, AA sudah meminimalisir kode yg ada tanpa mengurangi gaya full.

.task {
width: 50%;
min-width: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.abstract,.details {
width: 100%;
color: #282828;
padding: 1px 20px;
position: relative;
background: #fafafa;
}
.task:hover .abstract, .task:hover .details {
background: #fafafa;
}
.abstract {
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
.details {
max-height: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotateX (-180deg);
transform: rotateX (-180deg);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .3s transform ease;
transition: .3s transform ease;
}
.details:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: grey;
}
.task:hover .details {
max-height: none;
overflow: visible;
visibility: visible;
-webkit-transform: rotateX (0deg);
transform: rotateX (0deg);
}
.details__inner {
padding: 1px 20px;
}

<div class="wrap">
<div class="task">
<div class="abstract">
<h3>TITLE</h3>
<p>This is sub TITLE.</p>
</div>
<div class="details">
<div class="details__inner">
<h3>When HOver</h3>
<p>This additional content when hover.</p>
</div>
</div>
</div>
</div>
Dah begitu saja ya!

BONUS:
CSS only Select - Dropdown Menu Animation - Select Box with Placeholder [CSS Only] - Facebook Reactions (Mother's day sneak peak) - Distorted Button Effects with SVG Filters - Masking in the Browser with CSS and SVG - Making a scroll-dependent menu bar with CSS3 and JavaScript - Animated Transition Effects - CSS Dropdowns - How TO - Hoverable Dropdown - It's Drop Down but It's Select Box too Use CSS

0 Komentar WTF
Banyak cara untuk menyembunyikan konten! Beberapa yang sering di temui adalah dengan trik spoiler atau accordion Gue dapat trick bumpy lists! Deretan lists yg disembunyikan mirip dengan accordion! Kenapa dikatakan bumpy karena ada efek mental-mental ketika melakukan klik tutup bukanya ;)) Untuk lebih jelasnya silahkan lihat demo Bumpy lists: codepen.io/vsync/pen/EaObde Singkat cerita kalau sobat mempunyai list yg teramat panjang, maka solusinya sembunyikan dengan cara ini saja ;)
.bumpy {
list-style: none;
padding: 0;
margin: 10px auto;
width: 100%;
color: #fff;
}
.bumpy > li {
display: block;
}
.bumpy > li > input {
display: none;
}
.bumpy > li > input:checked ~ label {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-webkit-animation: none;
animation: none;
-webkit-transition: .1s;
transition: .1s;
}
.bumpy > li > input:checked ~ label > .toggleIcon::before {
opacity: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
text-shadow: 0 0 3px #333;
}
.bumpy > li > input:checked ~ label > .toggleIcon::after {
-webkit-transform: none;
transform: none;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.bumpy > li > input:checked ~ .options > ul {
margin-bottom: .7em;
}
.bumpy > li > input:checked ~ .options > ul > li {
margin: 0;
opacity: 1;
}
.bumpy > li > label {
display: block;
padding: 1em 1em 1em 3em;
background: #242C35;
position: relative;
z-index: 1;
border-radius: 3px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 0 0 #FFF;
-webkit-transition: .5s;
transition: .5s;
}
.bumpy > li > label > .toggleIcon {
position: absolute;
width: 1.2em;
height: 1.2em;
left: .8em;
top: 0;
bottom: 0;
margin: auto;
}
.bumpy > li > label > .toggleIcon::before, .bumpy > li > label > .toggleIcon::after {
content: '';
position: absolute;
background: #ccc;
-webkit-transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 1.4);
transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 1.4);
}
.bumpy > li > label > .toggleIcon::before {
width: 2px;
height: 100%;
left: calc(50% - 2px);
margin-left: 1px;
}
.bumpy > li > label > .toggleIcon::after {
width: 100%;
height: 2px;
top: calc(50% - 1px);
}
.bumpy > li > .options {
position: relative;
overflow: hidden;
}
.bumpy > li > .options > ul {
font-size: .9em;
list-style: none;
margin: -1em .6em 1em;
padding: 0;
border-radius: 0 0 4px 4px;
border: 5px solid rgba(255, 255, 255, 0.15);
-webkit-transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 2);
transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 2);
-webkit-perspective: 600px;
perspective: 600px;
}
.bumpy > li > .options > ul > li {
padding: .5em 1em;
margin-top: -5em;
border-bottom: 1px solid #eee;
position: relative;
cursor: pointer;
background: #F6F6F6;
color: #777;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-transition-property: margin, opacity;
transition-property: margin, opacity;
}
.bumpy > li > .options > ul > li:first-child {
padding-top: 2em;
}
.bumpy > li > .options > ul > li:last-child {
border: 0;
border-radius: 0 0 3px 3px;
}
.bumpy > li > .options > ul > li:hover {
background: lightyellow;
box-shadow: 5px 0 rgba(255, 255, 224, 0.1), -5px 0 rgba(255, 255, 224, 0.1);
}
@-webkit-keyframes bumpUp {
20% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bumpUp {
20% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: none;
transform: none;
}
}

<ul class="bumpy">
<li>
<input type="checkbox" id="item1"/>
<label for="item1">
<div class="toggleIcon"></div>BUMPY SATU
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
<li>
<input type="checkbox" id="item2"/>
<label for="item2">
<div class="toggleIcon"></div>BUMPY DUA
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
<li>
<input type="checkbox" id="item3"/>
<label for="item3">
<div class="toggleIcon"></div>BUMPY TIGA
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
<li>
<input type="checkbox" id="item4"/>
<label for="item4">
<div class="toggleIcon"></div>BUMPY EMPAT
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
</ul>
Kalau sobat mau menambahkan kotak list, perhatikan uniq id yg berada di input dan label!
<ul class="bumpy">
    <input type="checkbox" id="UNIQ-ID"/>
    <label for="UNIQ-ID">
      <div class="toggleIcon"></div>BUMPY 
    </label>
    <div class="options">
      <ul>
        <li>List.</li>
        <li>List..</li>
        <li>List...</li>
      </ul>
    </div>
  </li>
</ul>
BONUS...

flat accordion - (All) CSS Transforms Playground! - Simple side menu - Menu Animated Dropdown and Icon - Tuts+ CodePen Challenge #6: Transformers - Search input context animation - Beautiful Context Menu - Hover Color Random with out Default - Button Shine Effect CSS - HTML5 Table with Sticky Headers - - Daily UI SUBSCRIBE - CSS Only Shadow Scrolling Effect - CSS Fizzy Button - CSS Particle Effects - Drag to transform - Beach Escape - Punk Lettering - Blurred, Invisible Ink, and Redacted text (CSS only) - CSS Ribbon - Anchor Click Canvas Animation - MacBook scrolling animation on hover - DVD screensaver (marquee edition) - CSS3 ленточки - Releasing "Recent Comments Widget" For Blogger - Drake CSS Albums - The Cutting-Edge CSS3 Features That Are Essential to Modern Web Design - Quick Tip: Using CSS Counters to Style Incremental Elements - Creating Wavescroll
al-Quran

MISC

Resources

1 2 3 4 5 6 7 8 9

FACEBOOK PAGE