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.
Related
I want to make a speech bubble like the image below with an outline/border. The arrow is a square with two borders, rotated by 45 degress.
It does work, but the borders do not connect perfectly, as you can see when you zoom in.
Is this even cleanly solvable with CSS? If not, how would you solve it?
Source: https://levelup.gitconnected.com/how-to-create-simple-triangle-borders-with-css-665d26372825
I think you can probably just shift it outwards by one pixel to fix this, i.e. change top: -12px to top: -13px
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 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;
I have a white border that should turn to red on hover (which it does) but the red part doesn't cover the complete white dotted line for some reason. Can anybody guide me in the right direction?
View the site for more details:
Website
Try using the hover state on the .post-item
.post-item:hover .item-footer {border-top:3px dotted red;}
.post-item:hover .overlay {opacity:0.5;}
And use css-transitions to animate the change
here is an example
http://codepen.io/anon/pen/gKqrh
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;