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;
Related
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
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 am trying to achieve an effect where I can diagonally crop an image in a way that is displayed below. I am aware of clip path as a solution but it would not be suitable in this scenario since it is not supported by certain browsers which are essential for this particular task. (IE and Edge)
Additionally, the cropped edge would need a black border which adds on to the complexity of what I am trying to do. Having searched for answers and coming up with anything, any suggestions would be appreciated.
Maybe you could overlay the image with a rotated element (div or something) that you give a border and white background. This solution would work if you're okay with a solid background color.
Another solution, depending on your requirements, could be to simpy use a .png image with transparency.
Yes you can, it's a bit tricky to get the sizes of the divs correct. But here's generally how to do it:
HTML:
<div id="outerwrapper">
<div id="innerwrapper">
<div id="content">
<span>asdf</span>
</div>
</div>
</div>
CSS:
#content {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-60deg);
transform-origin: 50% 50%;
position: relative;
}
#content span {
position: relative;
top: 30px;
left: 30px;
}
#innerwrapper {
border-right: solid 3px black;
overflow: hidden;
width: 100px;
height: 100px;
}
#outerwrapper {
transform: rotate(60deg);
transform-origin: 50% 50%;
width: 120px;
height: 120px;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/ywfpeve8/
To explain this:
You have a div that contains the content itself. In this example it's just a span, but it can be anything. (I put it in to see that in the end everything is horizontal again)
You rotate that content div to some degree that suits you.
You place that div in a wrapper with a different size where you can position your content in. That div has an overflow: hidden, to crop all that content that is outside of the inner wrapper box. That wrapper then also has the border where you want the crop to be highlighted.
That inner wrapper is placed in an outside wrapper that rotates the same amount at the content div, but backwards, leaving you with the original 0 degree alignment of the content. This div again has overflow: hidden to crop that inner wrapper again so that you can hide the other "crop edges" that you want to be invisible. In my example code I didn't to the correct dimensions and positionings as it takes a bit to get right. But if you have an image with a white background, that shouldn't be very hard anymore to get things right.
Bonus: the background of the top-level element (that element that holds the outerwrapper can have any background at all and you won't see a rectangular box at the bottom right corner (for this example) as everything just happens with overflow: hidden and without bars that go over the content to hide it :)
I will attach an image with the effect I'm trying to achive using html and css.
Instead of the black color, I'll have an image, and I want to make an white overlay to give the impression of a round bottom. This could be done using an background image but I'd like to make this using css and keep that option as a last resort.
Setting 50% to border-bottom-left-radius and border-bottom-right-radius should give you the expected results.
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
div {
background-color: black;
width: 400px;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
<div></div>
Something like this:
div {
background-color: orange;
width:500px;
height:200px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
overflow: hidden;
}
<div>
<img src="http://lorempixel.com/output/city-q-c-640-480-5.jpg">
</div>
This shape can be achieved by using 2 HTML elements.
We set the rectangular primary element to overflow: hidden.
The child element should be shaped as an oval (can be done via border-radius), and scaled+translated a bit so that it has only the bottom edge within the main element area.
Please try this jsFiddle.
I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.
If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.
The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/