radial-gradients

Is it possible to make dotted text with css? I know that the obvious thing would be to use a dotted font, but If I only need to use dotted text sparingly, then having the user to download a whole font might be overdoing it. The idea that I had was to overlay the text with a pseudo element with a background pattern of small transparent circles with a white background. Some thing like this: <div class="dottedText">Some dotted text</div> FIDDLE CSS .dottedText:after { content: ''; position:absolute; left:0; top:0; width: 100%; height: 100%; background: radial-gradient(circle, transparent 50%,

I have the following style applied to my div element: background-image: -moz-radial-gradient(50% -10%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%); This has the desired effect (being an inner drop shadow only at the top of the div ). I would like to apply the same effect at the bottom of the div . The following line does it well, but it seems to override the first, so I can only get one or the other. background-image: -moz-radial-gradient(50% 110%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%); Can someone show me how I can have multiple radial

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 the following 'button' style. 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

Just wondering how to render a radial gradient (point > circle) onto a new UIImage (iphone). I saw the following: http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_shadings/dq_shadings.html And it made me think i need to use CGShadingRef or CGGradientRef, and use UIImage's 'imageWithCGImage' constructor to go from the CG* to a UIImage... but i can't figure out how. Any suggestions greatly appreciated! You should read about Graphics Contexts in the same document as the section you linked. All drawing happens in a graphics context. If you

I have a UIView which I want to have a radial gradient, and I'm wondering how to go about doing this? John Gallagher To do this you need to drop down to Core Graphics and use CGContextDrawRadialGradient . Similar Stack Overflow Questions How can I draw a sector with radial gradient (iphone) How to draw a gradient line (fading in/out) with Core Graphics/iPhone? Other Resources There's a tutorial showing how to draw icons with gradients on iOS here: http://redartisan.com/2011/05/13/porting-iconapp-core-graphics He's put the code on Github, complete with a UIView subclass that shows the (rather

I am working on a website which uses multiple css3 gradients as overlay for a background tiled with texture image site url: --snipped-- currently for header i am using following css: #header { background: #DBD6D3; height: 364px; background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3); background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF)); } #header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;} here headerBg.png is a semi-transparent texture of size 5x5 pixel, ad for body I need to create this background: I need

I'm trying to create a shape drawable with radial gradient background, with radius that will adjust to the screen size (take a look at the relevant documentation ). This is my code: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <gradient android:endColor="#000" android:gradientRadius="50%p" android:startColor="#5d2456" android:type="radial" /> </shape> But it doens't seem to work. if I remove the "%p", it works, but then the radius will be static, thus not adjusting to the screen size...Any idea what's wrong