hover image
Elementos redondeados y efecto con CSS3
Demo Pilihan
Happy blogging \m/
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
@-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;
} <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
bannerKeberadaan 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
 |  |
 | |
|  |
script jQuerykita 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
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/
template:p Apabila kurang berkenan template pilihan Koben, silahkan sobat pilih sendiri Cari Template Para Blogger Dimulai dari tampilan sederhana terlebih dahulu :x
Bila sobat mau melihat template² itu semua di browsingan berbeda, baca saja artikel berikut Best Tools For Cross-Browser Compatibility Check by DesignModo :)Yuk kita buat begituan versi bloglang :D Sediakan CSS utk sebuah konten area..item-preview{Kemudian tambahkan CSS brkt
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);
}
รєlค๓คt ๓eภuภคเкaภ เ๒ค๔คђ קยครค١٤٣٣ ђ
hide/show;) Jadi terpampang dan jelas terlihat. Cocok banget bagi designer pemula seperti kita-kita ;))Dibutuhkan 2 buah image >> "
& 
" Save img tersebut dan hostingkan..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;
} <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 :)opensourcesangat menggiurkan :d Tools, editor, atau apapun namanya amat disayangkan jika dilewatkan. Minimal melihat & mencoba supaya tidak terlalu gaptek :p
Alat sudah tersedia, tapi otak tidak kesampaian dalam berkreasi! Jangan bimbang teman² banyak coderer baik hati yg sudah berbagi.
| Style Biasa | Full Stylish |
 |  |
