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
Welcome to 2017 year! AA Koben akan berbagi tutorial ringan bagaimana cara menghias gambar dengan menambahkan bingkai atau frame indah di setiap sisinya. Jadi jika sobat mempunyai sebuah image, kebetulan images tersebut memang layak diberikan keindahan dalam tampilannya, maka anda tidak salah membaca artikel ini :P
This is tutorial how to make iframe picture using CSS.
.frame img {
max-width: 100%;
max-height: 100%;
border: solid 2px;
border-color: #ccb #eed #ffe #eed;
}
.frame {
height: 80vh;
padding: 8vmin 0;
margin: 10px 28%;
border-radius: 3px;
position: relative;
text-align: center;
display: inline-block;
background-color: #ddc;
box-sizing: border-box;
border: solid 5vmin #eee;
border-color: #ddd #eee #fff #eee;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25) inset, 0 5px 10px 5px rgba(0, 0, 0, 0.25);
}
.frame:before {
content: "";
top: -2vmin;
left: -2vmin;
right: -2vmin;
bottom: -2vmin;
border-radius: 3px;
position: absolute;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25) inset;
}
.frame:after {
content: "";
top: -2.5vmin;
left: -2.5vmin;
right: -2.5vmin;
bottom: -2.5vmin;
position: absolute;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
<div class="frame">
  <img src="LINK-IMAGE" alt="" />
</div>
DEMO: codepen.io/chris22smith/full/PbBwjp/

Sudah begitu saja, kalau mau versi galeri berarti harus terus menyimak ;))

figure {
padding: 20px;
overflow: hidden;
position: relative;
border-width: 10px;
border-style: solid;
display: inline-block;
vertical-align: middle;
border-color: #ccc #ddd #efefef #ddd;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset, 0 5px 7px rgba(0, 0, 0, 0.5);
}
figure:before, figure:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
}
figure:before {
z-index: -2;
border: 30px solid #ddc;
box-shadow: 0 0 5px black inset;
}
figure:after {
z-index: -1;
background: transparent;
border-top-left-radius: 300% 300%;
box-shadow: -20px -20px 100px rgba(255, 255, 255, 0.5);
}
figure figcaption {
bottom: 6px;
right: 29px;
padding: 5px;
font-size: 16px;
position: absolute;
text-align: center;
white-space: nowrap;
display: inline-block;
max-width: calc(100% - 60px);
-webkit-transition: .3s;
transition: .3s;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(0.6);
transform: scale(0.6);
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;

}
figure figcaption:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
figure img {
z-index: -3;
width: auto;
height: 50vmin;
position: relative;
}
<figure title="YOUR TITLE I">
 <img src="LINK-IMAGE" alt="" />
 <figcaption>YOUR CAPTION IMG I</figcaption>
</figure>

<figure title="YOUR TITLE II">
 <img src="LINK-IMAGE" alt="" />
 <figcaption>YOUR CAPTION IMG II</figcaption>
</figure>
DEMO: codepen.io/vank0/full/BQqBOx/

BONUS:

Focal Point Picker - Multiple Dropdown Menus - World Places (CSS 3d hover) - BUTTON LOVE - Simple Button Rollover - Time in Words - Tilt to read - wick editor - polr - 110 CSS Menu - bttn.css - Masonry - csssecrets - csssecrets on dabblet - The SVG Font Machine

0 Komentar WTF
Sudah tiba lagi di penghujung tahun 2016, dan kita akan menyongsong tahun baru 2017! Semoga pada lembaran baru ini, semuanya berjalan dengan baik. Untuk menutup lembaran akhir two thousand and sixteen AA Koben akan berbagi tutorial lawas, ringan, tetapi full stylish :D yaitu tentang kotak pencarian or search form box
Kotak form pencarian sendiri kedudukannya pada sebuah weblog menurut ane sangatlah vital. Kadang suka jengkel ketika menemukan web-blog dengan konten menarik, akan tetapi apes tidak memiliki FORM Search Box #-o

Let's get this party started how to make form search box full stylish for styler blogger!
First of all don't forget to fully backup your template! If there is a mistake or do not like style of search box can be returned to the original :P
Letakan kode CSS pada tempatnya.

.kpb {
background: rgba(250,250,250,0.5) url('data:image/svg+xml;utf8,<svg focusable=\'false\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-17 -17 55 55\'><path d=\'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\'></path></svg>') no-repeat right;
border: 1px solid #f0f0f0;
width: 212px;
color: #333;
padding: 13px 15px;
border-radius: 4px;
transition: all .3s;
}
.kpb:focus {
background: rgba(255,255,255,0.5) url('data:image/svg+xml;utf8,<svg focusable=\'false\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-17 -17 55 55\'><path d=\'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\'></path></svg>') -19% 50% no-repeat;
outline: none;
color: #222;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);
}
.kpb:invalid + input[type="reset"].kpb_ {
display: none;
}
input[type="reset"].kpb_ {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAAKhJREFUeAGtkSkSAyEURPHo8fj4aDyXiEfj43OJ+Nxx9t+pl2X26Sp2+jWLa5rmUDkH0Cl05erWy5vnDShdeXUlLznN+LD9QQCvSWurCXPqypNhAgiSbbHfFLVgwDvWkhYIkCJTvlKLBTkCZu+JVD7yMkCpeBe/FhBhTHgXQiYBNxz5gnk+bqBh6hvDxBcCAgASssGmFHlCAqIdf0n85kLAVlVd8QIcKi0ErdubGmExugAAAABJRU5ErkJggg==');
background-position: center center;
background-repeat: no-repeat;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: 0px;
left: -37px;
}
Harap di perhatikan link gambar, gue pakai technique penulisan/convert base64
Planning HTML
<form action="" method="get">
   <input type="text" name="q" required="required" placeholder="Search here..." class="kpb"/>
   <input type="reset" value="" class="kpb_"/>
</form>
DEMO: codepen.io/beben-koben/full/VmRGJX/

BONUS

CSS Stylish Search Box - Block Reveal Effects - Search Box with Suggestions Dropdown - 404 Parallax using CSS variables - Avatars, github's style - CodeMirror Theme Builder - Fancy Buttons with Amazing Hover Effects - Sticky Pointers - IMAGES SHADOWS EFFECT - Pagination Pure CSS - Drag and Drop Coloring - 3D card - HTML Arrows - Text Emoticon Generator

<:-P \m/ >:D< :-h

0 Komentar WTF
Tidak terasa sudah sampai ke penghujung tahun 2016, dan akan kita songsong tahun 2017! Pada akhir tahun kebiasaan orang pasti telah merancang travelling alias jalan-jalan melancong ke daerah entah di mana :D Tema artikel saat ini adalah traveling to cool resource in the world. Jangan harap sobat blogger akan menemukan pemandangan indah, birunya langit dan dinginnya air terjun yah :))
Perjalanan akan kita mulai dari melihat jernih percikan air yg di bangun dengan teknologi HTML5 HTML5 water ripples demo. Jangan lupa kunjungi experiments lainnya! Trik baru bagaimana cara membangun pure CSS content filter.

Tutorial dan inspirasi semua tentang CSS animasi, jangan ketinggalan CSS animation. Tidak seru kalau sobat tidak meriahkan liburan akhir tahun dengan emoji engine. Dari dunia icon AA berikan feathericon and CSS icon animate. Ingin memberikan sentuhan berbeda pada header blog sobat? You must read how to zoom hero images on scroll. Dengan hadirnya customize robot.txt pada platform blogger, setidaknya harus mengetahui bagian dasar dari file robots.txt fun with robots.txt!

Belajar dengan melihat contoh cssreference.io adalah panduan visual gratis CSS. Ini fitur yang paling populer, dan menjelaskannya dengan contoh-contoh ilustrasi dan animasi.
Apakah kalian di buat lelah membuat warna gradient yg memang sedikit repot untuk membuat itu semua! Jangan khawatir telah hadir grade.js Seperti biasa kalau sudah jalan² paling males itu beres-beres dan bersih-bersih :P

Enggak jauh berbeda dengan dunia maya, paling ribet itu langkah ingin menghapus sesuatu?

Hati-hati menggunakan layanan jasa web deseat.me This is clean up your existence in cyberspace!!!

Bonus:

luxury buttons - Auto-scaling iframes - css tabs - Simple CSS Tooltips - CSS only Sliding menu (Hamburger menu) - CSS Accordion using {:target} selector - Menu hover effect - CSS only tooltips - Dead simple markdown editor - Schedule Template - Windows 10 Desktop - A Menu Overlay Simulating a Camera Focus Change

Happy holiday :-h

0 Komentar WTF
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
al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE