Input + Label be Awesome Work

Seperti pada episode sebelumnya snippet code input type, sekarang waktu update artikel tersebut. Jika sobat membaca sampai akhir, maka kalian akan menemukan link source dengan judul clean animated input labels by Oliver Knoblich! Sederhana namun tetap gaya, AA Koben akan berbagi hal serupa (input property) ketika mulai mengetikan kata-kata pada kotak, akan muncul kalimat yg tersembunyi. Demikian penjelasan yg membingungkan :D Original source with title float labels with CSS cdpn.io/nimFr
Source tersebut merupakan quick sketch yang mana untuk menunjukan sebuah ide saja kata si Alexandr Marinenko :P Perlu di ingat juga nih, penulisan kode yg digunakan tidak umum dan gue pikir ini code snippets kelas master. Berikut info beberapa kode snippet yg bisa kalian ketahui www.realcombiz.com/2014/02/20-useful-html5-code-snippets-you.html

Coba sekarang ketikan kata/kalimat pada kotak

First name

Second name

.wrappet {
display: inline-block;
overflow: hidden;
padding: 15px 0 0;
position: relative;
vertical-align: top;
}
.wrappet input[type=text] {
border: 1px solid #888;
padding: 10px;
width: 212px;
}
.wrappet label {
color: #2980b9;
font-size: 11px;
font-weight: bold;
left: 4px;
opacity: 0;
position: absolute;
top: 0;
}
.wrappet input[type=text]:valid + label {
opacity: 1;
}
.container {
margin: 0 0 10px;
}
.container.popup .wrappet label {
transition: opacity 0.25s ease-out, top 0.25s ease-out;
-webkit-transition: opacity 0.25s ease-out, top 0.25s ease-out;
top: 10px;
}
.container.popup .wrappet input[type=text]:valid + label {
top: 0;
}
.container.slide .wrappet label {
transition: opacity 0.25s ease-out, left 0.25s ease-out;
-webkit-transition: opacity 0.25s ease-out, left 0.25s ease-out;
left: -20%;
}
.container.slide .wrappet input[type=text]:valid + label {
left: 4px;
}

Planning HTML<div class="container popup">
<div class="wrappet">
<input type="text" placeholder="Name" required />
<label>First name</label>
</div>
</div>

<div class="container slide">
<div class="wrappet">
<input type="text" placeholder="Name" required />
<label>First name</label>
</div>
</div>Ingat kode di atas merupakan framework (ide). Sobat bisa pakai sesuai kebutuhan dan sesuai kemampuan ;)) Variabel input type text akan terlihat lebih full stylish jika pakai trik tersebut :-" Kode snippet input property ini sampai membuat seorang owner codepen.io Chris Coyier berkreasi juga dengan title label pattern with just CSS cdpn.io/CiflJ

samples.msdn.microsoft.com/iedevcenter/FormControls/scenario4.html

Happy input \m/

Make an Attractive Hover use jQuery

Mau memasang embed form action uploader edit and crop for image di situs kalian, cobalah www.croppic.net Menawarkan 3 opsi dalam tampilan upload, dan fitur² lainnya. AA Koben tidak akan membahas mengenai croppic, namun ada satu bagian pada footer web tersebut yang cukup fullstylish terlihat ;)) Pojok kanan bawah jika kalian sorot akan tampak sebuah gambar yg melejit dan tooltip sederhana dengan tujuan memberitahukan satu nama website. Itu yg akan AA share untuk sobat-sabit :P Cukup atraktif hover terjadi dalam sekali sorot! Syarat utama harus sudah ada script jQuery pada template.

Bahan-bahan:
Sediakan 3 buah gambar:

1. Gambar tooltip dengan resolusi 60 x 40 pixels.
2. Gambar logo dgn resolusi 65 x 12 pixels.
3. Gambar logo melejit dgn resolusi 50 x 49 pixels.
4. Size image by source web.

Tentukan terlebih dahulu gambar beserta resolusi yg diinginkan. Karena jika tidak, akan sedikit ribet nanti dalam menetapkan aturan dalam atribut CSS-nya.

Buka dan lakukan Save Page As .htm berikut.

Bukalah pada aplikasi kode (notepad) Koben buatkan 2 opsi pada id selector #bybbn label Sobat bisa pilih, mau memakai image tooltip atau warna saja! Sebenarnya kalau cuma edit & crop image, sobat bisa coba apps berikut github.com/blueimp/JavaScript-Load-Image :D

Happy coding \m/

Update Post Blog Kecil-kecilan

Kalau sobat memasuki link codepen master Hugo, artikel snippet code CSS input type gue dapatkan dari sana! Semuanya bagus² karya Hugo, sekarang ane comot Neon Dialog Boxes cdpn.io/yAtbx Kalau membaca kata NEON, berarti warna latar belakang haruslah warna gelap. Kalau warna terang kurang terlihat efek glow neonnya! Master hugo membuatkan dalam bahasa SCSS/Sass. Versi koben yaaa format CSS :D

Save halaman itu, kode di dalam tag <style> . . . </style> kode CSS. Markup HTML sbb<div data-title="Info Dialog" class="dialog-box info">
<em> Note: </em> blah bleh bloh here...
</div>Sebenarnya AA Koben cuma mau kasih 2 link source keren dari codepen.io/hugo/public & codepen.io/oknoblich/public

Sebagai bonus...

• grafixdesignmag.com/inspiration/20-small-tools-for-web-designer-web-based-apps
• spyrestudios.com/30-free-bootstrap-code-samples
• templatesledger.com/30-free-blogger-templates-to-download

Lagi males posting sebenarnya mah :)) Cuman update post blog kecil-kecilan ;))

Happy blogging \m/

Make Simple Editing Editor use Attribute Contenteditable

Beginilah kalau sedang tidak ada aktifitas. Sobat masih ingat dengan artikel merubah browser menjadi seperti notepad? Ternyata ada satu attribute HTML5 yang digunakan yaitu contenteditable Atribut contenteditable memiliki fungsi yakni menentukan apakah isi dari elemen dapat diedit atau tidak. Cari referensi sendiri² mengenai hal itu, banyak kok library web yg menerangkan ;)) Berikut alakadar link sources:

1. What is the Specific of Contenteditable!
2. html5demos.com/contenteditable
3. developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
4. akatov.github.io/angular-contenteditable
5. www.hongkiat.com/blog/html5-editable-content
6. codepen.io/matt-west/full/gtruC
7. simonewebdesign.it/blog/how-to-make-browser-editor-with-html5-contenteditable

Ada satu yg menggelitik dan kelupaan sama gue nih ;)) AA baca mengenai CSS live editing editor snippet dari www.webdeveloperjuice.com/2013/12/23/css-live-editing-editor-snippet Ketika melakukan penulisan bahasa CSS secara inline styles, kita dapat melakukan perubahan seketika. Berikut demo supaya jelas...

Result

My Blog

Edit Here

Coba gantikan value yg berada pada kotak Edit Here?

<p><a class="link" title="Tutorial Blog for Stylish Blogger" href="http://beben-koben.blogspot.com/">My Blog</a></p>
<style>
a.link {font-size: 21px;text-align: center;padding: 20px;display: block;}
.editable {display: block;font-size: 15px;color: #333;padding: 10px;border: 2px dashed #ccc;font-family: 'Courier New',Courier,sans-serif;white-space: pre-wrap;max-height: 212px;overflow: auto}
.editable:focus {outline: none;border: 2px solid #ccc;}
</style>
<style class="editable" contenteditable="">a.link { 
   color: #038;
   border: 2px dashed gray;
   background: lightgray; 
}</style>

Ternyata atribut contenteditable jugalah yg mendasari terciptanya Rich-Text Editing. Buka halaman berikut, scroll ke bawah dan dapatkan source kode rich-text editor example developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

Bonus:
templatespicy.com/20-best-free-blogger-templates-2014

Happy contenteditable \m/

Snippet Code CSS input type

Seiring dikembangkannya bahasa HTML dan CSS, sejalan dengan itu terlahir ide-ide penulisan snippet kode CSS. Satu artikel post yang bisa sobat pelajari tentang useful css snippets every designer should have www.hongkiat.com/blog/css-snippets-for-designers Kesempatan sekarang AA Koben akan berbagi snippet tag input Lumayan banyak attribute and value yg dapat dirangkaikan dengan tagging <input> Tag <input> menentukan field input dimana pengguna dapat memasukkan data. Sebuah field input dapat bervariasi dalam banyak cara, tergantung pada jenis atribut.

Attribute	Value	Description
type	button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week	Menentukan jenis elemen <input> untuk menampilkan.

Mari fokus kepada 2 jenis tipe input, yakni input[type="text"] & input[type="submit"]
Gue menemukan form action keren punya by master Hugo Darby-Brown cdpn.io/oBDaj Bentuk kotak pencarian yang menyembunyikan tombol search, tombol akan muncul ketika focus (mengetikan kata dalam kotak pencarian)

DEMO

Keren kan!!!

.formCus {
position: relative;
height: 3em;
margin: 0 auto;
width: 25em;
overflow: hidden;
}
.formCus input {
border: none;
height: 100%;
}
.formCus input:focus {
outline: none;
}
.formCus input[type="text"] {
padding: 0 0 0 1em;
width: 100%;
color: #777;
font-size: 19px;
}
.formCus input[type="submit"] {
background: #5096f3;
position: absolute;
right: 0;
top: 0;
width: 5em;
color: #fff;
cursor: pointer;
}
.formCus .input2:focus {
padding: 0 1em;
}
.formCus .input2:focus + .input2 {
right: 0;
}
.formCus .input2[type="submit"] {
right: -5em;
transition: 0.5s;
}
.formCus .input2[type="submit"]:focus {
right: 0;
}

Markup HTML<form action="" class="formCus" method="get" target="top">
<input class="input2" type="text" name="q" placeholder="Search something..."/>
<input class="input2" type="submit" value="Search"/>
</form>Itu baru area tombol yg menjadi fullstylish, belum lagi area input labels with clean animated b-) Label dengan efek animasi lembut yg lagi ngetrend dimana-mana. Jika kalian tertarik, silahkan pelajari codepen.io/oknoblich/pen/wFGIH The source
BONUS: cdpn.io/zcwbD - cdpn.io/dLIjt

Happy input \m/

Miscellaneous Hover Effects using CSS3

Secara pribadi jika melihat trik atau tutorial yang mungkin belum ada hentinya meliputi CSS trick hover dan jQuery script Walau tidak menutup kemungkinan sebenarnya para codinger, scripter, or developer yg entah dimana keberadaannya selalu berkreasi tanpa mengenal kata berhenti :) Dari sekian banyak efek-efek tercipta, membuat para penikmat terbuai dibuatnya...ahaaaiii...
AA Koben akan mencoba berbagi informasi meliputi links source dari hover effect of CSS3. Secara global ternyata perkembangan hasil efek hover menggunakan properti CSS berkutat dengan kode-kode yg hampir sama! Sebelum itu, harap sobat berjalan-jalan ria terlebih dahulu ya ;))

1. Free CSS3 Image Hover Effects
www.dezineguide.com/tutorial/15-free-css3-image-hover-effects
2. CSS3 Hover Effects
www.alessioatzeni.com/blog/css3-hover-effects
3. Collection of CSS3 Hover Effects
www.thomashardy.me.uk/a-collection-of-css3-hover-effects
4. Original Hover Effects
tympanus.net/Tutorials/OriginalHoverEffects
5. Caption Hover Effects
tympanus.net/Tutorials/CaptionHoverEffects/index.html
6. CSS Full Page Slider
cssdeck.com/labs/full/css-only-full-page-slider
7. 50+ Free jQuery CSS3 Image Hover Effects
bloomwebdesign.net/2014/01/50-free-jquery-css3-image-hover-effects
8. iHover 30+ Ready to use Hover Effects, built with SASS
gudh.github.io/ihover/dist/index.html

Setelah melihat itu semua, berikut links source bermacam-macam efek yang dapat di buat oleh property CSS3.

1. Hover.css
ianlunn.github.io/Hover
2. CSS3 Animation Cheat Sheet
justinaguilar.com/animations
3. Animate.css
daneden.github.io/animate.css
4. CSS animations with a soul
lvivski.com/anima
5. animo.js
labs.bigroomstudios.com/libraries/animo-js
6. Magic css3 animations
www.minimamente.com/magic-css3-animations
7. Effeckt.css
h5bp.github.io/Effeckt.css/dist
8. 55 CSS3 Animation Effects Demos
codepen.io/iPawan/pen/stAzC

Varibel efek hover dari CSS3 akan terlihat jika browser sobat sudah mendukung. Berikut 2 link source cheat sheets untuk kalian.

1. All The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuery
www.designyourway.net/drb/all-the-cheat-sheets-an-up-to-date-web-designer-needs-css3-html5-and-jquery
2. Exactly how much CSS3 does your browser support?
lea.verou.me/2012/02/exactly-how-much-css3-does-your-browser-support
3. Your browser supports....
cdpn.io/vsrhg

Demikian saja info dari gue, semoga ada manfaatnya dan sobat bisa langsung berkreasi ria :D

Happy animations \m/

Play Online or get Sources Flappy Bird Games

Dunia permainan sedang heboh dengan berita penutupan game FlappyBird. Di saat popularitas sedang menanjak, creator Flappy Bird berkebangsaan Vietnam Nguyễn Hà Đông secara tiba-tiba melakukan penutupan link download dari web apps store! Berbagai spekulasi bermunculan akibat tindakan yg dilakukannya tersebut. Ada yg bilang begini, ada yg bilang begitu...
Biarkan polemik mencari penyelesaiannya. Sebagai salah satu master .html, AA Koben akan berbagi link sources bagaimana bermain game flappy bird via browser ;)) Ada yang pakai JavaScript, jQuery, canvas and flash. Untuk penampilan burung, latar belakang, dan aksesoris game flappybird ada yg full membuat pakai properti CSS.

Hajji Tarek membuat kreasi tampilan flappy bird full use CSS cssdeck.com/labs/full/flappy_bird Jonathan Sampson brekreasi dengan hasil kerja berjudul flap, flap, flap cdpn.io/tscyf Berikut beberapa link online game burung flappy

• flappybird.io
• www.kongregate.com/games/maxblive/flappy-bird-flash
• www.plonga.com/skill/Reaction/Flappy-Bird-Online
• bird.ruosen.io
• uralozden.com/flappy

Saya sendiri sering bermain di web opsi nomor 4! Karena bertarung langsung dari negara manapun result meliputi top 30 akan terlihat :)) Jika sobat berminat dengan game ini, maka satroni saja source's berikut

• github.com/chairuosen/FlappyBird-By-JS
• ellisonleao.github.io/clumsy-bird
• github.com/ellisonleao/clumsy-bird
• codepen.io/JTParrett/pen/zwhyI
• github.com/hyspace/flappy
• github.com/uralozden/flappy-bird
• github.com/marksteve/dtmb
• cdpn.io/eukbC
• cdpn.io/gGahJ

Game sederhana klasik lain mungkin sobat mau memainkannya juga ;)

• cssdeck.com/labs/full/html5-doodle-jump
• developer.mozilla.org/en-US/demos/detail/mrmario-pro/launch
• developer.mozilla.org/en-US/demos/detail/penguin-jump/launch

Selamat bermain kesal-kesal ria =))