I want to/need to have a border of 1px thickness and dotted appearance, where the pattern is x-o-o-x-o-o etc. (dot, not, not, dot...)
This has to be done with border-image IIRC, but I went mad trying to create the image and applying it properly with the CSS statements.
Can anybody give me a hint how both has to be laid out?
Thanks and best!
I could get it to work by making a 7x7 image with dots in the corners and in the middles of the sides. Like this.
And then they can be evenly spaced by making a 2px border, so that the corners and the sides of the element use one dot each (see the markers how the slicing is done). So the css would be something like
border:2px solid transparent;
border-image: url(7x7.png) 2 2 round;
Related
You can see the implementation here:
http://jsfiddle.net/Wtcdt/
In FireFox on Mac, that circle is round/solid. I want it either dashed or dotted.
What makes it even weirder is that the same property (i.e. border: 4px dashed #000) works fine on an HR. So why does it not work when border-radius is involved?
This is so bizarre to me.
It's a bug, WebKit had a similar issue but it was fixed in June. Here are all the other outstanding border-radius defects in Firefox.
Your circle is too small. If you increase the height and width you will notice that the shape expands to a rounded-rectangle, the rounded edges remain solid but the lines become dashed.
Its a Firefox bug. Typically you have to either make solid border or remove radius. But if both of the properties are important then you can replace the corner with image like this: http://eblog.foysalremon.com/dashed-border-radius-corners-rendered-as-solid-on-firefox-solved/
I'm trying to create a transparent right trapezoid with color border using CSS 3 This is what I've gotten so far.
http://jsfiddle.net/bodyfarmer/bdhtn7kr/1/
Any help is appreciated
You have to place a right border on the containing object to get the correct look. Like this:
border-right: 20px solid red;
Here is the updated fiddle
I also changed skew to skewX. Per this link:
Note: The skew() function was present in early drafts. It has been
removed but is still present in some implementations. Do not use it.
To achieve the same effect, use skewX() if you were using skew() with
one parameter or matrix(1, tan(ay), tan(ax), 1, 0, 0) for the general
way. Note that tan() isn't a CSS function and you have to precalculate
it yourself.
In your code, you are missing part of the border rule.
border: 20px solid red;
I have created a css rotating tetrahedron and now the only thing that prevents me from being happy is that I see that jogged line of the bottom polygon. Here is a jsfiddle: http://jsfiddle.net/mikeonly/uxy9x23n/.
Obviously, I want it to be antialiased. And what I have already tried is fixing it with:
scale(.9999)
adding padding
rotating the bottom polygon in different plans
setting the color of borders in rgba
creating outline: 2px solid transparent
Let me know in case the line is smooth for you. Also, there is a screenshot of that issue when I view it in the latest Chrome: http://imgur.com/nyKKTDb.
Thanks.
Top border is 6px and green. Left, right and bottom 1px #ccc. The 1px border is bleeding into the 6px, see fiddle for an example.
http://jsfiddle.net/AzHUt/34/
Any solution other than div soup?
for me, this looks like it works exactly like it shoud - set your border-width to 10px for all sides and 30px for the top-border to see this more clearly: http://jsfiddle.net/AzHUt/21/
if you want this to look like a "window" with an bold bar on the top, you'll need another markup ("div soup" like you said).
EDIT: i think this is what you've expected: http://jsfiddle.net/AzHUt/28/ - it's just a little change in the markup, adding another div to it (ugly, but it does the job)
No; you'll need to include at least one other block: if you increase the width of the borders by a factor 10; you'll see why: all colors and widths are part of the same border; there's no way the browser can know which is "more imortant".
You don't actually need any markup changes, however; a CSS2 generated box will do too (though it's pretty hacky IMHO): http://jsfiddle.net/AzHUt/33/
I have a 1px by 1px grey pixel. It is used as a BG image:
background-attachment:scroll;
background-color:transparent;
background-image:url("../image/vertical-border.png");
background-position:393px 0;
background-repeat:repeat-y;
So I expect a grey, vertical line the height of whatever is tallest in the div. Common trick.
So I see this properly in every browser EXCEPT IE 8. In IE 8 it displays as a gradient. Dark up top, light down below. How crazy is that? I've never seen anything like this, and would love some insight.
Thanks!
Unfortunately this is a PNG rendering bug (surprise surprise), in most cases people increase the size of the tiled PNG image to say, 10x10 and the problem is removed. Hopefully this is ok for you - perhaps use a 1x10, or even better a 1x50...
A partial explanation, from memory, was the amount of processing required by IE to apply its filtering to 1x1 images, when you multiply it by the number of times it appears on the screen - its just too hardcore for IE.
See: IE8's rendering of transparent pngs is FUBARed on my site, and related posts/comments.
EDIT:
Hey, since it's just a vertical line, is it possible to just use GIF format instead? Or perhaps 8-bit, non alpha transparent PNG?
If it's just a 1px grey border you're after, why not just use a 1px grey border?
Example:
border-right: 1px solid #cccccc;