Blink effect in html, Blinking effect, Blinking effect using J-Query, new effect without image, jquery effect of changing color

Blinking text animation is use to catch the user attraction for a particular thing or feature.
This effect is widely use for New link, services, and feature of websites. We can achieve this blink effect using CSS by using CSS attribute.

But this CSS attribute do not have support for all browsers. I have created a simple jquery script code to do the Blink effect in my companies website to achieve the same feature.

Now I want to share that Script code with my web friends.

JQuery Script Code

var i = 1;



function color() {



//alert(1);



if (i == 1) {



$('.txt').css("color", "red");



i += 1;



return;



}



if (i == 2) {



$('.txt').css("color", "black");



i += 1;



return;



}



if (i == 3) {



$('.txt').css("color", "blue");



i += 1;



return;



}



if (i == 4) {



$('.txt').css("color", "orange");



i = 1;



return;



}



}



setInterval(color, 400);

Put this script code before end of body tag.
give the class name "txt" to text for whom you want color animation.

you can increase the time of changing color animation by increase the value of 400 to your value in code.

setInterval(color, 400);

you can also change the color code according to your requirement.

Also put Jquery Library file.
JavaScript Library File

Rounded corner using CSS, Rounded corner DIV, Rounded Box, rounded corners in ie, rounded corner css with images, Simple Rounded corner CSS

Using rounded corners in design layout is most attractive feature of website. Every Site using rounded corner to make its design beautiful.

Basic designers use fixed width image to create the rounded corners.

Instead of using big images to make Rounded corners we can use CSS and tiny images for making round corners.

It helps to make low weight website. So it download fast on client server.

rounded corners using CSS 2.0

<div style="position: relative; padding: 7px 0px; width: 600px; margin: auto; background: #364957;">
        <img style="position: absolute; top: 0px; left: 0px; height: 11px;" src="../images/top_g.jpg" />
        <img style="position: absolute; top: 0px; right: 0px;" src="../images/top_g1.jpg" />
        <table width="100%;" cellspacing="0" cellpadding="0">
            <tbody>
                <tr style="color: White;">
                    <td style="text-align: center;">
                        hello
                        <br />
                        how are you
                    </td>
                </tr>
            </tbody>
        </table>
        <img style="position: absolute; bottom: 0px; left: 0px; height: 11px;" src="../images/top_gb.jpg" />
        <img style="position: absolute; bottom: 0px; right: 0px;" src="../images/top_gb1.jpg" />
    </div>

Rounded Corner using CSS 3.0

how arwe you dear


Its a test Rounded corners

but it uses CSS3

<style>
        .css3
        {
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-topright: 20px;
            -moz-border-radius-bottomright: 30px;
            -moz-border-radius-bottomleft: 0;
            background: #eee;
            padding: 10px;
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 20px;
            -webkit-border-bottom-right-radius: 30px;
            -webkit-border-bottom-left-radius: 0;
        }
    </style>
    <div class="css3">
        how arwe you dear
        <br />
        Its a test Rounded corners<br />
        but it uses CSS3
    </div> 

But this technique support only for latest browsers who has CSS3 compatibility.

You can also create Pure Rounded corner CSS online:
http://www.spiffycorners.com/index.php