gubhug reyot
Energy Saving Mode using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Copyright 2010 gubhugreyot.blogspot.com - All rights reserved

CSS nggolekisearchporm

Animated Box for HTML Code Posting Using CSS3

Animated Box for HTML Post - Using CSS3


Box Posting Kode HTML-1 dengan Animasi (Animated HTML Post Box-1)

<style type="text/css">
/* kode css untuk expand horizontal div / box */
.bgsGRnodetail, .bgsGRnodetail2 {
height: 220px; // width sebelum perubahan
width: 149px;
border: 6px solid transparent;
opacity: 0.6;
-o-transition: all 1s ease-in-out; // CSS3 transition - transformation CSS3 transition-transformation
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
margin: 10px;
padding: 3px;
overflow: hidden; // pentingnya overflow
border-radius: 6px;
-moz-border-radius: 6px; // rounded corners - border radius CSS3
-webkit-border-radius: 6px;
position: relative;
float: left;
}
.bgsGRnodetail {
box-shadow: 1px 1px 10px #fff;
-moz-box-shadow: 1px 1px 10px #fff;
-webkit-box-shadow: 1px 1px 10px #fff;
}
</style>

Box Posting Kode HTML-2 dengan Animasi (Animated HTML Post Box-2)

<style type="text/css">
/* kode css untuk expand horizontal div / box */
.bgsGRnodetail, .bgsGRnodetail2 {
height: 220px; // width sebelum perubahan
width: 149px;
border: 6px solid transparent;
opacity: 0.6;
-o-transition: all 1s ease-in-out; // CSS3 transition - transformation CSS3 transition-transformation
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
margin: 10px;
padding: 3px;
overflow: hidden; // pentingnya overflow
border-radius: 6px;
-moz-border-radius: 6px; // rounded corners - border radius CSS3
-webkit-border-radius: 6px;
position: relative;
float: left;
}
.bgsGRnodetail {
box-shadow: 1px 1px 10px #fff;
-moz-box-shadow: 1px 1px 10px #fff;
-webkit-box-shadow: 1px 1px 10px #fff;
}
</style>


Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Tutorial Animated Box for HTML Post Using CSS3

Simple Javascript "Select and Copy " untuk DIV

Select All and Copy untuk DIV

Javascript "Select all and Copy"

Javascript yang digunakan untuk copy and select DIV ini, akan sangat bermanfaat bagi siapapun yang tak biasa menggunakan textarea. Semua bisa kita isikan di dalam DIV special dengan pelengkap "Select and Copy" ini. Anda bisa menuliskan sembarang teks atau kode html, baik yang terwadahi tag DIV, p, h1 , h2 ..., b, em, span ataupun yang lain. Masukkan saja apa yang anda perlukan untuk bisa dengan mudah dicopy oleh pengunjung blog. Mau berita terbaru tentang gosip artis? Menu masakan, ... atau mungkin obat kutil, panu kurap dan kudis serta exim? He .... ... he ... silahkan ... silahkan ! Semua saya serahkan ke sampeyan semua! Silahkan coba dengan "KLIK" di button yang bisa mentul-mentul yang sudah saya sediakan!

pre class="doreng"

<style type="text/css">
/* kode css untuk expand horizontal div / box */
.bgsGRnodetail, .bgsGRnodetail2 {
height: 220px; // width sebelum perubahan
width: 149px;
border: 6px solid transparent;
opacity: 0.6;
-o-transition: all 1s ease-in-out; // CSS3 transition - transformation CSS3 transition-transformation
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
margin: 10px;
padding: 3px;
overflow: hidden; // pentingnya overflow
border-radius: 6px;
-moz-border-radius: 6px; // rounded corners - border radius CSS3
-webkit-border-radius: 6px;
position: relative;
float: left;
}
.bgsGRnodetail {
box-shadow: 1px 1px 10px #fff;
-moz-box-shadow: 1px 1px 10px #fff;
-webkit-box-shadow: 1px 1px 10px #fff;
}
</style>

Pre class="loreng"


<style type="text/css">
/* kode css untuk expand horizontal div / box */
.bgsGRnodetail, .bgsGRnodetail2 {
height: 220px; // width sebelum perubahan
width: 149px;
border: 6px solid transparent;
opacity: 0.6;
-o-transition: all 1s ease-in-out; // CSS3 transition - transformation CSS3 transition-transformation
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
margin: 10px;
padding: 3px;
overflow: hidden; // pentingnya overflow
border-radius: 6px;
-moz-border-radius: 6px; // rounded corners - border radius CSS3
-webkit-border-radius: 6px;
position: relative;
float: left;
}
.bgsGRnodetail {
box-shadow: 1px 1px 10px #fff;
-moz-box-shadow: 1px 1px 10px #fff;
-webkit-box-shadow: 1px 1px 10px #fff;
}
</style>

pre tanpa class

pre{ 
position: relative;
z-index: 50;
background:#fff url(http://gubhugreyot.blogspot.com/images/pre_bg.gif) top left repeat;
border:1px solid #999;
color:#000;
display:block;
font-family:"Courier New", Courier, monospace;
font-size:13px;
line-height:18px;
margin:10px 0 20px;
overflow:auto;
padding:18px 10px 17px;
overflow-x:scroll;
}

Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Tutorial: Simple Javascript "Select All and Copy - DIV

Show Descriptions on Hover Image - Image Enlarge using CSS3

Hover me!


Image Enlarge - Show Description on Hover Image. Font size change JavaScript code provides a uniform, readily available means of adjusting text size rather than expecting users to find the varying browser provided mechanisms for doing so.

Descriptions here!


Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image.

Descriptions here!


Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image.

Hover me!


Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image.

Descriptions here!


Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image.

Descriptions here!


Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image.

Hover me!


Image Enlarge - Show Description on Hover Image. Font size change JavaScript code provides a uniform, readily available means of adjusting text size rather than expecting users to find the varying browser provided mechanisms for doing so.

Hover me!


Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image. Image Enlarge - Show Description on Hover Image.

Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Tutorial Show Descriptions on Hover Image


Original tutorial by gubhug reyot

Super Animated CSS3 Navigation Menu

DEMO Super Animated CSS3 Menu Navigation







Navigation di atas hanya menggunakan kode CSS. Animasi pada menu tercipta dengan memanfaatkan CSS3 Transformasi dan Transisi dengan memanfaatkan efek opacity, scale, translate dan background image. Animasi Navigation menu ini akan terlihat sempurna apabila sampeyan membukanya di Opera atau Mozilla 4.0 beta. Kode CSS yang digunakan pun juga tidaklah seberapa. Sangat jauh lebih irit apabila dibandingkan penggunaan javascript manapun.


Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Tutorial Super Animated CSS3 Navigation Menu!

jQuery-CSS3 Animated Vertical Collapsible Menu: Colapsible Menu dg jQuery

DEMO Collapsible Menu






Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Tutorial jQuery-CSS3 Animated Collapsible Menu

Change Background Onmouseover with Efects Using CSS3

Contoh perubahan background yang disertai efek (Change blog backgrond onmouseover with effects using CSS3)


Box Tunggal (Box-1)


Ini adalah sebuah teknik sederhana untuk menciptakan perubahan pada background blog, yang terutama banyak dimanfaatkan untuk widget blog. Jika sebelumnya untuk menciptakan efek atraktif yang menyertai fungsi ini hanya dapat dilakukan dengan bantuan jQuery, motool dan javascript yang lain, kini berkat CSS3, beberapa efek fantastis bisa kita buat hanya dengan kode CSS. Perubahan background (background color dan background image) dapat dibarengi dengan menyertakan bentuk animasi pada efek transparansi, transisi warna dan mungkin jika diinginkan bisa kita sertakan juga perubahan pada border (border-color, border-width) ....

Box Ganda (Box-2)



Ini adalah sebuah teknik sederhana untuk menciptakan perubahan pada background blog, yang terutama banyak dimanfaatkan untuk widget blog. Jika sebelumnya untuk menciptakan efek atraktif yang menyertai fungsi ini hanya dapat dilakukan dengan bantuan jQuery, motool dan javascript yang lain, kini berkat CSS3, beberapa efek fantastis bisa kita buat hanya dengan kode CSS. Perubahan background (background color dan background image) dapat dibarengi dengan menyertakan bentuk animasi pada efek transparansi, transisi warna dan mungkin jika diinginkan bisa kita sertakan juga perubahan pada border (border-color, border-width), serta dapat juga dengan menambahkan perubahan di border-radius(efek rounded corners).

Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Tutorial Background Effects onmouseover using CSS3

Animated Tag Cloud Using jQuery dan CSS3

Dari sekian banyak macam tag cloud yang selama ini kita kenal, mungkin tag cloud animasi yang desain dasarnya menggunakan jquery belum begitu sering kita jumpai. Tag cloud animasi ini sebenarnya sangat menarik untuk kita manfaatkan sebagai pelengkap desain blog, yang sekaligus dapat kita gunakan untuk memperindah blog yang kita kelola. Sebagai wadah link, tag cloud ini juga sangat fleksibel dalam kapasitas muat, karena ukurannya bisa diperbesar sesuai ruang yang tersedia ataupun banyaknya link yang akan di tampilkan di dalamnya.

Guna menambah daya tarik dan animasinya, kita telah lengkapi pula dengan CSS3 transformasi, transition, border-radius, serta box shadow dengan harapan akan membuatnya lebih gaya. Mungkin sampeyan telah mengenal tag cloud Cumulus yang begitu tersohor karena indahnya animasi yang tercipta berkat javascript dan file swf yang digunakan. Cobalah bandingkan dengan yang ini, maka sampeyan boleh menyandingkanya sebagai desain yang cukup berimbang. Keduanya sama-sama mampu menampilkan animasi yang terasa begitu indah.

Sebenarnya "jQuery Tag Cloud Plugin" ini telah melalui beberapa modifikasi dari desain awalnya yang bisa sampeyan lihat di http://rohitsengar.cueblocks.net. Silahkan coba bandingkan dengan desain aslinya, kemudian sampeyan boleh memilih untuk menggunakan yang mana. Yah ..., masing-masing mempunyai kelebihan dan kekurangan tersendiri. O, ya ... Sampeyan bisa melihat tag Cloud ini yang terletak di sidebar kanan.


Animated Slide Menu (Box) using CSS3

Jangan hanya beranggapan bahwa sebuah desain menarik pasti menggunakan javascript. CSS3 Animated Slide Menu (Box) hanya menggunakan kode CSS, akan tetapi dapat memberikan suguhan menu atau box tersembunyi di sisi sebelah kiri blog dengan gaya yang sangat menarik. Sentuhkan cursor pada bagian berbentuk lingkaran yang bertuliskan M E N U. Image, teks atau berbagai link dapat disimpan di dalamnya. Jika ampeyan mau, beberapa kode CSS juga bisa dimodifikasi atau ditambahkan untuk memperoleh tampilan yang lebih menarik.

MENU



Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Tutorial CSS3 Animated Slide Menu

jQuery Transparent Floating Menu

Anda bisa melihat floating menu ini yang terletak di sidebar kanan. Dia akan selalu bergerak naik ataupun turun sesuai dengan pergerakkan naik turunnya halaman blog. Silahkan gunakan dan isi dengan berbagai hal yang mungkin dibutuhkan. Unutk memuat menu bisa, gambar juga bisa, atau mungkin bentuk teks yang akan di tampilkan di dalamnya?

Desain ini bekerja dengan perantaraan kode CSS dan script serta jQuery hingga diperoleh tampilan yang cukup menarik. Transparansi tercipta berkat opacity effect. Untuk menggunakannya di blogger template ataupun new blogger template, silahkan baca tutorialnya yang terdapat di http://gubhugreyot.blogspot.com. Atau mungkin sampeyan perlu cara yang lebih cepat dan praktis untuk membukanya?

Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Tutorial jQuery Transparent Floating Menu

Cara Membuat CSS3 Animated Image Enlarge

CSS3 Animated Image Enlarge-2 menggunakan kode CSS yang sedikit berbeda dibandingkan CSS3 Animated Image Enlarge-1 karena dalam desain ini melibatkan kode css ul, li difungsikan untuk membuat gambar/image agar tidak berubah posisi ketika proses perubahan ukuran pada salah satu gambar terjadi. Dengan cara seperti ini tentunya tatanan blog menjadi tidak terganggu sama sekali.

Perlu menjadi perhatian, bahwa karena desain hanya menggunakan CSS3 maka jangan pernah berharap hasil yang terlihat ketika dibuka di Internet Explorer (IE) akan memperlihatkan hasil sama seperti halnya di browser lain. Sesuatu yang sama sekali tak mungkin karena hingga saat ini IE belum mampu mewujudkan bentuk kompabilitas terhadap CSS3 seperti yang lain. Meskipun demikian jangan jadi kekecewaan berlebih karena tak lama lagi tentunya IE akan segera menyesuaikan diri. Percayalah, sobat, karena jika ini tak terjadi maka tak ubahnya liang lahat telah digali sendiri. Hal yang tak mungkin terjadi, bukan?!

Sentuhkan cursor pada setiap gambar, maka akan terlihat 4 (empat) bentuk animasi yang berbeda menyertai perubahan ukuran gambar. Jika sampeyan ingin merubah bentuk animasinya, silahkan rubah beberapa kode CSSnya.










Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Image Enlarger with Effects using CSS3

Image Enlarge with Effects using CSS3

Image Enlarge murni menggunakan CSS3. Fungsi sebenarnya hanyalah untuk memperbesar gambar saat cursor menyentuh satu titik di sisi manapun gambar, sedang animasi yang disertakan hanyalah sekedar untuk memberikan bentuk tampilan yang lebih dinamis hingga terlihat lebih luwes ketika digunakan sebagai pelengkap blog.










Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Image Enlarger with Effects using CSS3

CSS3 Full Animated Show Hidden Content Onmouseover

Mulai saat ini perkembangan penggunaan CSS3 sebagai pilar utama desain web atau blog akan semakin tak terelakkan atau bahkan mungkin akan semakin menggila menggerus peran besar javascript. Berbagai fungsi yang sebelumnya hanya mungkin dilakukan dengan peran javascript kini tak lagi jadi keharusan. CSS3 Full Animated Show Hidden Content Onmouseover menjadi salah satu bukti betapa banyak animasi berhasil diciptakan tanpa secuilpun bantuan gambar dan script. Sampeyan bisa menggunakan secara utuh atau jika mungkin dilakukan bisa juga beberapa kode dikurangi atau ditambah untuk memperoleh hasil akhir yang sesuai selera. Tidak akan terlalu sulit karena semua hanya berupa kode CSS. Silahkan coba show hidden content di bawah ini dengan cara mengarahkan cursor ke setiap bagian yang terdapat di dalam box, baik gambar ataupun teks serta teks link-nya.


CSS3 Show Hidden Content

CSS3 Show Hidden Content

Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!

Without Image and Script: New Post

Without Image and Script

Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!


Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:

Tutorial CSS3 Full Animated Show Hidden Content Onmouseover

CSS3 Animated Image Enlarger




Untuk membaca tutorialnya silahkan buka dengan KLIK link di bawah ini:


Memahami CSS3 Transition - Transformation

Di bawah ini adalah beberapa contoh bentuk animasi yang tercipta melalui css3 transition dan transformation. Beberapa bentuk transformasi dapat digabungkan membentuk fungsi baru yang merupakan paduan dari beberapa bentuk transformasi yang ada. Fungsi baru yang tercipta dapat dikembangkan untuk menciptakan berbagai animasi yang mampu melengkapi dan memperindah sekaligus membentuk sebuah fungsi lain secara luas, seperti halnya animated horizontal menu, vertical menu, drop down menu, multilevel drop down menu, horizontal dan vertical accordion, image slider serta banyak lagi yang lain.

CSS3 Drop Down Panel

CSS3 Drop Down Panel tak ubahnya seperti bentuk drop down panel yang lain, hanya yang membedakan adalah penggunaan kode CSS3 yang mampu membentuk drop down panel ini sekalipun hanya menggunakan kode css namun mampu meciptakan sebuah animasi gerak, baik ketika panel membuka atau menutup dengan memanfaatkan css3 transition. Sampeyan bisa melihat dan mencobanya dengan mengarahkan cursor ke bagian yang bertuliskan "Daftar Menu" seperti terlihat di bagian atas blog.

Karena belum seluruh browser yang kita gunakan telah mengakomodir semua fungsi css3 secara penuh, maka apabila ingin melihat drop down panel ini saat bekerja secara optimal, dimana semua kode css3 dapat berfungsi dengan sempurna, silahkan buka di Opera, Safari atau Google Chrome. Jika sampeyan membukanya melalui Mozzila Firefox, sekalipun fungsi bisa berjalan dengan baik, namun efek animasi gerak yang akan terlihat seperti layaknya apabila kita memanfaatkan javascript tidak akan terlihat.

Untuk membaca tutorialnya silahkan buka dengan mebuka link di bawah ini:

Tutorial CSS3 Drop Down Panel

Recent Posts Using jQuery-CSS3

 
GR | Edited by | gubhug reyot