CODEWITHSUNDEEP
cssgradient
Shpigford
Shpigford

Reputation: 25368

Radial CSS gradient with width constraints?

Here is the button gradient I'm trying to build with just CSS gradients:

alt text

This would typically be pretty easy to do, but as you can see, the gradient at the top looks more like a large clipped radial gradient since it dips down in the middle a bit and doesn't extend all the way to the edges.

So, any ideas how to pull this off with CSS?

Upvotes: 4

Views: 3433

Answers (4)

methodofaction
methodofaction

Reputation: 72415

In css the radial background center cannot lie outside it's container, but you can offset the radial background through positioning a child element with the gradient. Basically you are looking to do something like this:

gradient

which is close to simshaun's excellent solution. But, since I love challenges I wanted to try something with zero extra markup, I came up with this:

alt text

http://jsfiddle.net/xB4DU/

Which comes pretty close to your to your solution with zero extra markup. It's just a linear gradient with an inset shadow that attenuates the left and rightmost edges of the button.

Upvotes: 6

simshaun
simshaun

Reputation: 21466

This would definitely take some tweaking to make it look right in different browsers (which I haven't really done):

CSS

.upgrade {
    background: #FF3397;
    color: #FFF;
    float: left;
    height: 30px;
    line-height: 30px;
    position: relative;
    text-align: center;
    width: 160px;

    -webkit-box-shadow:  0px 0px 3px #999;
    -moz-box-shadow:  0px 0px 3px #999;
    box-shadow:  0px 0px 3px #999;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 1px -1px 3px #E60071;
    filter: dropshadow(color=#666, offx=2, offy=-2);

    font-family: Verdana, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
}

.upgrade span {
    background-image: -moz-radial-gradient(50% 50% 90deg,ellipse contain, #FFFFFF, rgba(255, 255, 255, 0));
    background-image: -webkit-gradient(radial, 50% -50%, 51, 50% 0, 110, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
    display: block;
    height: 100px;
    left: -50px;
    position: absolute;
    top: -70px;
    width: 260px;
    z-index: 1;
}
.upgrade div {
    z-index 2;
}

HTML

<div class="upgrade"><span></span><div>Upgrade for more</div></div>

http://jsfiddle.net/AvkTH/3/

Upvotes: 4

Steve Adams
Steve Adams

Reputation: 2837

Just for kicks I threw this together, but who knows what it would do outside of chrome. I've never played with radial gradients before, but this was fun - I thought maybe my (Horrible) css could shed some light on your project.

CSS:

#button {
display: table;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 50px auto;
padding: 10px;
background: 
    -webkit-gradient(radial, 50% -200%, 180, 50% -110%, 35, from(#f81499), to(#fff), color-stop(.7,#f81499));
color: #fff;
text-shadow: 0px -1px 0 rgba(0,0,0,.25);
font-family: "droid sans", sans-serif;
font-size: 13px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.25);

}

HTML:

<html>
 <head>
  <title></title>
  <link type="text/css" href="test.css" rel="stylesheet" />
 </head>
 <body>
  <div id="button">Upgrade for more</div>
 </body>
</html>

Upvotes: 1

rcravens
rcravens

Reputation: 8388

Not a full answer, but this may be useful.

http://css-tricks.com/css3-gradients/

Chris has an example here:

http://css-tricks.com/examples/CSS3Gradient/

with a radial gradient. This is using CSS3 and the browser specific implementations which may not be supported on older browsers.

Otherwise, I don't know of a way to pull this off without the use of images.

Hope this helps.

Bob

Upvotes: 1

Related Questions