Tuesday, November 22, 2011

single frame shoutmix chat animation | CSS3

yesterday I’ve explained how to make a two frame chatbox animation | jQuery. and today, I’m going to explain how this can also be done to a single frame shoutmix chat, using CSS3.


I recommend you to place the form at the top. as it will expand in size downwards.

first, find the <iframe> tags. then add this [id="shout"] inside the opening iframe tag.

after that, add this code anywhere(preferably below the shoutmix code).

transition:height 1s;
-webkit-transition:height 1s;
-moz-transition:height 1s;

simple explainations:

the blue color text = MUST be a same word
#shout{} = the properties of id=shout at body load
#shout:hover{} = the properties of id=shout at mouse hover
height = specify the frame height, before and when a mouse hover event
transition:height 1s; = CSS3 code. 1s specify length of animation of 1 second

now it’s time for you to try it. Open-mouthed smile


the red underlined code is what you have to add

No comments:

Post a Comment