Advertise

Tampilkan postingan dengan label CSS3. Tampilkan semua postingan
Tampilkan postingan dengan label CSS3. Tampilkan semua postingan

Slide Image Full CSS3 tanpa JS dan JQuery

Membuat slide image biasanya memerlukan script yang banyak dan rumit, kita juga tidak bisa menaruhnya langsung di blog kita karena akan menghambat akses blog yang lambat, jadi biasanya harus menggunakan pihak kedua untuk menyimpan file JS tersebut. Untuk kali ini saya coba membuat sebuah slide image dengan CSS3 tanpa java script dan JQuery .

Slide image CSS3 ini sangat simple dan mudah di gunakan, saya menambahkan sedikit shadow pada bagian background utamanya dan link slide mode page number untuk melihat gambar selanjutnya. sebenarnya slide image ini cara kerjanya hampir sama dengan pagination atau page number yang mengalihkan link ke page berikutnya. untuk lebih jelas silahkan lihat demo di link bawah ini.

Lihat DEMO

Untuk membuat slide image dengan css3 caranya cukup simple.
Lihat caranya di bawah ini.
Pertama tambah Widget > Pilih HTML/JavaScript di blog anda dan Copy kode di bawah ini.

<style>
#images {
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
width: 720px;
height: 400px;
overflow: hidden;
position: relative;}

#images img {
background:#ccc;
width: 720px;
height: 400px;
position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;

transition: all linear 500ms;

-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;}

#images img:target {
left: 0;
z-index: 9;
opacity: 1;}

#images img:first-child {
left: 0;
opacity: 1;}

#slider {
widht:720px;
float:left;
text-decoration: none;
background: ;
padding: 8px 10px;
color: #222;}

#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 8px 10px;
color: #222;}

#slider a:hover {
background: #C6E4F2;}

</style>


<div id="images">
<a href="http://wallpaper4xp.blogspot.com/2010/07/3d-graphics-graffiti.html"> <img id="image1" src="http://1.bp.blogspot.com/_lh4qH1cW0XQ/TEl41-OaS4I/AAAAAAAAB_Y/5vUu7hu43g0/s400/3D+graphics+Graffiti.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/07/girls-field-on-bicycle.html"> <img id="image2" src="http://1.bp.blogspot.com/_lh4qH1cW0XQ/TEP0seDCLoI/AAAAAAAAB7Q/gL_03zLKXyM/s400/Girl+field+bicycle.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/09/music-box.html"> <img id="image3" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TIxELRCiAZI/AAAAAAAACPI/AoL6c1jJMNk/s400/music+Box.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/09/glamor-rock-sensation.html"> <img id="image4" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TIXotYo5PGI/AAAAAAAACM4/vJUlKZmQvfY/s400/VAIN+Glam+rock+Wallpaper.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/06/fire-custom-chopper-motorcycle.html"><img id="image5" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TCljHSoRohI/AAAAAAAAByU/qwSeFjGd8sg/s400/Black+Fire+Custom.jpg" /></a></div>
<div id="slider">
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>
<a href="#image5">5</a>
</div>


Ganti kode warna biru dengan alamat link yang ditargetkan sesuai gambar anda, ganti juga kode warna hijau dengan kode gambar milik anda.

Anda juga bisa mengcustom ukuran lebar dan tinggi yang diinginkan pada kode css diatas. cukup mudah bukan selamat mencoba.

CSS Gradient Generator Yang Powerfull Dan Mudah Digunakan

Membuat background dengan kombinasi warna atau gradient untuk menu navigasi, background dasar dan lainnya memang mudah jika menggunakan program grafis seperti adobe photoshop dan kawan kawan, tapi tentunya tidak semua orang menguasai program grafis tersebut dan juga ukuran image yang dihasilkan relative besar.

Di postingan sebelumnya pernah saya bahas warna warni gradient dengan css3 namun hanya beberapa saja , Banyak website di internet yang menyediakan pasilitas untuk membuat kombinasi warna atau gradient generator yang bisa kita manfaatkan. Dengan css gradient generator yang ada di internet anda bisa memilih banyak warna gradasi yang inginkan.



Untuk kali ini saya akan memberikan situs yang menyediakan fasilitas untuk membuat background gradasi atau gradient yang sangat keren dan mudah digunakan dibandingkan dengan gradient generator yang pernah saya kunjungi, nama situsnya adalah www.colorzilla.com/gradient-editor.

CSS Gradient Generator dari www.colorzilla.com/gradient-editor menyediakan gradasi dengan mode biasa dan juga glossi seperti efek kaca yang tentunya akan lebih menarik. Kita juga bisa mengatur gradasinya seperti verical atau horizontal.

jika blogger tertarik bisa kunjungi situsnya di www.colorzilla.com/gradient-editor pilih mode gradient yang diinginkan, ambil kode css-nya dan pasang di blog anda. Cukup mudah bukan selamat mencoba.

Circle Horizontal Navigasi Menu Dengan CSS3

postingan kali ini saya akan memberikan tutorial pembuatan menu navigasi dengan model circle atau lingkaran menggunakan css3. Menu navigasi ini full menggunakan css3 tanpa image, Circle Horizontal navigasi menu css3 ini cukup lumayan walaupun hasil dari iseng-iseng membuat lingkaran dengan css3 sehingga terpikir untuk di implementasikan kepada menu navigasi horizontal, ternyata cukup memuaskan hasilnya. Untuk contohnya lihat gambar dibawah ini.

circle navigasi css3
Untuk kode css3 lingkaran atau circle sebenarnya menggunakan border radius contoh kodenya seperti dibawah ini:
-moz-border-radius:100px; -webkit-border-radius:100px;

Langsung pada pembuatan circle menu navigasi dengan css3 :
Untuk lebih mudah tanpa obrak abrik kode template, jadi saya memasang navigasi ini langsung di widget.

Masuk pada Rancangan >> Tambah Gadget >> HTML/JavaScript
Masukan kode di bawah ini :

<style type="text/css">

ul#circle { display: inline;list-style: none; }
ul#circle li { margin-right:6px; float:left;width: 65px;height:65px; }
ul#circle li a {
text-decoration: none; width: 55px;height:55px; padding:5px;
font-size:8pt; font-weight:bold; font-family:georgia;
text-align:center; line-height:50px;
border: 1px solid #ff0000;
-moz-border-radius:100px; -webkit-border-radius:100px;
background: #ffffff; display:block; color:#000; }
ul#circle li a:hover {
background:#ff0000; border: 1px solid #000;
color:#fff; font-size:8pt; font-weight:bold; }

</style>

<div id='circle'>
<ul id='circle'>
<li><a href='http://chugygogog.blogspot.com' >HOME</a></li>
<li><a href='http://chugygogog.blogspot.com' >BLOG</a></li>
<li><a href='http://chugygogog.blogspot.com' >GRAFIS</a></li>
</ul>
</div>

Ganti teks warna merah dengan link anda, ganti juga warna biru dengan judul link yang diinginkan. Jika sudah silahkan di simpan.

NB :: Untuk penulisan judul link di usahakan tidak terlalu panjang karena menu ini menggunakan lebar dan tinggi yang sama sehingga jika penulisan judul linknya terlalu panjang maka teksnya akan keluar dari lingkaran menu tersebut. Selamat mencoba.

Warna Warni Button Gradient CSS3

Menambahkan postingan yang kemarin mengenai Membuat tombol Dengan CSS3 yang kebetulan ada rekan blogger BelajarCORELDRAW yang meminta beberapa source kode untuk button CSS3 yang lebih berpariasi dengan penggunaan warna yang berbeda, Karena memang kemarin saya hanya membuat satu sample button CSS3 dengan warna gradasi putih.

Untuk sekarang saya mencoba memberikan source kode button Gradient CSS3 yang sedikit warna warni, Untuk contoh bisa lihat screen shoot gambar dibawah ini.

Untuk source kodenya bisa diambil dibawah ini sesuai dengan warna button CSS3 yang diinginkan.

Source kode Black Button :
.black {
color: #d7d7d7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');}

.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}

.black:active {
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}

Source kode White Button :

.white {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');}

.white:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');}

.white:active {
color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');}

Source kode Orange Button

.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Source kode Red Buttom

.red {
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

Source kode Blue Button

.blue {
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

Source kode Green Buttom

.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

Membuat tombol share Dengan CSS3 "Button Share CSS3 Style"

Penggunaan share button (Social booksmark) di blog sangat berguna sekali untuk meningkatkan popularitas blog, tentunya blogger semua sudah tahu salah satu cara untuk meningkatkan popularitas blog yaitu dengan memasang tombol share (Social booksmark).

Sekarang saya coba membuat share button dengan CSS3, share button ini menggunakan ikon dan teks secara horizontal dan juga teks shadow, background gradient dengan CSS3.

Contoh Tombol Share dengan CSS3 seperti dibawah ini.
Button Share CSS3 Style
Tombol share ini saya coba pasang dibawah postingan, tapi anda bisa saja memasang di bagian yang anda inginkan.

Untuk cara pembuatan tombol share dibawah posting seperti berikut :

Masuk pada Edit HTML > Expand Template Widget
Masukan kode dibawah ini sebelum kode ]]></b:skin>

#bookmarks {
padding:6px 0px;text-align:left; overflow: hidden;}
#bookmarks a {
padding:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
color: #9999; text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border: solid 1px #c0c0c0; background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }

#bookmarks a:hover {
background: #ededed; border: solid 1px #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); }

Lalu cari kode <data:post.body/>
Masukan kode tombol share di bawah ini setelah kode <data:post.body/>

<div id='bookmarks'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

<a class='tweet' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@BBW)&quot;' rel='nofollow' title='Tweet This!'><img src='http://a1.twimg.com/a/1286563368/images/favicon.ico' style='vertical-align:middle;'/> Twitter</a>

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><img src='http://cdn1.diggstatic.com/img/favicon.a015f25c.ico' style='vertical-align:middle;'/> Digg this</a>

<a class='save' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://secure.delicious.com/favicon.ico' style='vertical-align:middle;'/> Del.icio.us</a>

<a class='stumble' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='http://cdn.stumble-upon.com/favicon.ico' style='vertical-align:middle;'/>Stumble It</a>
</div>

Jika sudah silahkan disimpan.

Untuk tombol share ini saya hanya menggunakan lima (5) Button share yang paling populer dan banyak digunakan diantaranya yaitu :
1. Button Share Facebook
2. Button Share Twitter
3. Button Share Digg It
4. Button Share Del.ici.us
5. Button share Stumble

Jika ingin menambahkan button share lainnya silahkan masukan di bagian kode button share diatas. Jangan lupa untuk share postingan ini dengan menekan tombol share button di bawah ok. Selamat mencoba.