All geek questions in one place

CSS radial gradient with width constraints?

Here is the gradient of the button I'm trying to build using only CSS gradients:

alt text

This is usually pretty easy to do, but, as you can see, the gradient at the top looks more like a large cut-off radial gradient, as it drops slightly in the middle and does not extend completely to the edges.

So, any ideas how to do this using CSS?

+4
source share
4 answers

In css, the radial background center cannot lie outside its container, but you can compensate for the radial background by positioning the child with a gradient. Basically you want to do something like this:

gradient

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

alt text

http://jsfiddle.net/xB4DU/

Which comes close to your solution with zero extra markup. This is just a linear gradient with a nested shadow that weakens the left and right edges of the button.

+6
source

This will definitely require some tweaking to make it look right in different browsers (which I really didn't):

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/

+4
source

Not a complete answer, but it may be helpful.

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

Chris has an example:

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

with radial gradient. This is the use of CSS3 and specific browser implementations that may not be supported in older browsers.

Otherwise, I do not know how to do this without using images.

Hope this helps.

Bean

+1
source

Just for the blows, I threw it together, but who knows what he will do outside of chrome. I had never played with radial gradients before, but it was fun - I thought maybe my (Terrible) 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>
+1
source

Source: https://habr.com/ru/post/1333105/

More articles:


All Articles