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
Related
Hello guys!
How will you do this kind of border without image (look at the image at the top, blue piece of block), just css. The height is flexible. Any suggestion? IE10 support :)
I'm not sure if it is what you want, but maybe something like this?
UPDATE: sorry, but I cannot add the link, note can I embed the fiddle as I'm on a mobile and the editor will not let me do either...
jsfiddle.net/hXMLF/1229/
What I want to achieve is located here: http://www.ppp-templates.de/tilability/ ..You see the left and right triangles near the slider, where the arrows are supposed to be...
right now I have that div set up here, with a white background http://teothemes.com/wp/. On that website a background image was used, but I want to do it via CSS
Something related is here, for the footer triangle: Make a CSS triangle with transparent background on a div with white bg image?
I tried to do the same thing, but it didn't work..
Any help is greatly appreciated.
The first thing you can do is create two squares with background same as the background of the website and then rotate them 45deg using transform: rotate(45deg) with vendor prefixes. Then just set the content div's overflow to hidden.
Something like this that I just created: http://cssdeck.com/labs/hggee4eg
Explaining the process here proved to be quite difficult, so I created a fiddle which goes through each of the steps needed to achieve this, each with a small legend.
Here's the fiddle - http://jsfiddle.net/NXmge/3/
EDIT
- I misunderstood the question. Here's the fiddle with the solution to the actual problem: http://jsfiddle.net/joplomacedo/UJyAY/
The previous fiddle still remains useful as it helps understand what I did with on the second fiddle. I'll also update my answer as soon as I can too directly include a general explanation of what I did.
Depending on what sort of cross-browser compatibility you are hopeing to achieve, there are a couple of different CSS3-type options that will allow you to rotate elements by 45 degrees.
However, the example you linked to just uses one large background image with the graphics already in-place: there's nothing achieve with CSS there at all apart from setting it as the container background.
I am using jQuery round corner plugin and border-radius.htc for round corners. It is working perfectly in al browsers othern than IE 8. It is showing some unwanted white borders. I am attaching the screen shot. It will be very much helpful if I get some tips for removing this.
Please check the screenshot here:
http://imageshack.us/photo/my-images/842/gonline.png/
try background:transparent
If it doesn't work, post the code
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
Hi I'm having troubles with a problem in chrome. I think it might be a bug but I can't find much info on it. Basically I want to apply border radius on an image. The border-radius will be 50% forming a circle. The reason I've set it as a % is because i wont explicity know the width/hieghtt of the image.
Any ideas why chrome doesn't display the border correclty? I haven't tested in FF < 4. but FF4 works well as does IE for a change
What are you trying to do? Do you want a circle to appear behind the image? That is what I see in FF. In Chrome, the circle is clipping the edges of the image.
According to the spec -- http://www.w3.org/TR/css3-background/#corner-clipping -- content is supposed to be truncated.
The content of replaced elements is
always trimmed to the content edge
curve.
Which, to me, means that Chrome is following the spec correctly on this.
Webkit doesn't currently clip corners of images. Remove the src tag from the image and you'll see that the border is being rounded correctly.
One workaround is you could set the background-image property in css: http://jsfiddle.net/tEzwJ/
I figured out a way around it, by adding the border and the border-radius onto the parent . I then applied the border radius to the image too. Although there is a minute gap It works in chrome now. I haven't tested it in FF3.6. But FF4 displays the same result