Is there a way to creat a gradient with a stop n pixels from the bottom edge of the element?
For example with Moz/Firefox it would look like:
-moz-linear-gradient(center bottom , #f00 2%, #d00 31px)
It should also be noted that this gradient has a companion gradient to do the same thing to the very top of the box. So really the css looks like this for FF and i need to reproduce for webkit:
background-image:
-moz-linear-gradient(center top , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px),
-moz-linear-gradient(center bottom , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px);
You can't do that with the current webkit syntax. Good news though! There will be a new -webkit-linear-gradient property (just announced on the webkit blog) that basically matches the -moz syntax and will allow you to do this. This syntax should become the definitive CSS3 syntax, so you'll be able to drop the -webkit and -moz entirely at some point. (The old -webkit-gradient property will continue to work indefinitely, but is not favored going forward.)
You could use -webkit-background-size to size the gradient in pixels and background-position to place it at the bottom.
Not quite sure what you were after but I manage to stop a gradient in px by using this -
background-size:100% 31px; background-repeat:no-repeat;
Have you tried something like this?
-webkit-gradient(linear, center bottom , #f00 2%, #d00 31px)
I hope that this site helps you more.
Related
I'm using FlexSlider 2 and I'm trying to apply an horizontal page offset (left and right) to my slider, something like the mobile Facebook app which as you are browsing the images, you can see a small part of the previous and next image
Sample image: http://imgur.com/Oc9S8OA
Thanks in advance.
I know this was asked three years ago but it seems like there are quite a few versions of this same question on google so I figured I'd answer it now so other people don't have to fight with this.
The trick is to add some padding to your .flex-viewport element. Has to be padding and it can't be any higher or lower on the food chain. If its on the list it will add padding to the left but never show the padding on the right; if its on your wrapper the list won't properly overflow and you won't get to see the preview of the next items.
.flex-viewport {
padding: 0 75px;
}
I have been so frustrated with my site, at some point my background disappeared and i must be blind because i cant figure out how to get it back..
My website is here http://www.allramhosting.com/smyrnainlet
What i am looking for help with is id="section_wrapper" - that big white background you see...
somehow i lost the black background gradient that i made for that wrapper and its just giving my whole page a white background...
Try adding a float: left; to section_wrapper. It fixed the issue here. It may not be the proper solution but i think you will figure out the problem using that. section_wrapper's height becomes 0 at your current site.
Note that it works with IE9 in any case.
I did this background in firefox but I can't replicate it in webkit/chrome (I have tried several alternatives but nothing):
background: -moz-repeating-linear-gradient(0deg, gray, transparent 1px, transparent 5px) repeat scroll 0 0 white;
What would be the correct translation? It is possible to achieve the same pattern? (or at least a very close one).
Thanks!
Oh! It was there in the documentation! :
http://www.webkit.org/blog/175/introducing-css-gradients/
If you want to achieve effects like
tiling of a vertical gradient using a
narrow strip, you should specify
background-size to give the gradient
tile an explicit size.
So it was fixed adding:
background-size: 10px;
Gecko and Webkit acts differently in this matter: While Gecko will adjust the background size automatically if you specify the gradient steps in "px", webkit will (possibly) calculate the % based in the "px" measure you set.
I'm not sure if my English is correct, but that is the idea...
-webkit-repeating-greadient(...) :)
Supported by Chrome and Webkit nightlies.
I have an NSBezierPath that I'm filling and stroking. I'd like to add some inner glow to the path (a light stroke, just inside of the outer stroke), and the thing that comes to mind is to use the same path shrunk by 1 pixel (the size of the line that is already )stroked. Is there a way to do this?
Alternatively, is there some sort of pattern I can use when applying both a border (stroke) and a glow to a bezier path?
Example, the (extremely subtle) inner glow on the Google Chrome tabs:
You can resize a NSBezierPath quite easily using an NSAffineTransform.
You know what, you actually DON'T have to resize the bezier...all you have to do is change the stroke width:
make a duplicate of the bezier
on the new one, make the stroke width narrower. (So, maybe 30 on your original, try 26 on this duplicate.)
Put the new smaller one on top of the larger one.
I hope that works for you (hopefully I understood what you were getting at).
Is there a way to use both a gradient & an image with the background shorthand? I have tried: backround: url(image_path) no-repeat top left, gradient - but this doesn't seem to work.
Loreley: you are doing it right. Here is a demo:
http://jsfiddle.net/ggULM/
The gradient syntax is quite delicate, and if you get anything wrong it will fail entirely. Test just with the gradient, and then add the image later.
A good practice in StackOverflow is sharing the specific piece of code so we are able to pinpoint to the exact source of the problem.