Senin, 31 Desember 2012

Selection Tools From jsdo.it For You By Beben Koben

Lembar artikel postingan pertama di awal Tahun Baru 2013, Beben Koben si bloglang anu ganteng kalem tea akan beri article hebring edun punya cuit cuiw \m/ Sebelum itu sobat harus mengetahui apa yang paling banyak dicari di web wikipedia pada tahun 2012 antara lain adalah keyword Facebook paling populer dicari di negara Indonesia diikuti dengan keyword Indonesia, YouTube, Sepak bola, Bola voli,...cek dimari, most visited pages on wikipedia 2012 :D
Beberapa aplikasi berikut Koben seleksi dari web berbagi javascript, html5 dan css jsdo.it. Karena konten berbahasa jepang, dan hasil download tidak sesuai dengan hasil demo oleh karena itu gue pilih, semoga pilihan gue bermanfaat bagi kalian yah :)

Password Generator

password_generatorPada sumber random password generator ini hanya sampai tingkat 9 karakter berupa huruf & angka. Gue dah tambahin sama spesial karakter yg ada pada keyboard. Kinerja kalian hanya tinggal klik-klik doang ;))

Text API Generator

text_generatorGenerator text ini mungkin tidak ada istimewanya toh hanya membuat teks doang! Tapi uniknya generator ini hasil generated berupa base64 Pada sumber belum ada embed warna, gue dah masukin disana ;)

Font Tester Generator

font_tester_generatorGenerator test huruf ini akan memberikan tampilan jenis huruf, style font, font size, line height and etc.

Favicon Maker

favicon makerAlat membuat favicon sederhana berikut cocok sekali buat kita yg males, karena hanya tinggal klik-klik saja dan save akhir dengan image base64 :D

DATA URI Playground2

DATA URI PlaygroundPlayground2 ini tidak lain adalah generator untuk membuat apapun menjadi data uri or base64. Tinggal drag & drop jadi deh :))

CSS Arrow Maker

css arrowMalas buat tanda panah dengan vaariabel CSS? Inilah solusinya bos :_" Mau ke barat, timur, utara atau selatan arah panah mengarah, tinggi tinggal diatur sikat deh kode jadinya :P

Segitu saja yah sob, silahkan kalian cari-cari sendiri saja, masih buanyak yg keren-kerennya b-) Silahkan download folder semua aplikasi diatas via ziddu

Password: bebenkobenbloglanggantengkalemtea
Enjoy it :)

Sabtu, 29 Desember 2012

Selection CSS Trick Last Year

Melakukan trick sudah tentu harus cerdik. Dengan ilmu pas-pasan tetapi resource bertebaran dimana-mana menjadikan satu jurus ampuh tersendiri ;)) Langkah selanjutnya tinggal pinter-pinternya kita dalam mensiasati pemakaian/penerapan ke dalam blog! Pada tahapan inilah banyak blogger yang bingung sendiri. Contoh sudah ada, kode tertulis dengan rapih...eh masih saja pada bertanya :))
Ingatlah satu hal, kode yang sederhana (sedikit/simple) belum tentu memiliki fungsi sederhana pula! Bisa jadi script panjang berjubel tapi tidak terpakai oleh kita, eh malah script sedikit namun malah terpakai? Karena tidak ada info keren, terpaksa review trick lawas :D
pegunungan
Gambar pegunungan namanya itu, perhatikan ada garis-garis tipis pd gambar tersebut? Ini salah satu trik menyembunyikan image inti dengan menambahkan image ekstra. Dulu pernah dibahas juga tapi entah dimana keberadaannya :P Sobat tinggal membuat image dengan resolusi 1px x 1px.
.featuredImg {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
background: #000;
margin: 10px auto;
}
.imgOver {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(IMAGE 1px x 1px);
}
Markup HTML<div class="featuredImg">
<img src="IMAGE INTI" alt="" />
<div class="imgOver"></div>
</div>
Berikut contoh dengan img 1px x 1px mode titik-titik
pegunungan
Bila kalian kreatif, hal ini bisa dikombinasikan dengan multiple backgrounds with css3 ;)
Perhatikan dengan seksama 1 demo berikut
Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum qui cu, nobis efficiendi eloquentiam in quo, scripta euripidis in est. At viris imperdiet vix. Justo assueverit reprehendunt has in, nostrud legendos appellantur eam ea. Eos ex erat errem utinam, eos epicuri philosophia ut, ad eam ubique labore. Eos nibh laboramus ei, ei sumo fugit pro, Beben Koben.

ARE YOU READY FOR 2013

Lakukan grab pada area tulisan aneh lorem ipsum Tulisan ARE YOU READY FOR 2013 tidak ikut ter-grab kan? Disitulah unik trik ini ;)) Add gadget brkt ke blog sobat (lalu delete lagi ajah) kan ngetes doang terlihat seperti apa jika tertanam di blog :P
Add kode CSS brikut ke dalam blog, kemudian lihat pada bagian atas monitor!
body:before {
content: "";
position: fixed;
top: -7px;
left: 0;
width: 100%;
height: 7px;
z-index: 100;
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
Lantas bagaimana jika kepengen bermotif garis-garis berwarna, like this...
Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web.
Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme Beben Koben

Ini dia kodenya
.gar_pis:before {
display: block;
content: '';
height: 7px;
background-image: -moz-linear-gradient(0deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
background-image: -webkit-linear-gradient(0deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
background-image: -o-linear-gradient(0deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
background-image: linear-gradient(0deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
background-size: 650px 4px;
}
background-color: #fff;
background-image: -webkit-linear-gradient(transparent 50%, rgba(8, 19, 143, 0.6) 50%),-webkit-linear-gradient(left, transparent 50%, rgba(8, 19, 143, 0.6) 50%);
background-image: -moz-linear-gradient(transparent 50%, rgba(8, 19, 143, 0.6) 50%),-moz-linear-gradient(left, transparent 50%, rgba(8, 19, 143, 0.6) 50%);
background-image: -o-linear-gradient(transparent 50%, rgba(8, 19, 143, 0.6) 50%),-o-linear-gradient(left, transparent 50%, rgba(8, 19, 143, 0.6) 50%);
background-image: -ms-linear-gradient(transparent 50%, rgba(8, 19, 143, 0.6) 50%),-ms-linear-gradient(left, transparent 50%, rgba(8, 19, 143, 0.6) 50%);
background-image: linear-gradient(transparent 50%, rgba(8, 19, 143, 0.6) 50%),linear-gradient(left, transparent 50%, rgba(8, 19, 143, 0.6) 50%);
background-size: 30px 30px;
Demikian saja trick CSS sederhana akhir tahun dari aa Beben Koben si bloglang anu ganteng kalem tea. Semoga bermanfaat, kreasikanlah sendiri-sendiri menurut keperluan masing² :)
Happy coding \m/

Rabu, 26 Desember 2012

Toolbox is a Web Tools Collected

Sobat sekalian sudah pada tahu kan dimana gue simpan source's tools keren full stylish punya! Benar sekali BEN TOOLS lah tempat tersebut :)) Dimana setiap menemukan web services/aplication unik Koben pasti langsung tulis disana. Namun kesempatan kali ini sepertinya tidak akan gue tulis satu per satu, karena satu web berikut yg akan saya bagi yaitu tempat aplikasi, tools, source, atau apapun mendarat disana :P Seperti ini contohnya tuh lists of the inspiration. Keliling cari inspirasi cukup lewat sana saja ;)
Keberadaan web tools sendiri bermanfaat untuk efisiensi kerja kita sebagai blogger profesional! Karena dengan bantuan alat (generator) kita tidak susah payah dan dipusingkan dalam membuat sebuah konten/embed/aplikasi/etc.
Bloglang Ganteng Kalem...TEA.
Bagaimana repotnya jika membuat itu secara manual =)) text rainbow maker tools. Masa bikin beginian harus hapal dulu kode²nya!
Beben Koben

Info rahasia sederhana dari cara penulisan atau kode/script simpl.info Mau bikin script JSON tetapi hasilnya takut error, berikut solusinya JSON Editor Online Pada lagi gandrung sekarang icon memakai font/huruf, tinggal pilih yg mana suka dan langsung download Fontello Bagi para blogger yg sudah ahli dengan bahasa script menyeukript dan editor kurang mempuni dalam tulis-menulis script? 2 in 1 merge editor online brkt mungkin bisa menjadi solusinya Mergely Editor

Sudah berapa biji gue simpan links bertemakan responsive ---> responsive bikin repot. Selama itu pula aku belum menemukan tools untuk mengetes tampilan yang cocok bagi blog saya. Kenapa? karena blog gue pakek script anti iframe, yg mana setiap kali melakukan testing pasti loncat menjadi url blog aku sendiri :D Ini dia solusi buat itu, 12 tampilan langsung diperlihatkan hanya dalam 1x testing (tentu tidak berpengaruh walau pakai script anti iframe) the responsinator Kepengen tools itu menjadi milik kalian, biayanya $500USD :-"

Sudah cukup apa belum toolsnya...
Gimana kalau ada job bikin icons dengan gambar yg berlainan? Pasti gempor bikin lewat photoshop :)) Seperti ini contoh jadi iconnyahot-womanDuh maaf resolusinya kebesaran (malas ngedit) =)) Here we go testico Mau buat tulisan semau gue sekaligus melihat reviewnya...wordmark.it
Capek juga ternyata kalo gue jabarin satu-satu nih. Silahkan kalian acak-acak sendiri web berikutThe ToolboxDa dah :-h Have fun with tools my broooT \m/

Selasa, 25 Desember 2012

It's All About INPUT HTML Tag

Sobat pasti sudah pada kenal dengan HTML input tag Syntax yang biasanya sering kita jumpai dalam membuat form action Ex: make input more stylish Dengan berkembangnya CSS language, snippet technique, and our skill ;) input attribute sekarang berkembang penggunaannya tidak terbatas sampai di situ! Salah satu bentuk contoh snippet yang memakai input property dan sudah menjadi sebuah generator yaitu on/off flipswitch html5/css3 generator by Proto.io
Karena sangkin uniknya variabel input ini, maka Koben selaku si bloglang anu ganteng kalem tea mengumpulkan resource's keren kesana-kemari dan mengangkat postingan sekarang dengan tema uniqueness of the input property :D
Result
TypeImageRadio none CheckedRadio with CheckedCheckbox none CheckedCheckbox with CheckedNumber with ValueText with Placeholder
Tabel diatas merupakan ragam/jenis variable input (default style) yg sering kita gunakan. Mungkin masih ada lagi (silahkan cari sendiri) :P Jika sudah dirangkai dengan HTML <form> tag and etc maka berjubel kegunaannya HTML <input> Attributes
Yuk kita mulai menghias input []


Silahkan dipelajari disini codepen.io/bbodine1/full/novBm or cssdeck.com/labs/full/css-checkbox-styles/0 Gak tauk tuh sapa yang buat pertamanya :)) Mau yg simpel dan ringan sobat bisa kemari easy css3 checkboxes and radio buttons jikalau ukuran kurang besar, monggo satroni dimari custom css3 checkboxes and radio buttons
Satu hasil contoh kreasi full stylish dengan teknik checkbox & radio by Master Taufik Nurrohman.

Senin, 24 Desember 2012

Convert Image to CSS, HTML Application

Sebenarnya saya lagi pusing dan malas untuk berblogging sob! Karena salah satu blog saya terhapus karena praktek tutorial How To Ban Unlimited IP Address with JavaScript in Blogger Karena konten blog tersebut berbahasa inggris, saya tidak menggubris isi kalimat yang ada. BENG!!! tau-taunya ada warning bertuliskan
Don’t paste this Coding in the gadget AREA i.e. HTML/JavaScript otherwise it could destroy your site maliciously.
Dan apa yang terjadi!!! Blog saya terdeteksi SPAM parahnya lagi tidak dapat di akses (deleted blogs) :(( Memang ada tombol restore, akan tetapi itupun harus menunggu beberapa hari dari pihak google, untuk dilihat (mending kalau dilihat)!!! Soalnya expired batas claim agar blog saya tidak dianggap SPAM itu hanya 20 hari.

Oleh sebab itu sob, berhati-hatilah dalam praktek ria dengan koding khususnya JavaScript Bukan gaya yang didapat, blog malah lenyap...zzz...zzz...zzz :(|)
Ya sudah lah, Koben pasrah saja deh, semoga balik lagi tuh blog gue :) Sebagai tutorial kali ini saya akan share dari postingan berikut Any Image To CSS Mengconvert image menjadi variabel CSS.
DEMO



Itu CSS sob, kalau tidak percaya coba Save Image As, bisa apa tidak ;)) Silahkan download aplikasi tersebut jika memang berminat.
Password: bebenkobensibloglanganugantengkalemtea
Demikian sob artikel aplikasi convert image off line version. Jangan lupa ya cara balikkin blog gue gimana tuh :-s
Happy blogging \m/

Jumat, 21 Desember 2012

Tool for Look Mention Widget and Card Google+

Melanjutkan artikel yang kemarin yaitu membicarakan fitur teranyar dari post editor blogger mention google+ for blogger dimana fitur tersebut akan berjalan bila kita melakukan postingan dalam mode compose! Karena Koben tidak terbiasa melakukan posting dalam bentuk itu, maka pada kesempatan sekarang gue akan berbagi sedikit trick ;)
Dulu gue pernah memostingkan form action blogspot, walau sekarang mungkin sudah tidak berjalan karena sudah berganti address :( Memang menarik bermain dengan koding form action ini sob google services is interesting. Nah, sekarang coba sobat masukin ID google plus kalian pada kotak form aksi berikut...

Setelah itu coba sekarang masukan seluruh link g+ kalian disini...

Ex:https://plus.google.com/xxxxxxxxxxxx



width:  

height:
Sayangnya cuma satu, beberapa fasilitas google ada yang memakai script anti iframe/frame Sehingga untuk menempatkan di area postingan blog tidak bisa :D
Demikian saja informasi ringan dari bloglang anu ganteng kalem tea :)
Happy blogging \m/

Kamis, 20 Desember 2012

Hover Thumbnail Mention Google+ for Blogger

Developer sepi mau apa yang diposting =)) Issue teranyar dari blogger buzz is mention people in your posts with google+ Artinya menyebutkan seseorang di dalam area postingan memakai account google+ Ketika link disorot akan terbelalak seonggoh kotak profile orang yang dimaksud. Fitur ini akan berjalan bila sobat melakukan postingan dalam mode Compose
(lihat screenshot di bawah)
Derita bagi kita yg terbiasa melakukan post dalam mode HTML :-s Contoh sorot link berikut +Beben Koben ;)) Mungkin google tidak mau kalah dengan fitur satu ini anywhere aplikasi from twitter developer for blogger Ex: @bebenkoben :PMentions-in-Blogger
Mention people in your posts with Google+
New! Now you can call out a Google+ profile or page from your blog to help them notice your post. Just add a "+" or "@" in front of the person or page's name. Learn more
Demikian berita terhangat dari om buzz.
Bonus...premium-stuff-guru.blogspot.com/2012/11/add-css3-awesome-minimalistic-animated.html

.menyu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.menyu>li {
display: block;
}
.menyu>li>div {
position: fixed;
bottom: 5px;
left: 5px;
width: 120px;
height: 160px;
overflow: hidden;
cursor: pointer;
text-align: center;
background: transparent;
box-shadow: 0px 1px 2px #555;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
}
.menyu div:hover {
background: #fff;
z-index: 5;
}
.menyu>li>div>a {
top: 0px;
position: relative;
display: block;
height: 100px;
padding-top: 60px;
font-family: 'Terminal Dosis', sans-serif;
text-decoration: none;
font-size: 25px;
color: #333;
-webkit-transition: all .3s;
-ms-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
}
.nested:hover a {
top: -90px;
}
.menyu ul {
position: absolute;
top: -9999px;
margin: 0 auto;
display: block;
width: 120px;
text-align: center;
-webkit-transition: .5s opacity ease-out;
-ms-transition: .5s opacity ease-out;
-moz-transition: .5s opacity ease-out;
-o-transition: .5s opacity ease-out;
}
.menyu li div:hover ul {
top: 10px;
color: #fff;
opacity: 1;
}
.menyu div:hover ul li a {
color: #111;
font-size: 13px;
text-decoration: none;
}
<ul class="menyu">
<li>
<div class="nested">
<a href="#">Menu</a>
<ul>
<li><a href="#">Title1</a></li>
<li><a href="#">Title2</a></li>
<li><a href="#">Title3</a></li>
...
</ul>
</div>
</li>
</ul>
Happy blogging \m/

Selasa, 18 Desember 2012

Make Zoom Effect Clickable on Image

Keterangan singkat mengenai zoom effect dapat sobat baca kembali make hover zoom effect use css. Di sana diterangkan cara membuat efek bergaya zoom saat cursor didekatkan :)
Koben akan berbagi lagi cara membuat efek zoom dimana proses kerjanya mirip dengan tutorial berikut pop up boxes zoom in effect use css3! Dengan melakukan klik, akan terbukalah gambar dengan efek zoomer ;)
Untuk melihat demo dan gimana zoom yang dihasilkan, gue dapatkan resourcenya dari sini Альбом Pada sumber artikel dibuat versi image gallery sekarang kita buat versi single image :D
Kode CSS
a.zoom {
width: 200px;
height: 141px;
position: relative;
display: inline-block;
border: 5px solid #f5f5f5;
}
a.zoom img {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: absolute;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 3;
}
a.zoom:focus img {
top: ;
left: ;
width: 250%;
height: 250%;
cursor: default;
position: absolute;
box-shadow: 0 0 15px 2px #000;
z-index: 15;
}
a.zoom:focus {
border: none;
}
:focus{
outline: none;
}
MarkUp HTML<a class="zoom" tabindex="1">
<img src="LINK-IMAGE-HERE.jpg">
</a>
Sudah selesai, mau apa lagi coba :P
Pada kode CSS tepatnya pada variabel .zoom:focus img ada dua kode top & left yg belum disisikan dengan nominal. Silahkan isi sesuai dengan kebutuhan. Pada markup HTML (cara pemakaian) terdapat variable tabindex yg mesti ada pada setiap penulisan syntax.

Senin, 17 Desember 2012

Make Sliding Board only use CSS

Tidak asing lagi dalam menyembunyikan sebuah konten kebanyakan pasti menggunakan trick accordion Mungkin yang paling maknyus adalah make accordion use css3 latest :)
Pada kesempatan sekarang Koben akan berbagi cara membuat sliding clipboard whiteboard only css Perhatikan judulnya! Membuat papan geser berwarna putih hanya memakai atribut CSS :D Kesamaan sliding dengan fitur accordion sudah tentu sama-sama memiliki efek visual buka tutup Seperti biasa disini gue cuma meminimalisasi kode-kode CSS yg ada, menjadi lebih sedikit ;))
Jadi jika sobat mau code yg ada mendukung di setiap browse, ya tinggal pake tools prefixMyCSS ataupun snippet dengan cara menanamkan -prefix-free script ke dalam template kalian.
DEMO

Lorem Ipsum Bolor Sit Amet

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at.


Bagaimana tuh, unyu-unyu cekali kan buat mempercantik blog tercinta kita :">
KODE CSS
.holder {
width: 400px;
position: relative;
margin: 10px auto;
margin-top: 55px;
}
.paku {
width: 5px;
height: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #ADADAD;
border: 1px solid rgba(0,0,0,.2);
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 1);
position: absolute;
left: 197px;
top: -50px;
z-index: 999;
}
.isi_bingkai {
top: 10px;
left: 1px;
width: 380px;
height: 11px;
color: #777;
overflow: hidden;
position: relative;
background: #F7F7F7;
padding: 0px 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
box-shadow: inset 0 1px 1px 0 rgba(0,0,0,1),inset 0 1px 0 2px rgba(255,255,255,1),0 0 5px 0px rgba(0,0,0,.2);
}
.isi_bingkai h2 {
color: #555;
padding-top: 5px;
text-indent: 50px;
margin: 10px 0 0 0;
padding-bottom: 13px;
border-bottom: 1px dashed #ccc;
background: url(http://img1.blogblog.com/img/promos/paperpencil-45.png) 1px no-repeat;
}
.tali_kiri {
width: 160px;
height: 2px;
background: #F4F4F4;
position: absolute;
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
top: -21px;
left: 46px;
box-shadow: 0 0 2px 0px rgba(0,0,0,.2);
}
.tali_kanan {
width: 160px;
height: 2px;
background: #F7F7F7;
position: absolute;
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
transform:rotate(20deg);
top: -21px;
right: 46px;
box-shadow: 0 0 2px 0px rgba(0,0,0,.2);
}
.kayu_bingkai {
width: 400px;
height: 10px;
background: #8B7355;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 999;
position: absolute;
border: 1px solid #5C4033;
box-shadow: 0 3px 3px 0 rgba(0,0,0,.1),inset 0 1px 0 0 rgba(255,255,255,.3),inset 0 0px 0 1px rgba(255,255,255,.1),0 6px 15px -2px rgba(0,0,0,.2);
}
.tali_paku {
width: 2px;
height: 25px;
background: #7F7F7F;
position: absolute;
left: 197px;
box-shadow: 0 0 4px 0px rgba(0,0,0,.3);
}
.openercheck {
position: absolute;
left: 187px;
margin-top: 37px;
background: transparent;
border: none;
opacity: 0;
cursor: pointer;
}
.opener {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,.8);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5),0 0 4px 0px rgba(0,0,0,.5);
position: absolute;
left: 191px;
margin-top: 25px;
z-index: 999;
-webkit-appearance: none;
-webkit-margin-start: 0;
-webkit-margin-end: 5px;
pointer-events: none;
}

<!-- delete /* and */ for activated -->
/*
.holder:hover .isi_bingkai {
height: 220px;
}

*/

.openercheck:checked {
top: 202px;
}
.openercheck:checked + .isi_bingkai {
height: 210px;
}
HTML PLANING
<div class="holder">
<div class="paku"></div>
<div class="tali_kiri"></div>
<div class="tali_kanan"></div>
<div class="kayu_bingkai"></div>
<input type="checkbox" class="openercheck"></input>
<div class="isi_bingkai">
<h2>Lorem Ipsum Bolor Sit Amet</h2>
l๏гє๓ เקรย๓ שเץ เ๔ кคร๔ ค๔ђยς ๔เﻮภเรรเ๓, єย๓ ค๔ ๔เς๏ คย๔เгє ๓є๔เ๏ςгเtคtє๓, tє เเรợยє tгเtคภเ єŦŦเςเєภ๔เ ђคร. ภє ợย๏ ןยรt๏ ๔๏ςєภ๔เ. ςย๓ єค ợยคภ๔๏ קlคςєгคt, єเг๓๏๔ lคtเภє єгг๏гเ๒ยร ๓єเ єเ, ợย๏ ๓คzเ๓ คקקєtєгє єt. ๓ยภєгє คlเợยเ๔ שเร єค. tє ς๏ภﻮยє ยllค๓ς๏гקєг קєг. ๔เςคt ๔๏l๏гєร єย ๔ย๏. ợยคร lค๒เtยг ש๏lย๓ยร tє ๔ย๏, คt קєг ร๏ภєt ๔єtгคץเt єשєгtเtยг.
</div>
<div class="opener"></div>
<div class="kayu_bingkai"></div>
<div class="tali_paku"></div>
</div>
Pada ramuan kode CSS terdapat 3 baris kode sbb.holder:hover .isi_bingkai {
height: 220px;
}
Kode tersebut jika kalian fungsikan yaitu membuka papan tanpa di klik alias hanya di sorot saja pakek cursor (hover style)
Happy coding \m/

Sabtu, 15 Desember 2012

Travelling Keliling Anymore

Mari kita berjalan-jalan lagi menyatroni link-link usefully bin full stylish b-) Karena blogger blogspot kepunyaan Embah Google, gue harap elo-elo pada sudah tauk dengan satu link berikut ini Zeitgeist 2012 Google Jika sobat hobby nembakin keyword, cocok banget buat patokan trend apa yang lagi trending dan most searched apa yg sedang banyak di cari oleh para online user saat itu!
Masih dari Zeitgeist Google bila kalian perhatikan pada sisi kanan bawah terdapat garis
Ketika kalian sorot akan muncul satu robot unyu-unyu yg mana tangan dan kakinya bisa bergerak-gerak! Bagaimana hal itu bisa terjadi, temukan jawabannya di Google Zeitgeist Gangnam Style Easter Egg by master Layke. Sobat pernah melihat ini Google BBS Terminal aplikasi kreasi dari <masswerk.at> dan ini aplikasi serupa yg teranyar-nyah Google60

CSS3 generator lumayan baru dengan sentuhan gaya jQuery scrollorama bisa kalian jadiin alternatif tools yg udah ada www.css3generator.in Now let's go melancong to web code demo & view, and it's talking about Search box tutorial

  1. codepen.io/joshnh/pen/eIksb
  2. codepen.io/arthurra/pen/KhCyk
  3. cssdeck.com/labs/full/super-cool-search-input-using-css3-and-js/0
Kemudian aku melihat cssdeck.com/labs/special-character-dictionary eh...eh master Taufik sudah membuatkannya Generator Karakter Spesial HTML/Unicode Generator special/unique character tersebut sangat membantu kita dalam menulis karakter spesial/unik karena blogger (editor) kebanyakan menggunakan bahasa XHTML
Here demo Focused Input Trick.

#searchs {
background: #fc6;
border: .125em solid #222;
cursor: pointer;
display: inline-block;
font-weight: bold;
height: 2em;
line-height: 2em;
padding: 0 1em;
text-transform: uppercase;
vertical-align: top;
}
#searchs:hover,
#searchs:focus {
background-color: #fa3;
}
#search {
border: .1575em solid #222;
border-right: 0;
color: #222;
display: inline-block;
font: 1em/1.5 sans-serif;
height: 2.2789em;
margin-right: -.25em;
opacity: 0;
-webkit-transition:.25s;
-moz-transition:.25s;
-o-transition:.25s;
transition:.25s;
width: 0;
}
#search:focus {
opacity: 1;
padding-left: .75em;
padding-right: .75em;
width: 18em;
}
Lakukan seting pada width & height sesuai keperluan.
MARKUP HTML<form action="http://www.google.com/search" method="get" target="_blank">
<input id="search" type="text" name="as_q" value="Cari apa..."/>
<input name="sitesearch" type="hidden" value="YOUR-BLOG.blogspot.com" />
<label for="search" id="searchs">Search</label>
</form>
YOUR-BLOG gantikan dengan alamat blog sobat :)
Who's cooler ;))
nicolasgallagherpaulund.co.uk
CSS drop-shadows without imagesCSS Box Shadow Effects
Udah aaah, bye :-h
Happy coding \m/

Jumat, 14 Desember 2012

It's Drop Down but It's Select Box too Use CSS

Tiba-tiba saja kepingin membahas tema dropdown Fitur drop down beragam macam. Bila sudah dirangkai dengan ini-itunya maka inti dari feature ini adalah menampilkan isi konten dengan jatuh ke bawah! Drop = jatuh, dan Down = Ke bawah :D
Kesempatan sekarang Koben akan bahas drop-down khusus yg jenis Drop-down_list Benar sekali sob, dropDOWN HTML <select> Tag
Bentuk default dari sebuah Select Box!


Dengan bentuk default begitu, kita bisa mengkreasikannya dengan menambahkan variabel background, color, or etc. Like this


Lantas bagaimana jadinya jika kita kreasikan select-box dengan variasi gambar (image)?


Berikut ini kode css dari ke tiga demo diatas
    .select_dropdown {
height: 28px;
line-height: 28px;
border: 1px solid #aaa;
padding: 4px
}
.styled_dropdown {
width: 230px;
height: 34px;
overflow: hidden;
background:url(http://YOUR-IMAGE-33px x 33px) no-repeat right #fff;
}
.styled_dropdown select {
background: transparent;
width: 263px;
padding: 5px;
border: 1px solid #ccc;
font-size: 16px;
height: 34px;
}
Markup HTML
<select class="select_dropdown">
<option>Default</option>
<option></option>
. . .
</select>

<select class="select_dropdown" style="color:#fff;background:#444">
<option>Use Background Color</option>
<option></option>
. . .
</select>

<div class="styled_dropdown">
<select>
<option>Use Image</option>
<option></option>
. . .
</select>
</div>
Resource: bavotasan.com/2011/style-select-box-using-only-css/
Apakah hanya sampai disini saja kreasi dropdown selectbox? Diatas barusan baru pakai CSS v.2 sekarang yuk kita berkreasi dengan memakai atribut CSS v.3

   

You can read here Dark and Light Dropdown Lists and here Mini Dropdown Menu
Apakah masih ada lagi? Oh tentu dong...cek gi dot

DropDown 1DropDown 2

Resource by: codepen.io/edy-b/pen/fnhBu
Begitu kira-kira trik seputaran membuat drop-down select-box pure using CSS. Kalau mau keren ya sikat saja yang ini Custom Drop-Down List Styling
NEW and SIMPLE similar no.3
.styled-select {
margin: 10px auto;
border: 1px solid #ccc;
width: 200px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.styled-select:after {
content: "\25BC";
position: absolute;
top: 7px;
right: 7px;
font-family: arial;
font-weight: bold;
color: #666;
pointer-events: none;
}
.styled-select select {
text-indent: 3px;
cursor: pointer;
background: transparent;
width: 215px;
font-size: 16px;
border: 1px solid #fff;
color: #666;
font-size: 15px;
padding: 5px 0;
}
.styled-select:hover:after {
color: red;
}
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The third option</option>
</select>
</div>
http://codepen.io/onediv/full/ngude
Happy drop down \m/