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
Ada satu topik hangat yang lagi menjadi sorotan di dunia CSS! Tepatnya adalah CSS Borders. Topic ini menjadi ramai karena si border dikombinasikan dengan efek animation. Sehingga border yang biasanya kita lihat selalu statis sekarang bisa menjadi dinamis berlenggak-lenggok seperti seorang penari jaipong :D
Salah satu contoh telah dibuatkan oleh codepener Mstr. Piotr Galor Pure CSS Gooey Morph
Mantap toh :-bd Mungkin itu terlalu berdisko, bagaimana dengan karya dari Mstr Nick Lewis Animating border-radius
Animating border radius
Bagaimanakah caranya kita bisa mendapatkan gaya border seperti itu? Kalau bikin secara manual mungkin akan sedikit ribet, tetapi berbeda cerita jika kita mempunyai tools-nya :D
Silahkan pilih mau pakai yg mana:
  1. Border radius
  2. Fancy Border Radius
Sudah begitu ajah mostingnya, urusan sobat mo dipakai untuk apaan tinggal kreasikan sesuai dengan kebutuhan :)

Bonus

envelope border - Making an Image Magnifier in jQuery - ColorBox by Lyft Design - Exploding Bubble Text - Pure CSS Toggle Buttons | ON-OFF Switches - Social Media 3D Ghost Buttons in just CSS - A Fancy CSS Animated Gallery Covers - Color Namer - Random color harmonies - Black Mirror Cracked Text Effect - 100DaysCSS-12 - Generate a Colour - Glitch Effect on Hover - Stacked Image Gallery - SVG Menu Experiments w/viewBox Zoom - Portfolio Items CSS3 transitions effects - Pure CSS Select Box With Direction Aware Hover Effect - Just Another Menu (Pure CSS) - Social share button - Media Icons

0 Komentar WTF
Apakah sobat sedang mencari kumpulan tutorial untuk memperindah blog kalian? Anda tidak salah datang kemari, karena dimari tempatnya berkumpul artikel unik dari seluruh penjuru alam nyata dan ghaib. Tinggal menuju kotak pencarian, ketik apa yg kalian cari, kemudian enter...jebret, pasti ada artikel full stylish tertampilkan :D Pada kesempatan ini AA Koben membawa tut's ringan seputar trik bagaimana cara merubah tampilan (warna) video youtube! Ada ± 21 perubahan warna yang bisa anda terapkan! Karena browser gue tidak update, maka efek perubahan tidak berjalan sebagaimana mestinya.

Oleh karena itu silahkan update browser ke versi terbaru agar seluruh selector & declaration CSS berjalan sempurna. Berikut adalah sekrinsyut tampilan default (normal) salah satu video youtube.Nanti setelah ditambahkan efek CSS hitam-putih (black & white) akan menjadi beginong.Bagaimana bisa menjadi begitu, berikut bumbu-bumbu CSS untuk meraciknya.

.filt_vid {
width: 404px;
height: 360px;
display: block;
text-align: center;
box-sizing: border-box;
margin: 5px auto 0 auto;
background-color: #fcfcfc;
}
.filt_vid input {
display: none;
}
.filt_vid input:nth-of-type(1):checked ~ label:nth-of-type(1) {
color: #FFF;
background-color: #F00;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);
}
.filt_vid input:nth-of-type(2):checked ~ label:nth-of-type(2) {
color: #FFF;
background-color: #404040;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);
}
.filt_vid input:nth-of-type(2):checked ~ iframe {
-webkit-filter: grayscale(1);
filter: grayscale(1);

}
.filt_vid label {
cursor: pointer;
padding: 10px 20px;
border-radius: 3px;
margin: 0 5px 10px 0;
display: inline-block;
transition: 0.5s ease;
background-color: #eee;
}
.filt_vid label:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);
}
.filt_vid iframe {
width: 100%;
height: calc(100vh - 210px);
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.25);
}

<div class="filt_vid">
<input type="radio" name="radio" id="noFilter"/>
<input type="radio" name="radio" id="bwFilter" checked="checked"/>
<label for="noFilter">Normal</label>
<label for="bwFilter">Black &amp; White</label>
<iframe src="https://www.youtube.com/embed/WA8NVBi9atk?autoplay=0;rel=0;controls=0;showinfo=0" frameborder="0" allowfullscreen encrypted-media"></iframe>
</div>
Jika sobat ingin efek yg lain atau mau di pakai semua tinggal perhatikan baris kode berikut
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
Kalau mau pakai efek Sepia kode CSSnya sbb.
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: sepia(1);
          filter: sepia(1);
}
Efek Saturate
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: saturate(10);
          filter: saturate(10);
}
Efek Hue Rotate
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
}
Efek Hard Light
.filt_vid input:nth-of-type(2):checked ~ iframe {
  mix-blend-mode: hard-light;
}
Efek Contrast
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: contrast(200%);
          filter: contrast(200%);
}
Efek Blur
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
Source and all demo can you find it Apply css filters on a video in pure CSS.
BONUS
Search field animation - Blinking Text Input - Aquarium with fish animation [Pure CSS] - HoverEffectIdeas-1 - HoverEffectIdeas-2 - Animated Search Form With Micro Interactions - Block effect text intro - Transition Effect With mix-blend-mode - Don't Click! - 3D - CSS Social Tiles - Perspective button hover effect - Making an Image Magnifier in jQuery - ColorBox by Lyft Design
Bye :-h

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-)


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE