Is it possible to create a rect, that has gradient fill from black top to white bottom with gradient border from white top to black bottom?
Regards,
It's also hypothetically possible using css gradients for the background-image and border image. I still suck at getting the border-image syntax correct but here's a half-figured out fiddle with a gradient for a border-image: http://jsfiddle.net/y8uFu/
You can dig through the spec for border-image here: http://www.w3.org/TR/css3-background/#border-images
I'd love to see if someone can figure it out for the border-image.
Yes, this is most definitely possible. "Canvas" is what you are looking for.
Here are a few resourcses to get you started:
http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/
http://diveintohtml5.ep.io/canvas.html#divingin
http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/
http://dev.opera.com/articles/view/html-5-canvas-the-basics/#gradients
Related
<-- see image with imperfect pixel here.
When using skew in CSS I get a imperfect pixel where the skewed grey border meets the grey bottom border. Looks like some sort of outline or box-shadow. But using outline:0;box-shadow:0; does not effect it. Does anyone know how I can solve this? Cheers and thanks in advance! ✌️
Edit, relevant code: https://jsfiddle.net/acnodrfe/
The blue background color of that element was causing this. The grey border did get a little bit of blue from the bg with it. Changing the background with: background: linear-gradient(270deg, #0b19ba 0%, #0b19ba 99%, #cccccc 100%); solved the problem. Because it gives the edge close to that border a grey value.
PS: This was only possible because I have the light blue element on top of it so you don't see the gradient. Be aware of that if someone might need and find this later on in time. 🚀
I want to create a background with grain effect and using radial gradient. Is that possible to do with css "background" property only? Can you please help me with it? It should look something like that, just without the picture on the right, thanks! (cant post pics here, because I need more reputation points)
You can use the background-image radial gradient property.
For example
{
background-image: radial-gradient(red, green, blue)
}
Is it possible in any way to create box-shadows around a transparent image? For example, a logo has many corners and i want the shadow to be drawn around these corners. When I add some box-shadow, it will draw rect-shaped shadows.
Thanks
It is possible. Click here for more information, an explanation and a demo:
http://demosthenes.info/blog/600/Creating-a-True-Cross-Browser-Drop-Shadow-Effect-With-CSS3-amp-SVG
Unfortunately, box-shadow can generate shadow only around the box of the element, which is always rectangular. There is CSS filter property that can generate shadows around non-transparent areas of the image (see http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison), but its browser support is still limited.
I have the following code in JsFiddle: http://jsfiddle.net/56mpJ/2/
What I am trying to do is to have the border of the table as a picture that I take from the internet
I obviously tried
border-image: url(http://img.docstoccdn.com/thumb/orig/895007.png)
But unfortunately all I see is a black border.. Any way to help please?
border-image support is limited, see caniuse
your demo works for me in chrome/windows
if I where you, I'd use background-image for outer border, and simple border for cels
I want to have a box with two colors with silver on top and it should slowly fade into white, just as Apple's homepage background. How do i do that?
Thanks as always.
If you want to use CSS3 here's a great example: http://css-tricks.com/examples/CSS3Gradient/
W/o CSS3, you have to make do with an image repeated horizontally (x-repeat), similar to what tvanfosson said.
you are looking for gradient background?
http://www.tizag.com/cssT/background.php
look for "css gradient background"
there are more articles if you google: gradient background css
The basic idea is to use a background image that does the gradient for you. You sent the background color of the page to the "end" color of the gradient, then apply your gradient background image using CSS with a repeat in the opposite direction that you want the gradient to flow. So if you want a 100-pixel, silver to white, gradient from top to bottom you'd create a 100Hx1W pixel image that spans your colors from top to bottom. Set the background color to white and apply the background image repeating across the x axis. You can easily create the gradient using the gradient tool in Photoshop or GIMP.
#body
{
background: #ffffff url(/images/bg.jpg) repeat-x;
}