I've made a CSS progressbar, using 2 overlapping elements. The CSS for the elements is as follows:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000;
cursor: pointer;
}
#status_progressbar_progress {
height: 22px;
background: #eee;
float: right;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
/* width controlled by Rails backend, using inline style */
}
Unfortunately, the background from the parent is partly visible at the right edge, as you can see clearly in this picture. Since the background from the child element should precisely overlap the parent element, I don't know why this is the case.
[Picture taken in Firefox 4]
Maybe someone could explain to me why this is happening and how to solve it?
This is a known problem. One way around it, is by nesting rounded elements when you need a colored border. Pad the other box with the same amount as the width of the border.
More information can be found in this blog post by #gonchuki: Standards Compliancy is a lie (or, how all browsers have a broken border-radius)
An alternative COULD be to simply use the status_progressbar div (no children). Create an image that is wide enough (say 1000px) and the colour of your choice (personally i'd create one white 50% opacity).
then:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000 url("/path/to/image') repeat-y 0 0;
cursor: pointer;
}
I would then manipulate the background position property with javascript ALWAYS providing a px value NOT a % as %50 would center the image.
var prcnt = (YOURPERCENTAGE/100)* 366;
I was able to get a pretty good result by adjusting the CSS Slightly. (DEMO - Tested in Chrome & FF)
#status_progressbar_progress {
...
margin-right:-1px;
...
}
This just nudges the grey div to the right by a pixel. You can even up it to 2 pixels, which I think looks even better. Make sure you compensate for that pixel change in your calculations.
I think this happens because the browser tries to antialias the border and it probably does that by adjusting transparency so your under div is black and top gray so black gets trough. (don't quote me on this but thats atleast what seems logical to me).
Have you tried wrapping both status_progressbar and status_progressbar_progress in another div and give border-radius and overflow:hidden to that div?
You could try changing the border radius on the right hand side up by 1px on the background element. That might make it disappear behind the front
Related
I wanted to create a simple loading animation with CSS, so I needed a border which was only visible 1/4 around the element. The element also needed to be round. I stumbled upon border-top and created the following CSS, which is applied to the "loading element":
.loading {
width: 5rem;
height: 5rem;
border-radius: 50%;
border-top: 5px solid red
}
<div class="loading"></div>
However, now I've gotten a problem, the border created with border-top surrounds approximately 1/2 of the element and has gotten a weirdly shape.
I've, searched for a solution and found out, that I also need to add a border around the complete element, to make it look, like I want it to look. So, I've added the following CSS: border: 5px solid transparent and achieved the result I wanted. The border takes up 1/4 of the element and has gotten linear ends:
Why does my solution work, why does my first attempt surround the element by a half and why is my first attempt so oddly shaped?
CSS borders meet at an angle, so the shape of their ends is determined by the width of each border. This is how borders are used to create CSS triangles. This article has a good overview of how it works, with a nice visual example near the start: The secret of CSS triangles
Of course, it's easier to see what's going on when the borders are all the same width, and there is no border radius to complicate things. But when you just have a single border with width, and border radius, then you've seen how that affects the meeting point.
I recommend you try creating a square div with 4 different coloured borders, and then experiment with each of their widths, and with border radius, using your browser's developer tools so you can see how the meeting points change.
This is because the border width transitions to what it is on the adjacent sides (zero). Here I demonstrate with a wider border on the side.
.loading {
width: 5rem;
height: 5rem;
border-radius: 50%;
border-top: 5px solid red;
border-right: 25px solid;
}
<div class="loading"></div>
You'd normally create this sort of effect using pseudo-elements or canvas.
.loading {
width: 5rem;
height: 5rem;
border-radius: 50%;
border: 5px solid;
border-color: #ef7d00 #d8d9d9 #d8d9d9 #d8d9d9;
}
<div class="loading"></div>
I'm trying to create a "tag"-like element where the radii of the borders are different on the left side.
border-radius: 50px; /* for a completely rounded right side */
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
Here's a very brief example:
.tag {
border-radius: 50px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
background-color: red;
color: white;
font-family: Helvetica, sans-serif;
}
<span class="tag">Jeanne Oliver</span>
View on JSFiddle
The problem: the two corners on the left, where I should have 3px rounded corners, don't seem to have any rounding at all (see it in the fiddle)
Possible starting point
I've noticed that if I reduce the larger radius to something like 10-12px the issue stops manifesting.
However I don't understand WHY this is happening, and also I need the larger number because the code needs to be used on a variety of tag sizes and don't want to rewrite the border-radius for each size.
This happens when 2 adjacent corners exceed the size of the border box (in your case it's 50px top-right and 50px bottom-right, which exceeds the element's dimenions) and the browser has to scale down all border radius until they won't intersect.
More details on www.w3.org - corner-overlap and a better exemplification here (Lea Verou, "The Humble Border-Radius")
left radius is applied, nothing is going wrong - you can check it by setting display: inline-block; height: 200px; to span. 3px is very small radius to make visible effect on your original span size.
I've a div using css 3,i'm placing a circle but when i place objects,it is going out of circle because div is still there and it is rectangle.
Can i use some thing instead of div and make circle.My objective is i need a circle ,when i place objects ,it should not move out of circle.
Thanks
There's no actual way of making an element circular. You can make it look circular using the well-known border-radius 'trick'.
To create the effect that the the text/contents of the div are only inside the borders of the circle, you can make sure it's filled within the largest square contained in the circle, using padding. Here's a visual illustration:
Here's a demo: little link.
HTML:
<div>
Glee is awesome! Glee!
</div>
CSS:
div {
border: 1px solid black;
-webkit-border-radius: 50px;
border-radius: 50px;
padding: 15px;
height: 70px;
width: 70px;
overflow: hidden;
}
Edit: for images, you have two cases:
You want the div to have a circular background. In this case, use the background-clip: padding-box; property (you need vendor-prefixed versions for this to work). Here's a demo: little link.
You have an img tag inside your div -- you can use the prior method.
If you create a div with a border-radius equal to it's sides then you should have what you're looking for.
Creating Circular div for CSS3 compatible browsers
In HTML5 there is an element called canvas. It can be used to draw, using javascript, and therefore also for animation. This might help you, if you only want to draw. Else you could go with the z-index property in css
create a div and give it border-radius
width: 230px;
height: 230px;
border-radius: 165px;
-webkit-border-radius: 165px;
-moz-border-radius: 165px;
I'm trying to use a border property on a div that is using a border-radius property.
Here's my CSS:
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
So as you can see I just put a border radius (with all different properties for each browser) as well as a border of 1px. The problem is border isn't drawn on both top corners. It's drawn everywhere else including bottom corners. I looked for something on google but can't find anything...
Any idea ?
Problem in the other markup and styles, because your css is correct: testcase on dabblet
Try to add some margin: #page { margin: 15px; } May be border is simple invisible or container of #page hide border with overflow: hidden;
Update: Problem also may be exists in inner images which can override or ignore some parent properties (e.g border-radius).
I guess due to some issue with height the bottom part is will be hiding, can you set some height on it.
The page height is not defined. That is why it is spanning the whole window and you are not able to see the other borders.
Maybe that's the reason it's not working.
I just made some changes. See the fiddle.
HTML
<div id=page></div>
CSS
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 10px auto; /* the extra line */
height: 200px; /* the extra line */
}
I have a problem wth setting two background, here it is:
rightCol {
margin: 0pt;
padding: 20px;
background: #AF7A38 url('../images/stain2.png') no-repeat scroll right top;
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-inline-policy: continuous;
float: right;
width: 770px;
min-height: 810px;
height: auto ! important;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; behavior: url(PIE.htc);
}
As you see it sets the background right top with some width and height with #AF7A38 color background for the rest of column, but what I want to do is to set another background instead of color for example setting this:
background: url('../images/background2.jpg') repeat scroll 0% 0%;
to fill the rest of column instead of color.
thanks
As far as I know, you can only use one background per element. CSS3 changes this, however, so if CSS3 is an option I would go that route. Check it out here.
To use two background images, place the backgrounds in two elements. You can use the html and body elements for this if you want them behind the entire page, or add an empty positioned secondary element to place them behind a sub-element.