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