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.
Related
In NativeScript with vue.js, I'm trying to figure out if it is possible to have a button which has a linear gradient background and shows an image above the button text. When I set up the CSS to do that, it doesn't seem to work.
I set up a playground to demonstrate: https://play.nativescript.org/?template=play-vue&id=kICEBa&v=1.
Am I doing something wrong, or is this simply not supported by NativeScript-Vue?
If it's not supported by CSS, is there some other way to achieve this result?
I don't think having both on same element is yet supported. You may raise a feature request to support both.
Meanwhile wrap your button with a layout / content view and apply the gradient on it.
Skitch has this nice effect where it will draw its text on a white background. I'd like to emulate this effect. I found this article on Cocoabuilder where an example approach is given. It kind of works, but has some really sharp corners on the outline where Skitch has nice soft corners. Note how smooth the point of Skitch's 'S' is compared to my attempt using the "draw it twice" algorithm (Skitch on left, my attempt on the right).
Any ideas on what sort of approach to take to get those nice soft corners?
My first thought here would be to convert the glyphs to paths, and then stroke those paths behind. See CTFontCreatePathForGlyph and similar techniques for how this might work.
I'm following this guide: http://www.aishack.in/2010/08/sudoku-grabber-with-opencv/2/
and modifying to iOS 5.0.
I managed to find the largest contour (the sudoku "board"), however, it only locates the surrounding square, without the lines inside, as in the tutorial. can this be easily solved?
I'll try and find a way around it, but still would like to know. thanks!
I assume that you are using the camera right now. Try to load the image what is used in the tutorial and check if your implementation works on that image. Then you can continue with nice sudoku images from the web. You may also change the camera angle and distance from the sudoku when taking pictures to get a better, clearer view.
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.
I know similar questions have been asked before, so don't get snarky and link to previous answers. The reason I am repeating this is that none of the answers have worked.
I have a UIWebView, and I want to draw a pretty drop-shadow behind it. I have tried subclassing and using some CoreGraphics goodness in drawRect:, but to no avail. Can anyone point me in the right direction? Thanks.
You could place a UIImageView under the UIScrollView with a slight offset, and give the image view a shadowy-looking image.
In this case, it would be convenient to use the stretchableImageWithLeftCapWidth:topCapHeight: method of UIImage to get a shadow image that can have nicely blurred edges and corners without distorting if you alter its size.
I think the usual quartz shadows are hard to apply to a UIWebView since you don't really have access to the raw drawing code, which would be the best place to plug that in.
Addendum Here's a sample drop shadow image:
. It has 4 pixel cap size all around, for use with the above stretchableImage method, and an alpha of 80% (so it's 20% transparent in the middle, tapering out at the edges). Feel free to use it. They're easy to make with a selection + feathering in your favorite graphics app.