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
Membuat efek khususnya pada sebuah gambar dengan menggunakan bahasa CSS memang banyak sekali. You can try search in my blog with keyword effect use CSS Dulu AA pernah memosting artikel dengan tema snippet inline CSS filter for mozilla Contoh simple hover effects with CSS filters. Dengan seiring berkembangnya teknologi web browser engine, maka ikut maju pula rumus-rumus kode CSS yang sudah ada!
Gue mau berbagi informasi bagi blogger yg konten blognya berkutat dengan gambar, bagaimana cara memberikan efek-efek cuamik pada gambar tanpa ribet :-O Una sudah membuatkan satu bundel CSS library dengan nama CSSgram.

Dengan menanamkan link CSS-gram ke dalam template, anda sudah bisa mendapatkan ± 21 jenis efek. Satu dari beberapa hal yg mesti diperhatikan coba lakukan test terlebih dahulu pada mesin browser kalian apakah sudah mendukung CSS Filters and CSS Blend Modes For more information, check on Can I Use. Bagaimana cara pakai & pasang si gramCSS ini!!!

Simpan link di bawah tag <head>
Link by CDN<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css" />Link to work locally Download the CSSgram Library.

Jika sudah terpasang, cara pemakaian tinggal menambahkan kelas untuk elemen gambar loe dengan nama filter yang ingin elo gunakan.
Sebagai contoh:<!-- HTML -->
<figure class="aden">
<img src="LINK-YOUR-IMAGE" alt="" />
</figure>
Perhatikan tulisan aden, inilah class 21 gaya yg bisa sobat gonta-ganti :D

Available Classes

For use in HTML markup:
  • 1977:class="_1977"
  • Aden:class="aden"
  • Brooklyn:class="brooklyn"
  • Clarendon:class="clarendon"
  • Earlybird:class="earlybird"
  • Gingham:class="gingham"
  • Hudson:class="hudson"
  • Inkwell:class="inkwell"
  • Lark:class="lark"
  • Lo-Fi:class="lofi"
  • Mayfair:class="mayfair"
  • Moon:class="moon"
  • Nashville:class="nashville"
  • Perpetua:class="perpetua"
  • Reyes:class="reyes"
  • Rise:class="rise"
  • Slumber:class="slumber"
  • Toaster:class="toaster"
  • Walden:class="walden"
  • Willow:class="willow"
  • X-pro II:class="xpro2"

Source by:
>> una.im/CSSgram
>> arttheweb.com

0 Komentar WTF
Sebenarnya sudah terlalu banyak artikel di blog ini membahas tentang cara membuat accordion use CSS Tapi apa mau di kata, ketemu bahan untuk postingan sekarang ya dengan tema itu juga ;)) Gue dapat dari master Chris Ota, he is talked about "Pure HTML and CSS Accordion" on codepen. Ada keunikan tersendiri accordion karyanya, di mana ada efek timbul ke permukaan kala kita mengklik salah satu accordeon! You can get look of here pure HTML and CSS Accord.
.accordion {
background: #fff;
width: 400px;
margin: 0 auto;
padding: 0;
vertical-align: baseline;
border: 1px solid #e0e0e0;
}
.accordion,.accordion-child {list-style: none}
.accordion-item {
position: relative;
width: 100%;
border-bottom: 1px solid #e0e0e0;
}
.accordion-item: last-child {border-bottom: none}
.accordion-label {
padding: 20px 0 20px 30px;
width: 100%;
display: block;
font-size: 18px;
}
.accordion-label:hover {cursor: pointer}
.accordion-label:before {
content: '';
position: absolute;
height: 2px;
width: 2px;
top: 25px;
left: 13px;
border-left: 5px solid #999;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
input[type=checkbox]:checked ~ .accordion-label:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.accordion-child {
margin: 0;
overflow: hidden;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity: 0;
height: 0;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: center top;
transform-origin: center top;
}
input[type=checkbox]:checked ~ .accordion-child {
border: 1px solid #e0e0e0;
margin: 0 -20px 15px -20px;
background: #fff;
box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.16);
padding: 30px;
height: auto;
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.hide {
clip: rect(0 0 0 0);
display: none;
}

<ul class="accordion">
<li class="accordion-item">
<input id="s1" class="hide" type="checkbox">
<label for="s1" class="accordion-label">First</label>
<ul class="accordion-child">
<li>
<label>
<input type="checkbox"> Item 1
</label>
</li>
<li>
<label>
<input type="checkbox"> Item 2
</label>
</li>
</ul>
</li>
<li class="accordion-item">
<input id="s2" class="hide" type="checkbox" checked="checked">
<label for="s2" class="accordion-label">Second</label>
<p class="accordion-child">BLAH BLAH BLAH</p>
</li>
<li class="accordion-item">
<input id="s3" class="hide" type="checkbox">
<label for="s3" class="accordion-label">Third</label>
<p class="accordion-child">BLEH BLEH BLEH</p>
</li>
</ul>

Hilangkan kode checked="checked" kalau pingin ke tutup.

Jika sobat mau menambahkan konten, maka perhatikan & buat syntax HTML seperti berikut <li class="accordion-item">
<input id="XX" class="hide" type="checkbox">
<label for="XX" class="accordion-label">TITLE</label>
<p class="accordion-child">BLEH BLEH BLEH</p>
</li>
Kode ini harus berbeda XX

Demikian dan terima kasih :)
Sebagai bonus sikat tools sederhana keren punya and links source oke bingit'z:

>> Colofilter.css lukyvj.github.io/colofilter.css
>> Long Shadow Text codepen.io/gau/pen/JGWZed
>> Pure CSS Header Menu codepen.io/suez/pen/gPRjBo
>> CSS3 Image Filters on Hover codepen.io/gomezisdan/details/bEWdma
>> CodePen User Card codepen.io/andytran/pen/zrzvYQ
>> Awesome split-in-half hover effect codepen.io/vajkri/pen/LGjyzX
>> Star wars GIF maker codepen.io/jagarikin/pen/PZOrRP
>> Fullscreen Search codepen.io/suez/pen/obpLvy
>> Itchy Tanuki codepen.io/jasesmith/pen/pgdmdv
>> slidedoor codepen.io/nizhanjun/pen/JGOVNj
>> The Scroll of Lorem Ipsum codepen.io/browles/pen/pgdMbK
>> Pure CSS Modalbox codepen.io/brycesnyder/pen/JGOwwX
>> A Pen by Amanze Ogbonna codepen.io/darlingtonamz/pen/MKrYGL
>> Find the match - memory game codepen.io/kunukn/full/OMzvrM
>> Word Counter codepen.io/ChynoDeluxe/pen/obpOog
>> Rasteroid codepen.io/golle404/pen/NxqVKN
>> Easy Whitelist Regex Builder :) codepen.io/rlo206/pen/bEvVQN
>> Responsive Image Breakpoints Generator www.responsivebreakpoints.com
>> photo-editor github.com/fengyuanchen/photo-editor

0 Komentar WTF
Postingan ke dua setelah yang pertama di tahun ini, AA Koben akan membicarakan tentang bagaimana cara membuat CSS slideshow sangat sederhana! Namanya juga simplest, maka kalian jangan mengharapkan bertemu dengan efek-efek yang full stylish punya ya ;))
Animasi slideshow yg dihasilkan pada CSS tidak lain yaitu menggunakan rule @keyframes.
DEMO
.fadein {
position: relative;
height: 212px;
width: 100%;
}
.fadein img {
position: absolute;
left: 0;
right: 0;
opacity: 0;
animation-name: fade;
animation-duration: 9s;
animation-iteration-count: infinite;
width: 100%;
height: 212px;
}
.fadein img:nth-child(1) {
animation-delay: 0s;
}
.fadein img:nth-child(2) {
animation-delay: 3s;
}
.fadein img:nth-child(3) {
animation-delay: 6s;
}
@keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}

<div class="fadein">
<img src="LINK-IMAGE-1" alt="" />
<img src="LINK-IMAGE-2" alt="" />
<img src="LINK-IMAGE-3" alt="" />
</div>
Jika sobat kepengen menambahkan image, maka pada variabel CSS tinggal tambahkan begini saja.fadein img:nth-child(4) {
animation-delay: 9s;
}
Kalau kurang tinggal buat lagi sj yg seperti itu yah ;)

Source and others similar tutor:
>> Simplest CSS Slideshow
>> Simplest jQuery Slideshow
>> Small and Simple Slideshow jQuery
>> More Simple jQuery Slideshows
>> Simplest JavaScript Slideshow
>> CSS3 animation Property
>> CSS3 animation-iteration-count Property
>> CSS3 animation-duration Property
>> CSS3 animation-name Property
>> CSS3 :nth-child() Selector
>> Surprising CSS properties you can use today
>> Simpel Content Slider Pure CSS3

Happy slider \m/

0 Komentar WTF
Postingan perdana di awal tahun 2016 AA Koben akan membahas tentang variabel <ul> atau <ol> Dengan var ul/ol tersebut kita bisa membuat aneka karya cipta yang mempesona ;))
Unordered atau ordered list ternyata tidak sesederhana kelihatannya. Berikut contoh sederhana kreasi ol/ulSelain berdiri sendiri variable ol|ul bisa dipadukan dengan varible lainnya. Sehingga akan terjadi campur aduk di sana dan menghasilkan drop down Take a look small dropdown menu
.sdm a {
background: #f65041;
color: inherit;
display: block;
text-decoration: none;
padding: 1rem;
}
.sdm ul {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4rem;
letter-spacing: .1rem;
position: relative;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.sdm ul ul a:hover,.sdm ul ul a:focus,.sdm ul ul a:active {
background: #ff7d74;
}
.sdm ul ul {
display: none;
padding-top: 1rem;
position: absolute;
}
.sdm ul:hover ul,.sdm ul:focus ul,.sdm ul:active ul {
display: block;
}
.sdm ul:first-child:hover > li:first-child:before,.sdm ul:first-child:focus > li:first-child:before,.sdm ul:first-child:active > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
}
.sdm ul ul > li:not( :last-child ) {
border-bottom: 2px solid #ff7d74;
}
.sdm ul > li:first-child:before {
content: "";
position: absolute;
}
.sdm ul:first-child > li:first-child:before {
border: .7rem solid transparent;
border-top-color: #fff;
pointer-events: none;
right: 1.3rem;
top: 1.6rem;
}
.sdm ul ul > li:first-child:before {
border: .7rem solid transparent;
border-bottom-color: #f65041;
top: -.4rem;
right: 1.3rem;
}
.sdm .fa {
margin-right: .5rem;
}

<div class="sdm">
<ul>
<li><a href="#">What...!!!</a>
<ul>
<li><a href="#"><span class="fa">&#10084;</span>Like</a></li>
<li><a href="#"><span class="fa">&#10032;</span>Favorites</a></li>
<li><a href="#"><span class="fa">&#10068;</span>Discuss</a></li>
</ul>
</li>
</ul>
</div>
Ada yg lebih ekstrim lagi dengan menyertakan jQuery script! Coba lihat dulu halaman berikut Pada bagian country ada variabel dropdown disertai animation effect. Begitu saja first post in 2016 year.

This is some bonus for you:
>> Jemoticons
>> Ace Editor
>> Web Terminal
>> Tabs Modal
>> Corner Ribbons
>> gradStop.js
>> Simple SVG Editor
>> Flexbox Film Credits
>> CSS Social Ribbon Flags
>> Pixelate an image
>> Expanding Share Button
>> Modal/blurred background
>> Generate palettes from an image
>> Smooth, Semantic Tab Box
>> CSS sliding multi-level accordion
>> Login For Webapp Using CSS and Javascript
>> ReboundGen, Pre-Canned CSS3 animations
>> Awesome Jumping Game Using CSS and Javascript
>> A Style Switcher with Pure CSS using :checked
>> Collapsable link lists with CSS only (no JS)
>> View/Hide - Content & Change title text onclick
>> COLOR.JS a color manipulation library
>> CSS Only Dropdowns With The Checkbox Hack

al-Quran

MISC

Resources

1 2 3 4 5 6 7 8 9

FACEBOOK PAGE