Senin, 30 Juli 2012

Tutorial CSS3 by Z-Kreations Blog

Setelah mengeksplore Web Interface Lab dengan kreasi-kreasi CSS3 yang begitu menawan, kini telah tiba berbagi lagi trick, penjelasan, demo seputaran CSS 3. @ZKreations owner by Z-Kreations blogger berkebangsaan spanyol.
Melihat gambar yang selalu ditampilkan beraliran anime/manga, Koben pikir blog tentang komik :d Ternyata sama kebanyakan blogger dari negeri matador selalu membawa tema trik, tutorial, template and etc :p Postingan baru ada sedikit, tapi beberapa postingan di sana ada yg mencuri perhatian gue (gakda bahan ngepost) :)) Sudah tidak terbilang artikel tut's ttg hover image

Elementos redondeados y efecto con CSS3
Demo Pilihan
Happy blogging \m/

Minggu, 29 Juli 2012

Snippets CSS3 Code by WebInterfaceLab

Hanya mengingatkan kembali bahwasannya dengan menggunakan variabel CSS3 kita sekarang dapat melakukan trick yang sebelumnya tidak bisa dilakukan oleh variable CSS3! Paling mencolok terjadi pada slider use css3
Hari demi hari terus bermunculan trik keren full stylish dari dunia CSS3 Selain mengingatkan pada kesempatan sekarang musim paceklik ide postingan, Koben mau berbagi beberapa trik dari web WebInterfaceLab is CSS Code Snippets & Resources for Web Developers. ± terdapat 28 buah code snippet CSS disertai demo page and link download. Tidak banyak memang postingan di sana, tapi lumayan buat menuhin perbendaharaan ilmu CSS sobat :)
Toggle Switches/Checkbox

Multi-colored Progress Bars


Silahkan kunjungi webnya, agar lebih jelas :d

Sliding Tags
Dropdown Lists
This is demo link WebInterfaceLab Demo Page
Semoga bermanfaat \m/

Sabtu, 28 Juli 2012

Make The Blueprint Ad Banner with CSS3

Dua buah image, diberi sentuhan code's CSS untuk menarik para penglihat ada juga sedikit tulisan² apakah itu? Secara cerita tertulis...gambar pesisir pantai dan segelas es sedang berputar-putar didalam 1 frame! Bagaimana cerita itu jika diimplementasikan ke dalam bentuk HTML?
Sedikit banyak kalian harus tahu variabel kode yang dibutuhkan dalam membuat tema hal diatas. Rujukan bumbu coded dapat dibaca CSS3 animation-name Property Dengan bermodalkan source itu, yuk sekarang mari kita buat The blueprint ad banner (Cetak biru sebuah banner iklan)

CSS Coded

@-webkit-keyframes muter {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(-360deg); }
}
@-moz-keyframes muter {
from { -moz-transform: rotateY(0deg); }
to { -moz-transform: rotateY(-360deg); }
}
@-o-keyframes muter {
from { -moz-transform: rotateY(0deg); }
to { -moz-transform: rotateY(-360deg); }
}
#putar {
-webkit-animation-name: muter;
-moz-animation-name: muter;
animation-name: muter;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
animation-duration: 5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
CSS diatas merupakan bumbu global (main coded) Silahkan buat variasi lain asalkan jangan menghilangkan kode diatas ;)

Markup HTML

<div style="background:url(LINK-IMAGE) no-repeat;width:...;border:...;margin:...">

<img id="putar" style="YOUR-CSS-CREATION-ADD-HERE" alt="" src="LINK-IMAGE" />

</div>
Final result is live demo
Es Shanghai Suegerrr!!!

Selamat menunaikan ibadah puasa, semoga kita termasuk orang-orang yang diberi petunjuk oleh-Nya. AMIN YAA RAAB.
Happy rotate \m/

Kamis, 26 Juli 2012

Free Full Stylish Banner Blogger

Sekarang saatnya membicarakan tentang banner Keberadaan banner dapat dibuat dengan gambar, flash, CSS atau jasa layanan berbayar :) Bagi sobat yang punya waktu luang tidak akan repot menjajal Free Design Banner! Lain cerita bagi kita yg tidak memiliki waktu luang utk berinternet ria ;)) Kakak Koben sudah membuat tampilan banner iklan (display banner) sederhana untuk dipasangkan di blog kalian kalau mau :d
Teknik yg dipakai yaitu pemakaian syntax tag table dalam menampilkan gambar banner. Teman tinggal memasangkan link tujuan sendiri di sekitar tag <img src="..., oke!
LIVE DEMO
Ad AdvsAd Advs
Ad AdvsAd Advs
Ad AdvsAd Advs

Isi kode File CSS Iklan.
Semoga bermanfaat :)
Happy banner \m/

Rabu, 25 Juli 2012

Best CSS3 Generator for You

Sekedar refreshing mengenai info tools CSS. Mungkin selama ini kita hanya bisa memakai fasilitas tools yang ada, tanpa mau bertanya apakah kita dapat membuat hal serupa! CSS3 generator sobat lebih familiar dalam hal ini ;) Ternyata dengan bantuan script jQuery kita dapat membuat generator CSS3 secara sederhana :x Berikut dua contoh artikel cara membikin CSS-3 generator Creating a CSS3 Generator with CSS3, HTML5 and jQuery & Membuat CSS3 Generator :d Perwakilan generator² yang memang banyak keberadaannya ini dapat diwakilkan oleh @designshack they are talking about 20+ Free CSS3 Code Generators
Cukup banyak variabel yg di render oleh sebuah generator. Variable itu antara lain border-radius, box-shadow, text-shadow, gradient, transform, transition, opacity blah bleh bloh...

Simpel cerita dari semua tools generator CSS3 yang ada itu ialah seperti CSS3 Playground by Mike Plate (opensource) Fungsi sama beda tampilan doang please take a look CSS3 Generator by Pascal von Seth, CSS3 Generator by JoomJunk web. Keanekaragaman tools tersebut mengisi kekurangan antara satu dengan yg lain :)
Apakah ada satu web menyediakan main tool (pokok) dalam aktifitas blogging. Artikel penjelasan cara membuat sebuah website dengan benar! Mungkin karena kesibukan lain master Gunjesh sedikit telat dalam melakukan update konten? WebTutorialPlus lihat pada menu opsi Web Tools.
Semoga bermanfaat :)
Happy tools \m/

Senin, 23 Juli 2012

10 Free Premium Template Blogger

Pada bulan suci Ramadhan penuh barakah, maghfirah mari dengan sesungguh-sungguhnya terus menerus mengisi catatan amal kita dengan segala aktifitas ibadah. Alloh SWT tidak melihat manusia itu dari harta, kedudukan, tampang,...tetapi dari derajat Taqwa seseorang.
Koben tidak akan menulis tutorial blog, karena memang tidak ada yang uptodate. Jika ide sedang paceklik begini terpaksa menggunakan jurus bagi-bagi template :p Apabila kurang berkenan template pilihan Koben, silahkan sobat pilih sendiri Cari Template Para Blogger Dimulai dari tampilan sederhana terlebih dahulu :x
Simple n' Sweet
RetroPop
Financial
Dieting
Boyburnsblog
BlogForme
Business Solutions
London Creative
WpInsurance
Speed Hosting
Bila sobat mau melihat template² itu semua di browsingan berbeda, baca saja artikel berikut Best Tools For Cross-Browser Compatibility Check by DesignModo :)
Happy template \m/

Minggu, 22 Juli 2012

Annotation Overlay Effect use CSS3

Mencomot artikel dari web master developer sangat terasa berfungsi ketika tidak ada ide postingan macam sekarang ini sob ;)) Contoh master JMiur dalam postingan Paneles deslizantes con CSS, menyadur ide dari Sliding Image Panels with CSS3 by Mary Lou.
Selidik punya ngelihat ternyata ada satu keistimewaan variable kode input di sana. Setelah dirangkai dengan code lain, variabel input bisa digunakan untuk menghilangkan & menampilkan sebuah konten. Sederhana pemakaian sudah Koben terapkan pada artikel Marhaban Yaa Ramadhan 1433 H Silahkan klik gambar yang ada disana! Maka dari itu, gue comot yang berikut dari Codrops Annotation Overlay Effect with CSS3

Yuk kita buat begituan versi bloglang :D Sediakan CSS utk sebuah konten area..item-preview{
width: 100%;
position: relative;
}
.item-preview img{
width: 100%;
height: 500px;
display: block;
margin: 10px auto;
box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
}
Kemudian tambahkan CSS brkt

.bb-annotations{
width: 100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
z-index: 5;
background: rgba(0,0,0,0.4);
box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bb-annotations span{
display: block;
position: absolute;
padding: 10px 0;
width: 25%;
min-width: 101px;
text-align: center;
background: #A6CF72;
color: #18343E;
font-size: 1.1em;
opacity: 0;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bb-annotations span:nth-child(1) {
top: 10%;
left: 16%;
}
.bb-annotations span:nth-child(2) {
top: 26%;
left: 3%;
}
.bb-annotations span:nth-child(3) {
top: 37%;
right: 2%;
}
.bb-annotations span:nth-child(4) {
top: 56%;
right: 15%;
}
.bb-annotations span:nth-child(5) {
bottom: 25%;
left: 4%;
}
.bb-annotations span:nth-child(6) {
top: 15%;
right: 15%;
}
input.bb-toggle {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
opacity: 0;
z-index: 100;
border: none;
cursor: pointer;
}
input.bb-toggle:checked + img {
box-shadow: 1px 1px 6px rgba(0,0,0,0.5);
opacity: 1;
}
input.bb-toggle:hover + img{
opacity: 1;
}
input.bb-toggle:checked ~ .bb-annotations,
input.bb-toggle:checked ~ .bb-annotations span{
opacity: 1;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(1) {
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(2) {
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(3) {
transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(4) {
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
transition-delay: 0.6s;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(5) {
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
-ms-transition-delay: 0.7s;
transition-delay: 0.7s;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(6) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
Enam buah gue buat konten yang tidak terlihatnya. Menghilangkan var. -transform: scale(); Hasil akhir sami sareung...
Blogger How To?Coded WritedHTML CodeHack BloggerTutorial BloggerTrik dan Tips

Happy coding \m/

Jumat, 20 Juli 2012

Puasa Aman Blogging Jalan Terus

Dalam menyambut suasana bulan ramadhan Koben akan berbagi beberapa links online bernafaskan religius. Semoga dengan begitu kita bisa melakukan aktifitas blogging sekaligus meraup pundi-pundi amal pahala dengan mendengarkan lantunan bacaan Al-Qur'an online. Collected Advanced Al-Quran Online :)
Blog walking ke sobat Alam Perwira membaca artikel Saluran Al-Quran Online. Dari sana gue selidiki URL 50.22.223.13 yang mana merupakan saluran random para qori (pelantun ayat suci) terkenal! Kemudian menclok deh Zaid Info. Karena lumayan ada beberapa para Qori' dan lantunan ayat suci Al-Qur'an yang akan terdengar dipilih secara acak (random) Koben sengaja buatkan untuk kalian satu kreasi full stylish ;))

Jika sobat mau kreasi diatas dalam variasi berbeda, silahkan baca tutorial Varian Form Action, Drop Down, Select Navigation :) Bagi internet kategori koneksi lemot, streamingan sekecil apapun tetap terasa :d Terpaksa deh mau tidak mau mendownload lantunan qori Abdul Rahman Ibn Abdul Aziz as-Sudais an-Najdi Download MP3 Alquran 30 Juz Lengkap
Apakah kalian masih menunggu meraup obral pahala di bulan Ramadhan ini sambil berblogging :-?
Sebagai tambahan teman ngeblog di bulan shaum ada Ensiklopedi Hadits Kitab 9 Imam
Ket:
mms://50.22.223.13/blablabla, pada mozilla jika mengikutsertakan variabel mms akan muncul window info Launch Application Choose An Application. Bukalah dengan aplikasi multimedia window yg kalian miliki (winamp, windows media player, etc)
Semoga bermanfaat O:-)
Happy listening qur'an \m/

Marhaban Yaa Ramadhan 1433 Hijriyah

Sucikan hati, bersihkan diri, luruskan niat...Mari segenap kaum muslimin dan muslimat di seantero jagat alam raya semesta...Sambut kedatangan bulan penuh rahmat, barakah, dan ampunan. Minimalis kegiatan keduniawian perbanyak aktifitas kerohanian. Menggapai ridho Alloh Subhanahu Wa Ta'ala.
гђ א rђ єlt euкa ђ ק

١٤٣٣ ђ


Rabu, 18 Juli 2012

Trick CSS3 Make Multiple Background Image

Coba kalian tebak apakah gambar berikut merupakan satu atau ada berapa gambar?

Ada 4 image dalam satu konten diatas! Kenapa bisa begitu! Keajaiban telah terjadi dalam variable background-image Sekarang kita dapat mengimplementasi background menjadi multiple (multiple background image) Berikut Koben kasih rujukan untuk pelajaran lebih detil :d
  1. CSS3 Backgrounds
  2. Multiple Backgrounds with CSS3
  3. CSS Backgrounds and Borders Module Level 3

Point dari teknik membuat multiple background berada di variabel background-image, background-position, background-repeat pokoknya yang ada sangkut paut dengan background :d Silahkan sobat pelajari lebih lanjut dengan memperhatikan kode-kode CSS pada demo ;)

Ide postingan ini timbul ketika gue lagi membaca artikel Curtain reveal effect using CSS by master Ryan Seddon. Tut's membuat efek curtain reveal terlihat kala melakukan scroll ke bawah sampai mentok dan terbukalah sesuatu yg tersembunyi :p

Bonus
www.scriptic.co.uk
Happy coding \m/

Selasa, 17 Juli 2012

Make Line Tree Navigation Pure Use CSS

Koben akan berbagi membuat navigasi sederhana dari kehebatan kode CSS seperti Make TreeVew Menu Without JavaScript! Murni memakai variabel CSS2 memudahkan sobat dalam memakainya :)
Ide ini datang dari MediaLoot salah satu web kumpulan premium design resources for you. Bisa belajar atau jadi member di sana guna menjadi profesional blogger :d Menu navigasi sekarang ini sejenis tree-menu, tetapi tidak bisa di hide/show ;) Jadi terpampang dan jelas terlihat. Cocok banget bagi designer pemula seperti kita-kita ;))
Dibutuhkan 2 buah image >> " & " Save img tersebut dan hostingkan.

Kode CSS

.main_nav {
float: left;
width: 370px;
margin-left: 5px;
font-size: 14px;
}
.main_nav ul {
float: left;
display: inline;
width: 175px;
margin-right: 5px;
color: #cbd6e2;
padding: 10px 0 0 0;
list-style-type: none;
background: url(PNG Image, 1×10 pixels.png) left repeat-y;
}
.main_nav ul li {
float: left;
width: 145px;
padding-left: 23px;
line-height: 145%;
background: url(PNG Image, 20×1 pixels.png) 0 bottom no-repeat;
}
.main_nav ul li.mains_sub {
background: url(PNG Image, 20×1 pixels.png) 0 17px no-repeat;
}
.main_nav ul li a {
color: #c48962;
position: relative;
top: 7px;
}
.main_nav ul li a:hover {
color: #cbd6e2;
}
.main_nav ul ul {
width: 132px;
margin: 8px 0 0 15px;
padding- top:0;
}
.main_nav ul ul li {
width: 100px;
}
Don't forget to change url image! Kemudian kode HTMLnya deh.

Syntax HTML

<div class="main_nav">
<ul>
<li class="mains_sub">
<a href="/">Main</a>
<ul>
<li><a href="#">Main</a></li>
<li><a href="#">Main1</a></li>
<li><a href="#">Main2</a></li>
</ul>
</li>
<li class="mains_sub"><a href="#">Main1</a>
<ul>
<li><a href="#">Main1</a></li>
<li><a href="#">Main1-2</a></li>
</ul>
</li>
<li><a href="#">Main2</a></li>
</ul>
<ul>
<li class="mains_sub">
<a href="#">Main-A</a>
<ul>
<li><a href="#">Main-A-1</a></li>
<li><a href="#">Main-A-2</a></li>
<li><a href="#">Main-A-3</a></li>
<li><a href="#">Main-A-4</a></li>
<li><a href="#">Main-A-5</a></li>
</ul>
</li>
<li><a href="#">Main-B</a></li>
<li><a href="#">Main-C</a></li>
</ul>
</div>
SAVE. Lihat hasil kerja. Thanks @medialoot :)
http://geeksretreat.wordpress.com/2012/07/15/swinging-with-html5-and-css3-transitions/
Happy navigasi \m/

Senin, 16 Juli 2012

From Me To You...HeHeHe

Artikel CSS3 Tools Online mungkin bisa menjadi referensi sobat-sobat dalam melatih skill. Semakin hari para developer terus menerus berkreasi menemukan tools multiguna bagi kita! Koben sendiri masih giat menyimpan alamat² tool, apalagi yang sudah opensource sangat menggiurkan :d Tools, editor, atau apapun namanya amat disayangkan jika dilewatkan. Minimal melihat & mencoba supaya tidak terlalu gaptek :p
Versi demi versi keluar mengoptimalkan fitur dan kinerja dari sebuah tools yang sudah ada. Sekarang sobat coba membuat beginian tanpa memakai alat?Bisa dua hari 2 malam ngutak-ngatik membuat kode CSS begono #:-S Kalau ada alatnya buat apa pusing² kepala dibuatnya 8-> Please welcome On/Off Flipswitch HTML5/CSS3 Generator
Tools sudah ada dimana-mana, begitu juga dengan urusan button/tombol kita tuh tinggal comot doang :)) You can try it CSS Social Buttons, FC Webicons Set or Free CSS3 Button Styles Ke dua elemen diatas memang memiliki peran masing² dalam membangun seorang ahli HTML ;)) Satu lagi mungkin element harus kita kuasai yaitu HTML Editor atau WYSIWYG Editor. Urusan editors mungkin artikel berikut bisa menjadi rujukan 18 Useful Web Based Code Editors for Developers Sebagian besar editor disana sudah pada mendukung beberapa jenis script ;)

Alat sudah tersedia, tapi otak tidak kesampaian dalam berkreasi! Jangan bimbang teman² banyak coderer baik hati yg sudah berbagi.

Untuk source sebenarnya sudah banyak di blog ini gue posting, tapi tercecer entah dimana :d Perwakilan saja deh [..]
  • www.jsdo.it
  • www.cssdeck.com
  • www.codepen.io
  • www.thecodeplayer.com
  • www.uicod.org
  • mod.it
  • wonderfl.net
  • liveweave.com
  • plnkr.co
  • livecoding.io
  • refork.com
  • What else...

Happy blogging \m/

Sabtu, 14 Juli 2012

Click - Visit - Reading

This is post idea by MDN holiday calendar happy enjoy :) Please click, visit and reading ;)

Jumat, 13 Juli 2012

Add Animated Flying Twitter to Blogger (lasted)

Lagi-lagi dari pada tidak melakukan aktifitas memosting, Koben akan berbagi sedikit update tentang tutorial Animated Flying Twitter in The Blog! Sobat @nitinmaheta sudah berbaik hati membikinkan 7 type of Animated Flying Twitter Birds Widget For Blogger. Kalian hanya tinggal memasukan id twitter dan text custome, jebret tombol Generate, sampe deh di blog :d
Sebenarnya update burung berkicau terbang di sini tidak begitu menonjol. Hanya ada penambahan konten agar terlihat lebih full stylish gitcuh bro :d Terlihat efek tambahan ketika cursor menyorot pada gambar burung! Screenshot
Style BiasaFull Stylish
Koben dapatkan update script twitter ini dari salah satu member microblogging Tumblr Saya lihat saja dalemannya, script itu yang harus kalian pasang di blog :d Langkah-langkah apa saja yg mesti dilakukan:
  1. Buka script.
  2. Twitter JS
  3. Ctrl + F
  4. Cari tulisan 4 buah BebenKoben gantikan dengan account twitter kalian.
  5. Save.
Kalau sudah melakukan settingan ini-itu, silahkan kalian compress dahulu script sebelum melakukan hostingan/upload.
Tekan kembali Ctrl + U dan cari kode var birdSprite Kode tersebut tempat image/gambar sprite twitter berada. Silahkan sobat pilih 7 jenis gambar kreasi dari master Nitin Maheta. Right click to image, and choose Save Image As.

Semoga bermanfaat :)