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

Create Floating Image Link using CSS3

Floating Image Link can be placed in the bottom-right corner, lower-left corner, upper-right corner, upper-left corner or in any part of the blog page. Changes in position in the set with the code left, right, top or bottom.

To change the position of Floating Image Link, you can set with left, right, top or bottom code. If you add the value of left, right, top or bottom bigger and biggger, so the Floating Image Link will be move to the middle of page, opposite of the code (left, right, top or bottom).

You can use the image with .gif, .jpg or .png file extention. When using a flash file, so only DIV tag will be used. Put flash file between opening DIV tag and closing DIV tag.

In the lower-left corner you can see the floating image link created using CSS3 with image extensions ". Jpg"!

CSS Code


#pojok {
position:fixed;
left:2px;
bottom:2px;
}  
#pojok img {
height:167px;
width:20px; 
border:3px solid #888;
padding:1px;
background:#aaa;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}  
#pojok:hover img {
z-index:99;
background:#993300;
border-color:#FF0000;
-o-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
-moz-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
-webkit-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
}

xHTML


<div id="pojok">
<a href="http://gubhugreyot.blogspot.com/" target="_blank" title="You may learn about 500 of blogger tutorial, here!">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsG0W6c-biG0_kEmHmNKcwrxbOQaoj3KOoQNgWmu-FLzg7qT8GzL6RGqxWETvnmoklVX7cyhCYWulVTTL7d0seY-1KPMyaKNvvI09uXFI3WVtFJCxBFTsEVG3euR6bVs2tGXpFDSXJaNp/s200/gubhugreyot167.20.jpg" /></a>
</div>


Put CSS code above ]]></b:skin> and xHTML above </body>


Click the link below to open the tutorial!

Tutorial: Floating Image Link!

Original tutorial by gubhug reyot

Create Tooltip on Blogger Read More

Tooltip not only be mounted on posts or in the widget. In many other places we could use it. For example, in read more (blogger or blogspot). To create a tooltip in the read more, we need to add some CSS code, javascript or jQuery. All depend on the type tooltip that will be used.

The most important thing to make a design like this is to try to make changes to HTML code in the template. Not much to be revamped. Only in the HTML code associated with the read more. The code is :

Beautiful blockquote with animation built using CSS3 Transition-Transformation

Before today you might not ever interested in using the blockquote, but from now maybe you can change your mind after seeing the beautiful blockquote built using CSS3. A blockquote charming with animation that fits perfectly with your own blog.
Built with a simple way of utilizing rounded Corners (CSS3 border radius), CSS3 text-shadow, CSS3 transition, transformation and 3 pieces of CSS3 background-image. Take a look below! Is not this a very interesting blockquote?!
Sorry for all the blogger friend! I've tried to give tutorials to the fullest. Unfortunately, difficulty in speaking English actually make headaches. It was like being beaten with a hammer. Only the tutorials with messy language that I can give to you! Really! I can not speak English at all. Google Translate is my M-16 to make English-language tutorial. Heh .... heh ... heh .... Why I was born in Indonesia, eh? If I was born in England, I do not need to write. I'll talk to you, heh ... heh ... heh .... heh ... heh ... heh .... heh ... heh ... heh ....
Brazil will expect another commanding performance from Thiago Silva when they take on Ukraine at Derby's Pride Park in an international friendly on Monday.

The 26-year-old Milan defender was in fine form in last Thursday's 3-0 win over Iran - especially important as his centre-back partner David Luiz had a poor game, obliging Thiago Silva to show off his excellent sense of cover.

In the World Cup, Thiago Silva was a reserve to the old firm of Juan and Lucio. Just three months later, he is the rock on which Brazil's defence is based, highlighting the speed of the generational change taking place under new coach Mano Menezes.


Click the link below to open the tutorial!

Tutorial: Beautiful Blockquote Using CSS3

Original tutorial by gubhug reyot

DEMO: Search Form Using CSS3 Transition

Search form was built using CSS3 code in order to obtain the best performance and can make the blog more beautiful. Some codes used by CSS3 border-radius, drop-shadow (box-shadow), text-shadow, background-gradient and CSS3 Transition.
There are 2 options I have provided, it's up to you want to choose the first or second.



Search Form-1





Search Form-2







Click the link below to open the tutorial!

Tutorial: Search Form Using CSS3

Original tutorial by gubhug reyot

How to Create Beautiful Textarea using CSS3

Textarea Penuh Pesona





Textarea Biasa





Click the link below to open the tutorial!

Tutorial: Beautiful Textarea-Penuh Pesona

Original tutorial by gubhug reyot

Elastic Box using CSS3

Melihat gambar seperti di sebelah, saya harap sampeyan semua tidak perlu kaget, jijik atau marah. Gambar ini hanyalah sebuah gambaran betapa manusia dan anjing mempunyai kedekatan hubungan yang luar biasa. Bukan hanya bisa dekat secara fisik, namun pada dasarnya beberapa sifat anjing bersarang dalam jiwa manusia. Nggak percaya? Coba renungkan dalam hati untuk melihat apa yang selama ini telah sampeyan atau tetangga, para pemimpin negeri dan banyak lagi orang lakukan dalam hidup. Mencuri adalah salah satunya! Bagi yang masih sekolah pasti pernah curi-curi hasil kerjaan temannya, yang sudah perjaka pasti pernah suka curi-curi hati lawan jenisnya dan yang kerja jadi pegawai pasti pernah curi waktu atau bahkan curi uang rakyat! He .... he ... itu baru salah satu sifat anjing. Masih ada lagi beberapa sifat jelek anjing, selain sifat baiknya yang dimiliki banyak manusia dan tak perlu di bahas satu persatu.

Ada yang lebih penting dari pada hal tersebut di atas. Dimasa ke depan haruslah sifat-sifat yang seperti milik si anjing itu harus kita buang. Kita harus jauh lebih baik dari anjing (anjing kadang lebih baik dari manusia, lho! Dia nggak pernah mengumpat sesama anjing dengan kata kasar "manusia, loe!", tapi manusia sering melakukannya dengan teriakan keras, "anjing, loe!", dibarengi dengan air liur yang mengalir nerocos disela-sela gigi ompongnya!).

Ada lagi yang lebih baik untuk kita lakukan sambil berupaya menghilangkan sifat-sifat buruk yang seperti binatang. Marilah bersama-sama kita nyanyikan "lagu bang Rhoma" yang syairnya seperti ini "Ada Sunda , .... Ada Jawa .....dan masih banyak lagi yang lainnya , ha .... ha ... ha .... ha ....
Sebelum saya menuliskan apa yang menjadi pemikiran saya ini, aku harap rekan rekan tidak langsung menanggapinya dengan emosional. Sebenarnya antara manusia dan hewan diciptakan dalam keadaan dan bentuk yang sama sekali berbeda. Bahkan kalau kita pernah belajar tentang sejarah penciptaan manusia (moga-moga jangan nggak pernah), sangat jelas sekali perbedaan proses penciptaan antara keduanya. Disebutkan dengan jelas bahwa manusia diciptakan sebagai satu-satunya makhuk ciptaan Tuhan yang paling sempurna, yang dibuat tidak hanya dengan kata-kata Tuhan tetapi harus melalui proses yang rumit. Sangat berbeda jauh jika dibandingkan dengan penciptaan hewan atau bahkanalam semesta yang luar biasa dahyatnya ini.

Sesungguhnya,harusnya manusia memang harus berbeda jauh dengan binatang, karena manusia diciptakan dengan keunggulan yang jauh dfari binatang. Kita sebagai manusia dikaruniai dengan akal budi yang hebat, yang membuat manusia mampu melakukan hal-hal yang luar biasa. Sangat jauh jika dibandingkan dengan hewa. Hewan yang paling pintar sekalipun! Tetapi sayangnya, kelebihan itu tidak bisa dimanfaatkan manusia dengan sebaik-baiknya. Yang lebih menyedihkan, manusia, baik dimasa sebelum kita lahir hingga deti ini cenderung meniru sifat-sifat binatang. Tidak hanya seperti kancil yang dikatakan suka menipu, manusia juga seperti kucing yang suka mencuri. Ada yang lebih dari itu. Manusia banyak yang doyan membunuh sesamanya. Salahkah kalau dikatakan tak ada bedanya manusia dan binatang. Banyak sekali contoh yang ada dalam kehidupan di sekitar kita. Dari yang sederhana ngomongin tetangga sampai tega-tegannya membunuh tetangga atau teman hidupnya hanya karena masalah yang sederhana. dst .....

DEMO: Creating animation with CSS3 Transition on Blogger Profile Image

Click here and then open the "About Me" and move the cursor on it.



Click the link below to open the tutorial!

Tutorial: Creating animation on Blogger Profile

Original tutorial by gubhug reyot

Making a Background Image with Transparency Effects and Animation on Blogger Profiles with CSS3

To modify the appearance of the profile bloggers like "the title above" must be conducted by the page "edit HTML". Some of the css code in the template must be changed so that a background-image can be displayed. CSS code in the form of syntax .profile {margin: 3px 0 15px 0; .... etc ; } and other syntax related to the syntax .p {...) should be deleted and replaced with the new CSS code. Below is a sample of CSS code that must be removed and replaced with new CSS code
.profile-datablock {
margin-top: 3px;
....
....
}
.profile-textblock {
....
}
.profile-img {
...
}

Delete all the CSS code that looks like the above and other syntax that uses the code ".profile { .....}"
Copy-paste CSS code below to replace the CSS code above.

#Profile1 .widget-content {
position: relative;
margin: 20px auto;
width: 200px;
height: 245px;
padding: 5px;
background: #666666;
background: -moz-linear-gradient(top, #111, #eee);
background: -webkit-gradient(linear, left top, right bottom, from(#111), to(#eee));
text-align: center;
border: 2px solid #888;
text-shadow: 1px 1px 1px #000;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
#Profile1 .widget-content img.profile-img {
display: block;
float: none;
margin: 10px auto;
opacity: 1.0;
-o-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-webkit-transition: 2s ease-out;
}
#Profile1 .widget-content span {
position: absolute;
top: 15px;
left: 0px;
width: 210px;
height: 265px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDk5Ku1Wp0Bv_raItOgIK1tN3AmihPzasb5YIj0mG39IrJMi6p867sBQNssc4DChOhBK_BMq-3wLh3bh7Ss-zTdKWf9TM6kivdRhsbmGWqjBdtQOOMcKJFatwnZxL2IYOpbZjcZP3I7PY/s400/Pemandangan-3.jpg) center center no-repeat;
opacity: 0.4;
-o-transition: all 0.7s ease-in 1s;
-moz-transition: all 0.7s ease-in 1s;
-webkit-transition: all 0.7s ease-in 1s;
}
#Profile1 .widget-content:hover span {
opacity: 1.0;
height: 1px;
border-bottom: 6px solid #888;
-o-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
-moz-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
-webkit-transition: height 2s ease-out 1.4s, opacity 1s ease-in;
}
#Profile1 .widget-content dl.profile-datablock {clear: both; margin: 10px auto;font-size: 11px;font-family: Arial;color: white;}
#Profile1 .widget-content dt.profile-data {font: 16px Tahoma; font-weight: bold;color: orange; text-transform:capitalize;}
#Profile1 .widget-content a.profile-link {color: #99CCFF; font-size: 14px;}
#Profile1 .widget-content a.profile-link:hover {color: red;}

D E M O


Move your cursor on "si gubhug reyot" in the right sidebar.

How to save the CSS code :

  1. Login to Blogger
  2. Dasboard : Click "Design".
  3. Design : Click "Edit HTML".
  4. Edit HTML : Find css code like the sample above and replace with new CSS code!.
  5. SAVE Templates
  6. Open your blog and see the results.

Click the link below to open the tutorial!

Tutorial: How to Change Blogger Profiles

Original tutorial by gubhug reyot

How to add animation to the blogger "READ MORE" using CSS3 Transition-Transformation

This is a simple way to make blogger (blogspot) "read more" become more attractive. We will only use the CSS code to create some animation on "read more" by using CSS3-Transisition-Transformation. Makes it very easy because you only save the CSS code above the code ]]> and then "click"-SAVE-Template.

CSS Code

DEMO CSS3: Text Resizer Using CSS3 Transition

Text Resizer: Click here!
This is a very simple text resizer. Built from the CSS code and short scripts. CSS3 also used with function to create an animated effect during the process of changing the size of the text. Text Resizer will convert the text in the scale of 90%, 100%, 105% and 110%. You can change this scale in different sizes by changing the scale values contained in the CSS code. The code looks like this:


font-size: ....%;


To read the tutorial and get the CSS code, javascript and XHTML Text Resizer, please click the link below:

Click the link below to open the tutorial!

Tutorial: CSS3 Text Resizer


Original tutorial by gubhug reyot

How to Make Image Post on Center of Position (Buat Gambar di Tengah-Center)

The simplest way to make center position of the image


Use the following HTML code on the page post and widgets:
<img style="display: block; margin: 0 auto; text-align: center; width: 200px; height: 300px;" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" />


Adjust the position and size of the image with CSS:


The second way will make the code more compact html. We can add some CSS code to make the image look more beautiful. CSS code that can be added such as border, border-radius, padding, drop-shadow (shadow box), background, hover and some CSS3 code to give the animation. CSS3 code that can be exploited mainly in the form of CSS3 transition-transformation.

Example-1 : img class="centerimg-1"
margin: 0 auto;

<style type="text/css">.centerimg-1 {
display: block;
margin: 0 auto;
text-align: center;
}
</style>
<img class="centerimg-1" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image above or below it.
note the picture below.



The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)


Example-2 : img class="centerimg-2"
margin: 10px auto;

<style type="text/css">.centerimg-2 {
display: block;
margin: 10px auto;
text-align: center;
}
</style>
<img class="centerimg-2" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>


In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.



The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)


Example-3 : img class="centerimg-3"
margin: 60px auto;

<style type="text/css">.centerimg-3 {
display: block;
margin: 60px auto;
text-align: center;
}
</style>
<img class="centerimg-3" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.



The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)


Example-4 : img class="centerimg-4"
margin: 1.5em auto;

<style type="text/css">.centerimg-4 {
display: block;
margin: 1.5em auto;
text-align: center;
}
</style>
<img class="centerimg-4" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>


In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image above or below it.
note the picture below.



The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)


Example-5 : img class="centerimg-5"
margin: 2em auto;

<style type="text/css">.centerimg-5 {
display: block;
margin: 2em auto;
text-align: center;
padding: 2px;
border: 5px solid #bbb;
}
</style>
<img class="centerimg-5" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>


In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.



The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)


Example-6 : img class="centerimg-6"
margin: 15px auto;

<style type="text/css">.centerimg-6 {
display: block;
margin: 15px auto;
text-align: center;
padding: 4px;
background: #990000;
border: 4px solid #9999CC;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<img class="centerimg-6" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>


In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.



The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)


Example-7 : img class="centerimg-7"
margin: 20px auto;

<style type="text/css">.centerimg-7 {
display: block;
margin: 20px auto;
text-align: center;
padding: 4px;
border: 4px solid #003399;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: -1px -1px 2px #0099FF, 1px 1px 2px #0099FF, 0 0 20px #993300;
-moz-box-shadow: -1px -1px 2px #0099FF, 1px 1px 2px #0099FF, 0 0 20px #993300;
-webkit-box-shadow: -1px -1px 2px #0099FF, 1px 1px 2px #0099FF, 0 0 20px #993300;
}
</style>
<img class="centerimg-7" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>


In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.



The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)


Example-8 : img class="centerimg-8"
margin: 25px auto;

<style type="text/css">.centerimg-8 {
display: block;
margin: 25px auto;
text-align: center;
padding: 4px;
background: #990000;
border: 2px solid;
border-color: #0099FF #CCCC33 #CCCC33 #0099ff;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
</style>
<img class="centerimg-8" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>


In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.



The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)


Example-9 : img class="centerimg-9"
margin: 30px auto;

<style type="text/css">.centerimg-9 {
display: block;
margin: 30px auto;
text-align: center;
width: 300px;
height: 300px;
}
</style>
<img class="centerimg-9" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" />


In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image above or below it.
note the picture below.



The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

N o t e :


When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.


Example


<div style="float: left; font-size: 14px; color: green; border: 2px solid red; padding: 10px; margin: 0 10px 10px 0;">
When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.

<img src="http://img.theomegaproject.org/thumbs/2010/07/329.jpg" width="400" height="300" />

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.
</div>

<div style="clear:both;"></div>
<img class="centerimg-7" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>



This box using "float-left"

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.




Click the link below to open the tutorial!

Tutorial Image on Center of Position


Original tutorial by gubhug reyot

DEMO - How to Use CSS3 Transition Delay, Transition Property, Transition Duration and Transition Timing Function

Lately, using CSS3 Transition and Transformation, which is supported by some browsers becomes a very attractive new options for bloggers. Many animation can be created only by using CSS code. To make it very simple and is easier when compared with the javascript. Unfortunately, until now there is no standard for writing code (CSS3 transition and transformation). Of course, to create an HTML design became more complicated because some codes with similar functions should be written differently.
Some differences in the writing of the code happens in Opera. In this browser at the border and border transition radius is not perfect like in Mozilla, Safari and Google Chrome. Transision not work when you write the code like below:


-o-transition: border / border-radius (transition-duration) (transition-timing-function) (transition-delay);, such as the following example:
-o-transition: 2s ease border-in-out 500ms;
-o-transition: border-radius 1.2s 1s linear;

Transition border and border-radius only works when the code is written like this:

-o-transition: all-in ease 2s 1s;

Below are some examples of animation created with CSS3 transision and transformation. Especially in Opera, border and border radius (transition-property: border ... etc, and transition-property: border-radius .... etc) should be removed so he could work as expected.
Click the link below to open the tutorial!

Tutorial CSS3 Transition
Original tutorial by gubhug reyot

Example-1a and Example-1b has the same functionality but use different models of writing code.



CSS3 will create a change in size (animated) width, height and background color when the mouse over the box.

transition-propery: width, height, background;

Example-1a


gubhug reyot

Place mouse over here!


Example-1b


gubhug reyot

Place mouse over here!



CSS Code (Example-1a)


<style type="text/css">
.timingfunctiontransformdelay-1a {
margin: 20px auto;
width: 300px;
height: 110px;
background: red;
-o-transition-property: width, height, background-color;
-o-transition-duration: 0.3s, 1.1s, 1s;
-o-transition-timing-function: ease-out, ease-in-out, linear;
-o-transition-delay: 300ms, 900ms, 2500ms;
-moz-transition-property: width, height, background;
-moz-transition-duration: 0.3s, 1.1s, 1s;
-moz-transition-timing-function: ease-out, ease-in-out, linear;
-moz-transition-delay: 300ms, 900ms, 2500ms;
-webkit-transition-property: width, height, background-color;
-webkit-transition-duration: 0.3s, 1.1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in-out, linear;
-webkit-transition-delay: 300ms, 900ms, 2500ms;
}
.timingfunctiontransformdelay-1a:hover {
width: 400px;
height: 300px;
background: #009900;
}
</style>

xHTML (Example-1a)

<div class="timingfunctiontransformdelay-1a"><p style="text-align:center;color: white; padding: 10px; font-size: 22px;">gubhug reyot<br /><br />Place mouse over here!</p>
</div>


CSS Code (Example-1b)


<style type="text/css">
.timingfunctiontransformdelay-1b {
margin: 20px auto;
width: 300px;
height: 110px;
background: red;
-o-transition: width 0.3s ease-out 0.3s, height 1.1s ease-in-out 0.9s, background-color 1s linear 2.5s;
-moz-transition: width 0.3s ease-out 0.3s, height 1.1s ease-in-out 0.9s, background 1s linear 2.5s;
-webkit-transition: width 0.3s ease-out 0.3s, height 1.1s ease-in-out 0.9s, background 1s linear 2.5s;
}
.timingfunctiontransformdelay-1b:hover {
width: 400px;
height: 300px;
background: #009900;
}
</style>

xHTML (Example-1b)

<div class="timingfunctiontransformdelay-1b"><p style="text-align:center;color: white; padding: 10px; font-size: 22px;">gubhug reyot<br /><br />Place mouse over here!</p>
</div>


Example-2


CSS3 will create a change in size (animated) width, height, background-color and opacity when the mouse over the box.

transition-propery: width, height, background, opacity;

gubhug reyot
Place mouse over here!



CSS Code (Example-2)


<style type="text/css">
.timingfunctiontransformdelay-2 {
margin: 20px auto;
width: 300px;
height: 110px;
opacity: 0.4;
background: #FF00FF;
border: 2px solid blue;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-transition: width 1s ease-out 0.6s, height 1s ease-in-out 1.8s, background-color 1s linear 2s, opacity 2s ease-in-out 4s;
-moz-transition: width 1s ease-out 0.6s, height 1s ease-in-out 1.8s, background 1s linear 2s, opacity 2s ease-in-out 4s;
-webkit-transition: width 1s ease-out 0.6s, height 1s ease-in-out 1.8s, background 1s linear 2s, opacity 2s ease-in-out 4s;
}
.timingfunctiontransformdelay-2:hover {
width: 400px;
height: 300px;
background: #009900;
opacity: 1.0;
background: #FF6600;
-o-transition: background-color 1s linear 0.4s, height 0.3s ease 1.8s, width 2s ease-out 3s, opacity 2s ease-in 5s;
-moz-transition: background-color 1s linear 0.4s, height 0.3s ease 1.8s, width 2s ease-out 3s, opacity 2s ease-in 5s;
-webkit-transition: background-color 1s linear 0.4s, height 0.3s 1.8s, width 2s ease-out 3s, opacity 2s ease-in 5s;
}
</style>

xHTML (Example-2)

<div class="timingfunctiontransformdelay-2"><p style="text-align:center;color: white; padding: 10px; font-size: 22px;">gubhug reyot<br />Place mouse over here!</p>
</div>


Example-3a and Example-3b has the same functionality but use different models of writing code.


This example uses multiple transition.

transition-property: width, height, opacity, background-color, border, border-radius and transform;

Example-3a


gubhug reyot

Place mouse over here!

CSS Code (Example-3a)


<style type="text/css">
.transitiontransformdelay-1 {
width: 100px;
height: 100px;
opacity: 0.5;
box-shadow: 1px 1px 15px #000;
-moz-box-shadow: 1px 1px 15px #000;
-webkit-box-shadow: 1px 1px 15px #000;
border: 2px solid black;
background: red;
margin: 100px auto;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
font: 14px Serif;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
text-align: center;
color: white;
-o-transition-property: opacity, width, height, -o-transform, background-color;
-o-transition-duration: 2s, 1.5s, 3s, 2s, 2s;
-o-transition-delay: 0.5s, 1s, 2s, 3s, 5s;
-moz-transition-property: -moz-border-radius, border, opacity, width, height, -moz-transform, background;
-moz-transition-duration: 2s, 1s, 2s, 1.5s, 3s, 2s, 2s;
-moz-transition-delay: 300ms, 1s, 0.5s, 2s, 3s, 5s, 6s;
-webkit-transition-property: -webkit-border-radius, border, opacity, width, height, -webkit-transform, background;
-webkit-transition-duration: 2s, 1s, 2s, 1.5s, 3s, 2s, 2s;
-webkit-transition-delay: 300ms, 1s, 0.5s, 2s, 3s, 5s, 6s;
}
.transitiontransformdelay-1 p {
opacity: 0;
font: 8px Times;
color: orange;
text-shadow: -2px -2px 2px #000, 2px 2px 2px #000, 4px 4px 7px #eee;
-o-transition: 1s ease-in 0.3s;
-moz-transition: 2s ease-in 1s;
-webkit-transition: 2s ease-in 1s;
text-align: center;
}
.transitiontransformdelay-1:hover {
width: 300px;
height: 200px;
border: 20px solid green;
background: blue;
opacity: 1.0;
border-radius: 60px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
-o-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
-moz-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
-webkit-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
}
.transitiontransformdelay-1:hover p {
opacity: 1.0;
font-size: 50px;
font-weight: bold;
color: yellow;
-o-transition: all 2s ease-in 5s;
-moz-transition: all 2s ease-in 7s;
-webkit-transition: all 2s ease-in 7s;
}
</style>

xHTML (Example-3a)

<div class="transitiontransformdelay-1"><p>gubhug reyot</p>Place mouse over here!</div>


Example-3b


gubhug reyot

Place mouse over here!

CSS Code (Example-3b)


<style type="text/css">
.transitiontransformdelay-2 {
width: 100px;
height: 100px;
opacity: 0.5;
box-shadow: 1px 1px 15px #000;
-moz-box-shadow: 1px 1px 15px #000;
-webkit-box-shadow: 1px 1px 15px #000;
border: 2px solid black;
background: red;
margin: 100px auto;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
font: 14px Serif;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
text-align: center;
color: white;
-o-transition: opacity 2s 0.5s, width 1.5s 1s, height 3s 2s, -o-transform 2s 3s, background-color 2s 5s;
-moz-transition: -moz-border-radius 2s 0.3s, border 1s 1s, opacity 2s 0.5s, width 1.5s 2s, height 3s 3s, -moz-transform 2s 5s, background 2s 6s;
-webkit-transition: -webkit-border-radius 2s 0.3s, border 1s 1s, opacity 2s 0.5s, width 1.5s 2s, height 3s 3s, -webkit-transform 2s 5s, background 2s 6s;
}
.transitiontransformdelay-2 p {
opacity: 0;
font: 8px Times;
color: orange;
text-shadow: -2px -2px 2px #000, 2px 2px 2px #000, 4px 4px 7px #eee;
-o-transition: 1s ease-in 0.3s;
-moz-transition: 2s ease-in 1s;
-webkit-transition: 2s ease-in 1s;
text-align: center;
}
.transitiontransformdelay-2:hover {
width: 300px;
height: 200px;
border: 20px solid green;
background: blue;
opacity: 1.0;
border-radius: 60px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
-o-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
-moz-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
-webkit-transform: translate(50px, 60px) rotate(730deg) scale(1.2);
}
.transitiontransformdelay-2:hover p {
opacity: 1.0;
font-size: 50px;
font-weight: bold;
color: yellow;
-o-transition: all 2s ease-in 5s;
-moz-transition: all 2s ease-in 7s;
-webkit-transition: all 2s ease-in 7s;
}
</style>

xHTML (Example-3b)

<div class="transitiontransformdelay-2"><p>gubhug reyot</p>Place mouse over here!</div>


Example-4


gubhug reyot

Place mouse over here!


CSS Code (Example-4)


<style type="text/css">
.wadahe {
height: 298px;
width: 445px;
border: 2px solid #555;
margin: 20px auto;
}
.wadahe .transitiontransformdelay-3 {
width: 100px;
height: 150px;
background: #000;
opacity: 0.6;
margin: 100px auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-transform: scale(1) rotate(-20deg) translate(0px, 0px);
-moz-transform: scale(1) rotate(-20deg) translate(0px, 0px);
-webkit-transform: scale(1) rotate(-20deg) translate(0px, 0px);
-o-transition: background-color 2s ease 4s, opacity 2s ease-in 1s, -o-transform 3s ease-out 1.5s, color 2s linear 5s;
-moz-transition: background 2s ease 4s, opacity 3s ease-in 2s, -moz-transform 3s ease-out 1.5s, color 2s linear 6s;
-webkit-transition: background 2s ease 4s, opacity 3s ease-in 2s, -webkit-transform 3s ease-out 1.5s, color 2s linear 6s;
font: 14px Times New Roman;
font-weight: bold;
color: green;
text-shadow: 3px 3px 7px #999;
text-align: center;
}
.transitiontransformdelay-3 p{
opacity: 0;
font: 8px Times;
color: orange;
text-shadow: -2px -2px 2px #000, 2px 2px 2px #000, 4px 4px 7px #eee;
-o-transition: 1s ease-in 0.3s;
-moz-transition: 2s ease-in 1s;
-webkit-transition: 2s ease-in 1s;
text-align: center;
}
.wadahe:hover .transitiontransformdelay-3 {
background: blue;
opacity: 1.0;
-o-transform: scale(4.5, 2) rotate(1440deg) translate(0px, -13px);
-moz-transform: scale(4.5, 2) rotate(1440deg) translate(0px, -13px);
-webkit-transform: scale(4.5, 2) rotate(1440deg) translate(0px, -13px);
color: #CCFF00;
}
.wadahe .transitiontransformdelay-3 p img {
height: 10px;
width: 10px;
}
.wadahe:hover .transitiontransformdelay-3 p img {
height: 90px;
width: 30px;
}
.transitiontransformdelay-3:hover p {
opacity: 1.0;
font-weight: bold;
color: yellow;
-o-transition: all 2s ease-in 5s;
-moz-transition: all 2s ease-in 5s;
-webkit-transition: all 2s ease-in 5s;
}
</style>

xHTML (Example-4)

<div class="wadahe">
<div class="transitiontransformdelay-3"><p>gubhug reyot<br /><img style="display:block;text-align:center;margin:0 auto;" src="http://img.theomegaproject.org/thumbs/2010/07/281.jpg" /></p>Place mouse over here!</div>
</div>


Click the link below to open the tutorial!

Tutorial CSS3 Transition


Original tutorial by gubhug reyot

Drop-in Content Box/DIV using CSS3 Transition-Transformation

Drop-in Content Box / DIV will be visible when the page opens and the cursor is on that page. This design uses only CSS code (especially CSS3 of transition and transformation) so that the burden of the blog will not be affected. DIV (box) can be used to display a variety of things such as text, images, links and menus.

Ouw ... ... yeah, just a little javascript enabled to eliminate the box from the blog page. This script is very simple and its form as shown below:


onclick = "if (this.className =='.....') { this.className ='.....' } else { this.className ='.....' }"



Click the link below to open the tutorial!

Tutorial CSS3 Drop-in Content Box/DIV


Original tutorial by gubhug reyot

Drop-in Content DIV-Box- DEMO

This blog - bgsGR Tutorial - (http://bgsgr.blogspot.com) contains a demo of some of the designs created through the HTML code, which consists of the CSS code, CSS3, Javascript and xHTML. We tried to dedicate this HTML designs, hope it's improve the spirit of blogger friends to continue working and provide the best offerings for the reader.

Happy blogging and create a new useful things.

Regards ...


gubhug reyot
(http://gubhugreyot.blogspot.com)

gubhug reyot

Click to Close!

Dimitar Berbatov's rejuvenation continued as his brilliant hat-trick gave Manchester United a fully deserved win against Liverpool at Old Trafford.

The Bulgarian striker scored either side of the interval - the second a stunning overhead kick - to put Sir Alex Ferguson's side in complete control against a subdued Liverpool.

Tanty Template Modificaton

Dimitar Berbatov's rejuvenation continued as his brilliant hat-trick gave Manchester United a fully deserved win against Liverpool at Old Trafford.
The Bulgarian striker scored either side of the interval - the second a stunning overhead kick - to put Sir Alex Ferguson's side in complete control against a subdued Liverpool.

DEMO rgba Collapsible using CSS3 Transition-Transformation

Menu Title

Expand - collapseClick here!


Chelsea brushed aside Blackpool to extend their lead at the top of the Premier League to four points.

Salomon Kalou tapped home from a corner in the second minute before Florent Malouda struck from short range.

Didier Drogba's deflected strike made it 3-0 before Malouda scored his second with a low shot just before the break.

Petr Cech denied Alex Baptiste and in a much better second-half display the keeper saved a Gary Taylor-Fletcher shot with DJ Campbell also going close.

After the break Blackpool had an even share of the opportunities, but the game was already beyond the visitors by then.

Description: This CSS3 collapses any DIV on the page and lets users manually toggle its appearance via a smooth animation. It's a popular effect on many social networking.

Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.

Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.

Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.

Individually toggle various attributes of each collapsible content, whether a fade effect should be applied, the duration of the animation, an explicit height, plus whether the content should be hidden via scripting by default when the page loads.





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

Tutorial rgba Collapsible using CSS3


Original tutorial by gubhug reyot

DEMO Membuat Gambar-Image Berderet Horizontal

Di bawah ini adalah DEMO penataan gambar-image membentuk deret gambar horizontal. Untuk mendapatkan penataan gambar seperti ini kita hanya menggunakan satu bentuk float (float-left), height untuk setiap gambar bernilai sama (100px) dengan sebagian besar gambar memanfaatkan kode width: auto; --> Hanya sebagian kecil menggunakan width dengan ukuran yang ditentukan (terutama gambar diujung kanan). Perlakuan khusus ini dilakukan agar penataan menjadi rapi dengan seluruh bagian mempunyai sisa ruang (margin) yang sama (pada box gallery).

Penggunaan float-right sebenarnya dapat juga dilakukan, akan tetapi kode menjadi lebih kompleks. Melalui penggunaan kode ini diharapkan nantinya bisa sebagai bahan untuk mencoba memahami perubahan-perubahan lain, baik pada width, height, background, margin, float, border-radius serta penggunaan CSS3 untuk membuat berbagai animasi melalui CSS3 animation atau CSS3 transition dan transformation. Perlu dipahami bahwa tutorial penataan gambar ini adalah dasar untuk menciptakan berbagai penataan gambar yang lain!




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

Cara Membuat dan Menata Gambar-Image Berderet Horizontal


Original tutorial by gubhug reyot

DEMO Image Enlarger with Animation for Image Post Using CSS3

September-2010

Without script!

Sentuhkan cursor pada gambar disamping! Dengan menggunakan posting gambar seperti disamping, maka kita tidak perlu menampilkan gambar dalam ukuran bear yang terlalu banyak menyita halaman posting. Cukup tampilkan dalam bentuk seperti ini, maka gambar bisa dilihat dalam ukuran besar hanya dengan membawa cursor di atas gambar.

Menampilkan posting yang disertai gambar dalam bentuk seperti ini tentunya akan membuat blog bertambah menarik. Jangan kuwatir tentang penggunaan kode. menambah fungsi seperti ini sangat mudah karena hanya perlu menggunakan beberapa kode CSS sebagai pembangun fungsi, serta beberapa kode HTML untuk posting. Sangat simple dan mudah dilakukan siapapun, bahkan pemula sekalipun.

This design only uses CSS3

Bagaimana tentang ukuran gambar yang digunakan? Hooo .... Ini sangat praktis karena seberapapun besar gambar yang digunakan, maka gambar akan ditampilkan dalam ukuran lebar 400px (width), sedang tinggi (height) akan menyesuaikan dengan gambar (image) aslinya.


Mungkinkah ukuran gambar diperbesar atau diperkecil?

Anda dapat melakukannya dengan merubah kode CSS yang berkaitan dengan width untuk disesuaikan dengan lebar halaman posting. Ukuran 400px disini hanya dilakukan dengan pertimbangan banyak blogger yang menggunakan halaman posting dengan ukuran berkisar 400px. Bila anda menggunakan halaman yang lebih besar, silahkan untuk sedikit melakukan perubahan width pada syntax di kode CSSnya.



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

Tutorial Image Enlarger with Animation for Image Post Using CSS3

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

Recent Posts Using jQuery-CSS3

 
GR | Edited by | gubhug reyot