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/