CSS3 Gradients to reproduce an 'inner glow' effect from Illustrator with border-radius applied

Posted by iamfriendly on Stack Overflow See other posts from Stack Overflow or by iamfriendly
Published on 2010-04-03T21:19:11Z Indexed on 2010/04/03 21:23 UTC
Read the original article Hit count: 888

Filed under:
|
|
|

Hello all! First post on here so please be kind :)

I am in the process of trying to get my head properly around CSS3 Gradients (specifically radial ones) and in doing so I think I've set myself a relatively tough challenge.

In Adobe Illustrator I have created a 'button' style which can be seen here:

http://bit.ly/aePPtV (jpg image).

To create this image I created a rectangle with a background colour of rgb(63,64,63) or #3F403F, then 'stylized' it to have a 15px border radius.

I then applied an 'inner glow' to it with a 25% opacity, 8px blur, white from the center. Finally, I applied a 3pt white stroke on it. (I'm telling you all of this in case you wished to reproduce it, if the image above isn't sufficient.)

So, my question is thus:

is it possible to recreate this 'button' using CSS without the need for an image?

I am aware of the 'limitations' of Internet Explorer (and for the sake of this experiment, I couldn't give a monkeys). I am also aware of the small 'bug' in webkit which incorrectly renders an element with a background colour, border-radius and a border (with a different color to the background-color) - it lets the background color bleed through on the curved corners.

My best attempt so far is fairly pathetic, but for reference here is the code:

section#featured footer p a
{
    color: rgb(255,255,255);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 3px solid rgb(255,255,255);
    background: rgb(98,99,100);

    background: -moz-radial-gradient(
        50% 50%, 
        farthest-side, 
        #626364, 
        #545454
    );
    background: -webkit-gradient(
        radial, 
        50% 50%,
        1px,
        50% 50%,
        5px,
        from(rgb(98,99,100)),
        to(rgb(84,84,84))
    );
}

Basically, terrible. Any hints or tips gratefully accepted and thank you very much in advance for them!

© Stack Overflow or respective owner

Related posts about css

Related posts about css3