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
Ketika ada keinginan menulis untuk posting blog, walau tema post sudah sedikit basi, apa boleh buat 'sob ini juga merupakan salah satu cara dalam menjaga eksistensi kita dalam beraktifitas nge-blog :D Sekarang AA Koben akan berbagi tutorial CSS3 ringan yang tentu saja tidak menghilangkan ciri khas ane yg kental dengan slogan full stylish B-) Untuk mempersingkat lahan editor langsung saja pada bagian pertama yaitu membuat konten gambar dengan hover bergaya efek shine!
Make Shine Effect for Image
.shine_img {
position: relative;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
display: inline-block;
}
.shine_img:after {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 100%;
height: 100%;
transform: skewX (-20deg);
background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
}
.shine_img:hover:after {
animation: shine 1.5s ease;
}
@keyframes shine {
100% {
left: 200%;
}
}
<div class="shine_img">
<img src="LINK-IMAGE" />
</div>
DEMO
Make Shine Effect for Text
.shine_text {
border: 0;
color: #fff;
outline: none;
font-size: 12px;
cursor: pointer;
overflow: hidden;
font-weight: 400;
background: #000;
position: relative;
padding: 14px 42px;
border-radius: 3px;
letter-spacing: 0.2em;
display: inline-block;
transition: all 0.3s ease;
}
.shine_text:after {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 100%;
height: 100%;
transform: skewX (-25deg);
background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
}
.shine_text:hover:after {
animation: shine 1.5s ease;
}
.shine_text:active {
transform: translateY(1px);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
@keyframes shine {
100% {
left: 200%;
}
}
<div class="shine_text">
YOUR TEXT
</div>
DEMO
Make Image Cloudy
Pada bagian ini sobat harus mempunyai default 2 gambar awan dengan resolusi 1000 x 600 px. Kalau susah carinya silahkan upload dulu di hostingan masing² gambar awannya! awan-1.png & awan-2.png
.abs_bg {
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
}
.abs_bg div {
margin: 0;
}
.fog {
width: 50%;
height: 50%;
margin: 5px auto;
position: relative;
background-color: #333;
}
.fog_cont {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
.fog_img {
width: 300vw;
position: absolute;
height: 100vh;
}
.awan_satu {
background: url("awan-1.png") repeat-x;
background-size: contain;
background-position: center;
-webkit-animation: gerak 60s linear infinite;
animation: gerak 60s linear infinite;
}
.awan_dua {
background: url("awan-2.png") repeat-x;
background-size: contain;
background-position: center;
-webkit-animation: gerak 40s linear infinite;
animation: gerak 40s linear infinite;
}
@-webkit-keyframes gerak {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200vw, 0, 0);
transform: translate3d(-200vw, 0, 0);
}
}
@keyframes gerak {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200vw, 0, 0);
transform: translate3d(-200vw, 0, 0);
}
}
<div class="fog">
<div class="abs_bg" style="background-image: url('IMAGE-POST');"></div>
<div class="fog_cont">
<div class="fog_img awan_satu"></div><div class="fog_img awan_dua"></div>
</div>
</div>
Make Lightning Effect
.container {
width: 242px;
height: 363px;
display: block;
margin: 5px auto;
position: relative;
animation: lightning 10s linear infinite;
}
@keyframes lightning {
0% {
opacity:1;
}
1% {
opacity: 0.9;
}
2%{
opacity:1;
}
3% {
opacity:0.9;
}
4% {
opacity:1;
}
80% {
opacity:1;
}
81% {
opacity:0.9;
}
82% {
opacity:1;
}
}
<img src="LINK IMAGE" class="container" />DEMO
Yang terakhir membuat efek serelek selonjor :D
.expand_able {
max-height: 40px;
overflow: hidden;
position: relative;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
-webkit-box-shadow: inset 0 -17px 20px -20px #ccc;
-o-box-shadow: inset 0 -17px 20px -20px #ccc;
box-shadow: inset 0 -17px 20px -20px #ccc;
-webkit-transition: all 500ms ease-in-out 100ms;
-o-transition: all 500ms ease-in-out 100ms;
transition: all 500ms ease-in-out 100ms;
}
.expand_able:after {
right: 5px;
bottom: 3px;
color: #555;
font-size: 11px;
font-style: italic;
content: "More...";
position: absolute;
}
.expand_able:hover,.expand_able.open {
max-height: 999px;
-webkit-box-shadow: inset 0 0 0 0 #ccc;
-o-box-shadow: inset 0 0 0 0 #ccc;
box-shadow: inset 0 0 0 0 #ccc;
}
.expand_able:hover:after,.expand_able.open:after {
opacity: 0;
}
<div class="expand_able">
<p>Ada apa ya di sini! Coba sorot dong?</p>
<p>YOUR TEXT PARAGRAPH 1 HERE</p>
<p>YOUR TEXT PARAGRAPH 2 HERE</p>
<p>YOUR TEXT PARAGRAPH 3 HERE</p>
</div>
DEMO
Resources and other:
Button Shine - Shine Effect - Glossy Button with Shine - Pacific Northwest Fog - Rain - JavaScript - 3D perspective card XY - Feed Concept
Bye :-h

0 Komentar WTF
Ternyata dalam kesempatan jika tidak punya kemauan dan kreatifitas akan menghasilkan blank idea! Ujung aspal pondok gede kata judul lagu, ujung-ujungnya searching juga kalau mau cari jawaban :D Kepingin post berbobot apa daya kemampuan kurang mumpuni. Ingin pos biasa-biasa saja, males ngeposnya. Mau sedikit unik & kreatif apa daya ilmu cuma sebatas ngayal :-s Balik lagi ajah menjadi silent reader si bloglang dibalik layar :))

Banyak cara dilakukan untuk mengaburkan atau menyembunyikan sebuah konten! Salah satu tekniknya adalah mengubah gambar menjadi emoji? Gambar digenerate dan dirubah bentuk dengan deretan emoji. Biasanya gambar yg sedikit seronok/tidak layak tayang. Teknik ini bisa dikatakan menyensor gambar :">
Demo dan contoh kreasi Image Emojifier:

Im Jin Ah
Im Jin Ah
Silahkan download tools dari sumber Image Emojifier a pen by Jon Kantner.

Sobat blogger juga dapat menyiasati objek gambar dengan berbagai macam efek yg dihasilkan dari syntax SVG seperti simple hover effects with CSS filters! Ada seorang member codepen pro dengan nick master yoksel banyak bermain dengan kode SVG.

Saya praktek ria dengan syntax-svg yang gue bikin menjadi internal style sheet. Tidak tauk juga salah atau benar. Dan mungkin hanya berjalan di perambah mozilla.

BeforeAfter
kucingcat
Code & demo Cat + feComposite.
Writing SVG internal style sheet is pure only a practice, if you want to use it, please consider the related factors.
Other:
  • Poster with feComposite
  • FeTurbulence, feColorMatrix, feDisplacementMap
  • feTurbulence, feColorMatrix, feDisplacementMap
  • Wild stroke: feMorphology, feTurbulence, feDisplacementMap
  • Turbulence SVG-filter
  • feTurbulence+feColorMatrix+feDisplacementMap
Masih berlanjut, karena seperti yg gue bilang, lagi malas :D

Bonus

Rainbow Text-Shadow - Let me see what you got! - CSS-only double-click - Link with gradient background on hover - Animate navigation on scroll (without jquery) - Low Poly Background Generator - MENU Multi Level Dropdowns - 3D buttons with Highlights and Shadows - A text sliding effect UI - On/off toggle switch - Colour Melody - Splitting: CSS vars for split words & chars - Search Bar - Shimmering neon text - Fold - CSS Grid album with nice hover effect - Shorthand-Background Social Media Logos - 3D Book Browsing
See you I-)

2 Komentar WTF
Walaupun sudah banyak artikel dengan topik menu, apa mau di kata! Bagi sobat blogger yang mau membuat ataupun mengganti menu navigasi, AA Koben akan berikan satu rekomendasi. Karena lagi trending menu dengan tema hamburger iconic, maka dari pada itu gue akan buatkan yang seperti itu! Setelah ditengok-tengok gak ada mirip sama sekali sama burger? Mungkin karena bertumpukan, 3 garis menyerupai ham-bur-ger! Kok gak semen sekalian =))

Kode CSS menu drawer with off-click

<nav class="menu">
<input id ="menu_toggle" type="checkbox" class='menu_toggle'/>
<label for="menu_toggle" class="menu_toggle-label">
<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
<path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' />
</svg>
<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>
</label>
<ol class='menu_content'>
<li class="menu-item"><a href="#0">Title I</a></li>
<li class="menu-item"><a href="#0">Title II</a></li>
<li class="menu-item">
<a href="#0">Title III</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Sub Title III</a></li>
<li class="menu-item"><a href="#0">Sub Title III</a></li>
<li class="menu-item"><a href="#0">Sub Title III</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Title IV</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Title V</a></li>
</ol>
</nav>

Source & Demo ~ Another Choice with JS.

Harap diperhatikan syntax SVG di dalam HTML! Karena blogger berbasis xHTML, kalau ada kode error, berarti harus di phrase terlebih dahulu kodenya :D

Satu lagi tema yg enggak ada habisnya untuk di bahas yaitu tentang tombol berbagi! Ane akan share juga satu tutorial membuat share button full stylish punya b-)

Kode CSS share button

<div class="share-button">
<div class="share-button_back">
<a class="share_link" href="#" title="twitter">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M36,19c0,0,0,0,0,1c0,8-6,16-16,16 c-3,0-6-1-9-3c0,0,1,0,1,0c3,0,5-1,7-2 c-3-0-5-2-5-4c0,0,1,0,1,0c1,0,1-0,2-0 c-3-1-5-3-5-6c0-0,0-0,0-0c1,0,2,1,3,1 c-2-1-3-3-3-5c0-1,0-2,1-3c3,3,7,6,12,6 c-0-0-0-1-0-1c0-3,3-6,6-6c2,0,3,1,4,2 c1-0,3-1,4-1c-0,1-1,2-3,3c1-0,2-0,3-1 C38,17,37,18,36,19z"></path>
</g></g>
</svg>
</a>
<a class="share_link " href="#" title="facebook">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M31,26h-4c0,6,0,14,0,14h-6c0,0,0-8,0-14h-3v-5h3 v-3c0-2,1-6,6-6l4,0v5c0,0-3,0-3,0c-1,0-1,0-1,1v3h5L31,26z "></path>
</g></g>
</svg>
</a>
<a class="share_link" href="#" title="google plus">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g><g>
<path d="M22,29c-0-0-0-0-0-0c-1-0-1-0-2-0h-0 c-3,0-5,2-5,3c0,2,2,3,4,3c3,0,5-1,5-3 c0-0-0-0-0-1C23,30,23,30,22,29z"></path>
<path d="M20,22c0,0,0,0,0,0c1,0,1-0,2-1c1-1,1-2,1-3 c-0-2-2-4-3-4l-0-0c-1,0-1,0-1,1c-1,1-1,2-1,3 c0,2,2,4,3,4H20L20,22z"></path>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M22,37c-1,0-2,0-3,0c-1,0-2-0-3-0 c-2-1-4-2-4-3c-0-1-0-1-0-2c0-1,0-1,0-2 c1-2,4-4,7-4c0,0,0,0,0,0c-0-0-0-1-0-1 c0-0,0-1,0-1c-3-0-6-3-6-6c0-2,2-5,5-6 c1-0,2-0,2-0h7c0,0,0,0,1,0c0,0-0,1-0,1l-2,1 c-0,0-0,0-0,0H25c1,1,1,2,1,4c0,2-1,3-2,4 c-1,1-1,1-1,2c0,0,1,1,2,2c2,1,3,3,3,5 C27,34,25,36,22,37z M39,24c0,0-0,1-1,1H34v4 c0,0-0,1-1,1h-1c-0,0-1-0-1-1v-4h-4c-0,0-1-0-1-1V23 c0-0,0-1,1-1h4v-4c0-0,0-1,1-1h1c0,0,1,0,1,1v4h4 c0,0,1,0,1,1V24z"></path>
</g></g></g>
</svg>
</a>
<a class="share_link" href="#" title="dribbble">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<g>
<path d="M49,48c0-0,0-0,1-0c-0-1-1-2-1-3 c-9,3-18,3-20,3c-0,0-0,0-0,0c0,5,2,9,5,13 C34,59,40,51,49,48z M61,33c-4-3-8-5-13-5 c-1,0-3,0-4,0c1,1,4,6,7,11C57,38,60,34,61,33z M36,64C40,66,44,68,48,68c3,0,5-0,7-1c-0-2-1-8-4-15 C41,55,37,62,36,64z M47,41c-3-5-6-10-7-11 c-5,3-9,8-11,13h0C31,44,38,43,47,41z M56,50 c2,6,3,12,4,14c4-3,7-8,8-13c-1-0-4-1-8-1 C58,50,57,50,56,50z M48,0C21,0,0,21,0,48c0,27,21,48,48,48s48-21,48-48 C96,21,75,0,48,0z M48,71c-13,0-23-11-23-23S35,25,48,25S71,35,71,48 S61,71,48,71z M53,43c0,1,1,2,1,3c0,0,0,1,0,1 c1-0,3-0,4-0c4,0,8,1,9,1c-0-4-2-8-4-12 C63,37,59,41,53,43z"></path>
</g>
</svg>
</a>
</div>
<div class="share-button_front">
<p class="share-button_text">
Share
</p>
</div>
</div>

Lagi lagi harap diperhatikan penggunaan syntax <svg>...</svg> Saya mau buatkan link khusus blogspot, tapi dikarenakan bentrok dengan kode emoticon postingan, jadi kagak bisa :(

Source & Demo Share Button ~ Share Button using base64 URL.

BONUS:

Pulled out text animation - Interactive CSS Filter React Component - Toggle CSS filter Grayscale on image with jQuery - Checkbox my Accordion - Text Only Checkboxes

:-h

0 Komentar WTF
Ketika kesibukan bertambah dan virus malas lagi menerpa ternyata baru terasa ngeblog itu membutuhkan watku & tenaga ekstra :D Belum lagi saat kita ingin mau melakukan posting, ternyata tidak ada ide/bahan untuk melakukan itu semua! Mentok-mentok berkeliaran di dunia maya dan baca-baca apa yang lagi trending :P Mungkin salah satu faktor ide menjadi mandek yaitu kita tanpa sadar disibukan oleh kesibukan yg tidak tentu (baca update-an medsos) =))

Berikut adalah salah satu contoh penulisan markup tabel HTML sederhana, berisi dua kolom dan dua baris:

 <table>
  <tr>
    <th>Bulan</th>
    <th>Simpan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>$300</td>
  </tr>
</table> 
Sekarang AA Koben ingin berbagi sedikit trik dan info bagaimana membuat penulisan mark-up tabel menggunakan teknik CSS flexbox. Hasil akhir seperti berikut:Comparison Table with CSS flexbox

<div class="comptbl">
<ul class="brs">
<li class="legend">Head Title I</li>
<li class="heat">Head Title II</li>
<li class="heat">Head Title III</li>
<li class="heat">Head Title IV</li>
<li class="heat">Head Title V</li>
</ul>
<ul class="brs">
<li class="legend">Head Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
</ul>
<ul class="brs">
<li class="legend">Head Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
</ul>
<ul class="brs">
<li class="legend">Head Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
</ul>
<ul class="brs">
<li class="legend">Head Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
</ul>
<ul class="brs">
<li class="legend"></li>
<li><a href="" class="calltoact">Title Button I</a></li>
<li><a href="" class="calltoact">Title Button II</a></li>
<li><a href="" class="calltoact">Title Button III</a></li>
<li><a href="" class="calltoact">Title Button IV</a></li>
</ul>
</div>
Kode CSS Comparison Table.
Source & demo Creating a clean CSS Comparison Table with CSS flexbox.
BONUS:

CSS only Perspective Menus - Pure CSS accordion - Pure CSS 3D cards - Animated button with rainbow hover - CSS Lightbox - Animated Speech Bubble Nav - Playful CSS figure & figcaption - Figure & Figcaption - Multiple transitions on a button - Accessible SVG Link List with Tooltips - Responsive 3D Flip Menu - Scrolling Gradient - Images Slider using CSS - Expanding and Collapsing Hamburger Menu - CSS Droplet Menu Animation


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE