Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to create a "highlighting" effect in CSS3/Javascript?

How to create a "highlighting" effect in CSS3/Javascript?

Problem

I have a span of text, which when clicked gets highlighted by changing its background color. I would like to animate the highlighting, so that the background color changes progressively from left to right, as if someone was actually highlighting the text. Any thoughts on how that would be achievable with CSS3 and/or Javascript/jQuery?

Problem courtesy of: user2398029

Solution

If you're okay with some CSS3-only features, you can use transitions, gradients and background-size:

.highlightable {
    background-size: 0 100%;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.5s ease-out;
    -moz-transition: background-size 0.5s ease-out;
    -ms-transition: background-size 0.5s ease-out;
    -o-transition: background-size 0.5s ease-out;
    transition: background-size 0.5s ease-out;
}

.highlightable.highlight {
    background-image: -webkit-linear-gradient(yellow, yellow);
    background-image: -moz-linear-gradient(yellow, yellow);
    background-image: -ms-linear-gradient(yellow, yellow);
    background-image: -o-linear-gradient(yellow, yellow);
    background-image: linear-gradient(yellow, yellow);
    background-size: 100% 100%;
}​

Here's a demo.

Solution courtesy of: Ryan

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to create a "highlighting" effect in CSS3/Javascript?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×