CSS3 Gradients to reproduce an 'inner glow' effect from Illustrator with border-radius applied
- by iamfriendly
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!
