I'm getting a tiny rounded corner halo effect that I'd like to get rid of. In this example, look for the effect in the red circle. Here's a zoom in of the effect:
I seem to recall a while back reading an article on just this problem. Anyone have a link to that article? Otherwise, any good ways to get rid of the halo?
It is being caused because the dl has all four corners rounded. This allows the bottom of the dl to be rounded. The dt sits over the dl and has its top left and top right corners rounded. But there is a slight overflow of the dl curve behind the dt curve, causing the halo.
My solution is to increase the border-radius of the dl so that it is hidden behind the dt corner. But it seems like a hack and adds a fair amount more CSS. I'm wondering if there is a better solution. Here it is without the halo:
If you don't mind a 2 pixel discrepancy you could add...
div.content dt.top {
position: relative;
top: -2px;
}
But I think your solution is good, it can be improved by using the shorthand version of border radius:
http://jsfiddle.net/DAjWS/
border-radius: [topleft] [topright] [bottomright] [bottomleft]
The article you are mentioning probably has to do with the combination of border with border-radius (it produces a halo similar to yours), but in your case it's expected. The same thing would happen in a vector editing app if you overlapped two boxes with rounded corners. you just have to find an elegant way of covering the anti-aliasing of the bottom box.
I just came across the article that I mentioned in my question. It was linked to from html5boilerplate.com. Essentially, the following webkit CSS will get rid of the bleed (or halo as I called it):
-webkit-background-clip: padding-box;
Related
I'm trying to round the corners of the video container on this page: http://tstand.com/homepage-test/
For some reason there are white pointy edges on the bottom left and right. I've inspected source a bunch of times and can't see where this white background is coming from.
If someone could tell me which class I should be adding the border-radius to that would be great. Also, this is a minor detail, but I feel like the edges aren't that smooth, is there a way to fix that?
As I see the following code should help in your case:
.page-id-965 .et_pb_video_box {
overflow: hidden;
}
It seems that the video element goes outside the container - that's why the overflow hidden helps as applying border-radius to the video element not work.
i'm working on my personal website and i have an idea. Better it will show as a image.
img
I want to ask how to do the geometry in the header only with css. It must always be the center of the page. Logo could be fixed at the center of the header. Thanks for your answer!
Analysing the design shows it is mostly made up of a lot of triangular shapes, plus three boxes. You can therefore do the whole thing with CSS. The way to create a triangle in CSS is to use a div, give it zero width and height, and a border of a suitable thickness. There are many articles on the web on how to do this, and it has been explained before on StackOverflow as well, with some excellent explanations of the theory behind it.
So there's a lot out there to consult and I won't go into it again at length here. But basically the CSS is like:
.triangle {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-left: 50px solid green;
margin : 0;
padding : 0;
}
This particular example produces a right angled triangle with one side sloping in the direction of the main diagonal in your design - i.e. from bottom-left to top-right. Making border-left and border-bottom the same length would produce a diagonal at 45 degrees, but in your design it's a different angle, so I've used different lengths. You can experiment to get exactly the slope you want. Whether you use border left, right, bottom, or top decides the orientation of the triangle.
Having achieved that main diagonal, identify the other triangles in the design and create some more, smaller divs and add similar CSS. You can then overlay them on top of the design using absolute positioning, and a bit of z-index if needed. One bit of the stuff in the center will also need a tiny rectangular div putting on top of the triangles.
It's as neat an exercise in CSS triangles as ever I've seen, but I'll leave you to work out the details!
I have this:
div {
transform:rotateX(120deg);
}
But when I make the transformation it leaves me a white space over the div. How can I make the div to stay at the top.
Pretty sure you are looking for transform-origin.
Something like transform-origin: 0% 33%; works in your case.
jsFiddle here - play around with it.
By default, the origin is set to 50% 50%.
See MDN documentation.
To change the rotation point of an element, you can use transform-origin.
Browser support is limited, and prefixed, so check in here for some more information:
(it will only work in chrome and safari for 3D transformations like this, I believe)
http://www.w3schools.com/cssref/css3_pr_transform-origin.asp
Here is an example:
http://jsfiddle.net/zAZuY/1/
notice how the second div sticks to the top. Also, take note that a 120 degree rotation will begin to flip your element upside down if the origin point is at the top (you are actually seeing the backside of the element at this point)
Something like:
div {
transform:rotateX(120deg);
transform-origin:top left;
}
Best way to grasp this is to pretend the DIV is a piece of paper and you're sticking a nail onto the top left hand side of the paper. Now since you're flipping the paper on the X axis, it uses the top of the paper as the folding point and turns itself around that area.
Remember to declare both the "webkit" and "ms" versions of "transform" and "transform-origin" in your CSS since the vanilla statements haven't been universally adopted yet.
I have been searching for an hour on how to remove a black border/shadow around the top and left sides of a select element in IE 8 and less. Everything I have come across does not work.
I am using normalize.css and setting a 1 pixel solid red border around the error state of a select element.
Can someone tell me how to remove the black from the top and left sides? I have tried all sorts of things including the filter property, absolute positioning, and a few other things but nothing works.
Here's a zoomed in screenshot of what I'm referring to:
Try setting the following in your CSS:
select {
outline: 0 !important;
}
However, styling the select element is a notoriously wonky endeavor. Selects are much like file inputs in that browsers do not respect style rules applied to them.
If you'd like a more in-depth look at how these issues can be addressed, I highly recommend you check out this previous post.
I am trying to recreate that Google-style toolbar on G-mail and a few other Google services.
I have tried doing this as both a formatted list and nested div elements in one container but I have the same problem each time.
When you mouse over, the new 1px border moves all the other elements around and I have to apply stuff like:
left: -1px;
bottom: 1px;
Which is all well and good for the element currently :hover'd, all the rest move around and it looks ugly.
So I guess my question is:
Is there any way to display things such that a new 1px on :hover, will not alter the positioning, while still displaying these elements WITHOUT absolute positioning.
Obviously if the only avenue is absolute positioning where I have to put in pixel co-ordinations then sure, but there has to be a more elegant way.
You can do several thing to avoid the 1px border shifting things around on hover.
http://jsfiddle.net/ZeikJT/tBmm2/
One solution is to add a transparent border (border:1px solid transparent) so that there is always a gap. This will work in pretty much all situations. It also allows you to then simply change the border-color on hover and not re-specify the border-width so you won't ever need to make changes in two places if you decide to change the width.
http://jsfiddle.net/ZeikJT/NkBwp/
Another solution is to add a margin or padding that then gets taken out on hover. This is a little trickier to get working properly but can work just as well.