How can I style this circular div? It is not pure circle as you can see, it is slightly different, uneven but also nicely rounded.
I am trying with border-radius but it doesn't look as pretty, it seems like it has lumps
.circle {
border-radius: 42%;
transform: rotate(46deg);
height: 70px;
width: 70px;
background: green;
}
<div class="circle"></div>
Make the border radius half the size of the width/height. You will have to be pretty clever about getting text and images to fit in the circle.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<h1> Header </h1>
<p> Hi
<div class="circle" id="circle"> ! </div>
</p>
</body>
</html>
CSS:
.circle {
border-radius: 100px;
height: 200px;
width: 200px;
background: green;
margin: auto;
text-align:center;
}
Result:
Looks to me like the problem here is that the size of your circle is larger than the one you are imitating. Some modifications to the size, radius and rotation gives:
.circle {
border-radius: 44%;
transform: rotate(45deg);
height: 66px;
width: 66px;
background: green;
margin: auto;
}
<div class="circle"></div>
Utilising Photoshop, pasting one circile over the other gives an almost perfect reproduction.
.circle {
border-radius: 50%;
transform: rotate(46deg);
height: 100px;
width: 100px;
background: green;
}
<div class="circle"></div>
now try to execute this one,it will work for sure.
Related
I have a wrapper box that I want to animate with transform translate but if I do this I can't use fixed element inside.
example :
<div class="wrapper">
<div class="box-content">
<div class="fixed-element">
</div>
</div>
</div>
<style type="text/css">
.wrapper {
transform: translateX(50px);
background: pink;
}
.box-content {
height: 1000px;
background: green;
}
.fixed-element{
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: blue;
}
</style>
https://jsfiddle.net/aobv5azy/
I don't want use javascript, and I want use transform translate. Animate with "left" is not good for performances.
We try to center a CSS circle with a image and a label overlaying the circle. The circle should be horizontally centered in a bootstrap column. Goal is to have this circle always in the horizontal center. Any advise is welcome.
Please see following JSFIDDLE
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="circle1Wrapper">
<div class="circle-textSmall bubble1outer">
<div> <span class="bubbleIconSmall">
<img src="http://lorempixel.com/40/40/" />
</span><span class="bubbleHeadSmall">label</span>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
CSS:
.circle1Wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 9999;
margin: auto;
border: 1px solid;
}
.bubble1outer {
position: absolute;
}
.circle-textSmall div {
width: 125px;
}
.circle-textSmall div {
float: left;
width: 250px;
padding-top: 15%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #000;
}
span.bubbleIconSmall > img {
width: 45%;
height: auto;
}
.circle-textSmall:after {
width: 125px;
padding-bottom: 125px;
margin-left: 50%;
}
.circle-textSmall:after {
content:"";
display: block;
width: 250px;
height: 0;
padding-bottom: 250px;
background: #ccc;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
It should look like this:
#metaxos, I wanted to put this as a comment, but it is a bit long.
Even when you found a solution that works for you, I think that you may want to consider cleaning that code a bit; look how the original example got rid of most of the code and just kept one div:
.innerwrapper is unnecessary (why not put that style directly on #myCircleDiv?);
Same thing for the div that holds the image (you could put that style directly on the image!);
And the img itself can go too (and use it as background of #myCircleDiv).
This is my opinion (feel free to ignore it), but I think you should aim for something cleaner and easier to maintain, rather than a more complex and elaborated (but unnecessary) structure (unless it is required by the user/customer). The simpler, the better.
In that sense, this (you can see it working on this jsfiddle):
<!-- HTML -->
<div id="myCircleDiv">LABEL</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
line-height:375px;
text-align:center;
color:white;
background:url("http://lorempixel.com/50/50/") #ccc no-repeat 50% 38px;
}
Looks beter than this:
<!-- HTML -->
<div id="myCircleDiv">
<div class="innerWrapper">
<div>
<img src="http://lorempixel.com/50/50/" />
</div>
<div>LABEL</div>
</div>
</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
background-color:#ccc;
background-size:250px 250px;
line-height:250px;
text-align:center;
color:white;
}
.innerWrapper {
width: 100%;
height: 250px;
}
.innerWrapper div {
float: left;
height: 125px;
width: 100%;
line-height: 125px;
}
.innerWrapper div img {
margin-top: 38px;
}
And the result is exaclty the same. But again... that's my opinion :)
This question already has answers here:
Concentric circles with CSS
(8 answers)
Closed 6 years ago.
I want to create two concentric circles in CSS. The inner one has a specified width compaired to the outer one, e.g. 50%. Those circles should be responsive, they should scale properly for all screens.
How can I do this? I prefer not to use position:absolute, javascript or jQuery. I think it should be possible.
Thanks!
Pure CSS:
#container {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#circle {
position: absolute;
width: 50%;
height: 50%;
background-color: #000000;
border-radius: 50%;
}
#small-circle{
margin-top: 25%;
margin-left: 25%;
position: absolute;
width: 50%;
height: 50%;
background-color: #e5e5e5;
border-radius: 50%;
}
And the HTML:
<div id="container">
<div id="circle">
<div id="small-circle">
</div>
</div>
</div>
See the Demo
Ah ... svg can help?
You can use CSS on it's elements if needed, but I think you can do it strict and simple:
<!DOCTYPE html >
<html>
<head>
<title> Bla! </title>
</head>
<body>
<svg>
<circle cx="80" cy="80" r="40" fill='red' stroke-width="20" stroke='black'/ >
</svg>
</body>
</html>
http://jsfiddle.net/mG3KJ/1/
#outer {
width: 100%;
height: 100%;
margin: auto;
border-radius: 50%;
background: black;
}
#inner {
width: 50%;
height: 50%;
background: white;
border-radius: 50%;
position: relative;
top: 25%;
left: 25%;
}
I've not been able to find anything on this topic, oddly; I figured it'd be a pretty common issue!
What I've got is a parent div with a border-radius to make the div circular. Nested in that div, I've got several child divs that I would like:
Positioned directly on the visible circular borders (as opposed to the invisible square "border" that surrounds the div -- this jsFiddle hopefully will clarify what I'm trying to say here).
In addition, I'd like to be able to precisely position the child divs along different points of this border (so, something like "position childDiv1 at the 90deg position [or the 105deg position, 120deg, 135deg, etc.] of the circular parent div" instead of having to use top and left or assign absolute pixel values or something).
Still an amateur trying to figure out CSS positioning, so I'm not even sure if any of this is possible, haha. Looking forward to any input you guys can provide!
You can use css3 transform and transform-origin to achieve this
<div id="parent">
<div class="child" id="child1"></div>
<div class="child" id="child2"></div>
<div class="child" id="child3"></div>
<div class="child" id="child4"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
border: 1px dotted #000;
border-radius: 150px;
}
.child {
position: absolute;
width: 30px;
height: 30px;
background-color: #666;
left: 135px;
}
#child1{
transform: rotate(90deg);
transform-origin:50% 150px;
}
#child2{
transform: rotate(105deg);
transform-origin:50% 150px;
}
#child3{
transform: rotate(120deg);
transform-origin:50% 150px;
}
#child4{
transform: rotate(135deg);
transform-origin:50% 150px;
}
http://jsfiddle.net/zSdsg/20/
http://jsfiddle.net/zSdsg/15/
(updated to show that top:0 does not protrude the circle.)
Or http://jsfiddle.net/zSdsg/17/, which just looks a lot cooler :}
EDIT: I think I misunderstood your question. I will update or delete my answer depending on...my answer.
http://jsfiddle.net/zSdsg/14/
would something like this be what your looking for?
#parent {
position: relative;
width: 300px;
height: 300px;
border: 1px dotted #000;
border-radius: 150px;
}
#child {
position: absolute;
width: 30px;
height: 30px;
background-color: #666;
}
#child2 {
position: absolute;
top:35px;
left:40px;
width: 30px;
height: 30px;
background-color: red;
border-radius: 150px;
}
<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>
How to make this type of image popping out of box using XHTML css. without using whole box along with image as a background
alt text http://shup.com/Shup/330963/1104592352-My-Desktop.png
Only globe image will be image.
The globe needs to be a transparent png, and then style the box ignoring the image, padding and a border to get the desired look. Then, whack position: relative on the box, and position: absolute on the image inside it. Then use top: Xpx; left: Xpx; to position the image as you like.
Edit: I've taken the code from the siulamvictor below, and edited it so it'll work for you.
<html>
<head>
<style type="text/css">
.box {
position: relative;
width: 260px;
border: #000 1px solid;
background: #d5d5d5;
padding: 20px;
}
.box img {
display: block;
position: absolute;
z-index: 2;
top: 5px;
right: 5px;
}
</style>
</head>
<body>
<div class="box">
Text here.
<img src="image.png" />
</div>
</body>
</html>
Change the top and right properties to positon the image as you need it.
<div class="globe-box">Some text<div class="globe"></div></div>
.globe-box {
position: relative;
border: 1px solid black;
padding-right: 110px; /* width of globe + some padding */
margin-bottom: 20px; /* how much globe should stick out of the bottom */
}
.globe-box .globe {
width: 100px; height: 100px; /* size of globe */
background-image: url(globe.png);
position: absolute;
bottom: -20px; /* same as margin-bottom above only negative */
right: 10px;
}
try this :)
<html>
<head>
<style type="text/css">
.box {
position: relative;
width: 300px;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #d5d5d5;
height: 60px;
padding-top: 20px;
padding-left: 20px;
}
.image {
display: block;
position: absolute;
z-index: 2;
right: 20px;
}
</style>
</head>
<body>
<div class="box">
Text here.
<img src="image.png" class="image" />
</div>
</body>
</html>