Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am fairly new to css. I want to make concentric circles. How to do it using css? I can create 2 circles separately. I have used position: absolute
Thanks for any help.
Border is a way. but if you want to make another circle, you need something like this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.outer {
display: grid;
place-items: center;
background-color: skyblue;
height: 200px;
width: 200px;
border-radius: 50%;
}
.inner {
background-color: lightgreen;
height: 150px;
width: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
The easiest way would be to make use of a border that is half the width and height of your element itself, in combination with a border-radius that is the full width and height of your element:
.circle {
width: 20px;
height: 20px;
border: 10px solid black;
border-radius: 20px;
}
<div class="circle"></div>
.outer{
width: 200px;
height: 200px;
position: relative;
background-color: #eee;
}
.first-circle{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: red;
}
.second-circle{
width: 90%;
height: 90%;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: black;
}
<div class="outer">
<div class="first-circle"></div>
<div class="second-circle"></div>
</div>
Next time please try to google about it before submit a question, and please you can close this request now.
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
span {
border: solid 1px transparent;
border-radius: 50%;
box-shadow: 0px 0px 0px 10px red, 0px 0px 0px 20px green, 0px 0px 0px 30px yellow, 0px 0px 0px 40px blue, 0px 0px 0px 50px skyblue, 0px 0px 0px 60px pink;
width: 100px;
height:100px;
margin: 3em;
}
<div class"container"> <span></span></div>
Related
In my project, I allow users to upload profile pictures. I want these pictures to have a circular border, like instagram profile pictures do. Does anybody know how to add this affect?
I have tried the border-radius property, however this makes some images with white/transparent backgrounds looking like they have been cropped, and doesn't have the expected outcome.
Does anybody know how to add a circular type border to any image that is upload by a user? Thank you.
HTML CODE:
.fixedImage {
position: relative;
left: 70px;
width: 25px;
top: 50px;
height: 25px;
border-radius: 50%;
}
Use a border and a box-shadow...
div {
text-align: center;
display: inline-block;
padding: 2em 3em;
border: 1px solid lightgrey;
background: lightgreen;
}
img {
display: block;
border-radius: 50%;
border: 5px solid transparent;
box-shadow: 0 0 0 5px red;
}
.white {
border-color: white;
}
<div>
Transparent border
<img src="http://www.fillmurray.com/g/150/150" alt="">
</div>
<div>
White border
<img src="http://www.fillmurray.com/g/150/150" alt="" class="white">
</div>
Instead of img, you can use div and have your image in background. This will allow you to add a background color of your choice to avoid the transparency.
Example:
<div class="fixedImage" style="background-image: url(img.png)"></div>
CSS:
.fixedImage {
position: relative;
top: 50px;
left: 70px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
background-size: 100px 100px;
}
I think https://medium.com/#biancapower/how-to-make-a-rectangle-image-a-circle-in-css-2f392bc9abd3 is what you are looking for.
A div around the image gets the border-radius: 50%
HTML:
<div class="image-cropper">
<img src="https://www4.lunapic.com/editor/premade/transparent.gif">
</div>
CSS:
img {
height: 200px;
width: 200px;
padding: 20px;
}
.image-cropper {
width: 240px; // it seems you need to add the padding twice here
border-radius: 50%;
border: 1px solid red;
position: relative;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/bdL8zmu1/
Without background color:
https://jsfiddle.net/94z27bdL/
Is it possible creating a round shadow (a neat circle with the spread value set to zero) under a square element?
E.g. a DIV with no rounded borders.
I have the following element, which I cannot add further markup to:
<div class="square"></div>
In addition, I cannot use :before and :after pseudo-elements, as they are already styled. That's why I am trying to adapt the box-shadow.
In the example below what I would like to achieve (obtained with a ":before" pseudo-element, which I cannot use).
.circle {
width: 20px;height: 20px; margin: 40px 0 0 40px;
display: inline-block; border:1px solid #000;
position: relative; top: 0; left: 0; background: #fff;
}
.circle:before {
content: ''; display: block; position: absolute; top: -15px; left: -15px;
width: 50px; height: 50px; border-radius: 50%; background: #ddd;
z-index: -1;
}
<div class="circle"></div>
I used the :before pseudo-element only to show the result.
I think I found a quite good solution:
.wrapper {
margin-left: 5rem;
margin-top: 5rem;
}
.element {
width: 14px;
height: 14px;
border: 2px solid #5f5f5f;
border-radius: 2px;
background-color: #fff;
}
.element:before {
content: '';
position: absolute;
width: 14px;
height: 14px;
z-index: -1;
border-radius: 50%;
background-color: transparent;
opacity: 0.2;
box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, .6);
}
<div class="wrapper">
<div class="element"></div>
</div>
I hope it will be a helpful answer for you, - Marta.
There are a couple of ways to go about it. I'd simply put the square div in a bigger container div, then style it as you wish. I've included a couple of examples for you.
I hope this helps! - James.
.square {
width: 20px;
height: 20px;
display: block;
position: relative;
background: #fff;
opacity: 1;
margin: 5px 0 0 5px;
}
.circle,.circle-with-spread {
display: block;
background-color: #000;
opacity: 0.3;
width: 30px;
height: 30px;
border-radius: 15px;
position: absolute;
}
.circle-with-spread {
box-shadow: 0 0 5px 5px rgba(0,0,0,1);
}
<!-- Example Circle Shadow -->
<div class="circle">
<div class="square"></div>
</div>
<!-- Spacing makes it look nice -->
<br />
<br />
<br />
<!-- Second Example -->
<div class="circle-with-spread">
<div class="square"></div>
</div>
I can't seem to be able to get the third "promobox" to come up to the first row with the other two, it just goes onto the next row but it is set to a percentage so it shouldn't matter.
I have tried to fix this with an answer from another forum but I simply can't do it.
Help would be great.
Thanks heaps.
<html>
<head>
<style>
* {
margin: 0px; padding: 0px; border: 0px;
}
#container {
width: 100%; height: 500px;
max-width: 1440px; min-width: 1024px;
margin: 0px auto;
border: 2px solid blue;
text-align: center;
}
.bigbox {
height: 530px;
background-image: url(images/photos/landscape-1440.jpg);
background-position: 50% 50%;
border: 2px solid red;
}
.promobox {
width: 25%;
height: 200px;
display: inline-block;
background-position: 50% 0%;
border: 2px solid green;
margin: 0px;
padding: 0px;
vertical-align: top;
}
.promobox div {
height: 200px;
border-color: #FFF;
border-style: none;
}
div {
text-align: center;
position: relative;
}
div a {
position: absolute;
bottom: 10px; right: 10px;
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
#pb1 {width: 25%;}
#pb2 {width: 50%;}
#pb3 {width: 25%}
</style>
</head>
<body bgcolor="white">
<div id="container">
<div class="bigbox">
<div class="promobox" id="pb1">#</div>
<div class="promobox" id="pb2">#</div>
<div class="promobox" id="pb3">#</div></div></div></body></html>
You have two things that could mess the 3 boxes getting aligned next to each other.
The given border:2px solid green; and the display: inline-block;
You cant have the boxes have a total of 100% when using border.. because the borders need to be a part of the 100%.
.promobox {
width: 25%;
height: 200px;
float:left; /*Change the display:inline-block to this */
background-position: 50% 0%;
margin: 0px;
padding: 0px;
vertical-align: top;
}
Working DEMO (without the borders)
You are not accounting for the border of the divs thus you're going over the 100% width. The simplest solution would be either removing the border or having the total width less than or equals to 98%
e.g.
#pb1 {width: 24%;}
#pb2 {width: 50%;}
#pb3 {width: 24%}
Finaly i make an answser of my comment : DEMO with the fix below
In your HTML you have empty space in between div, it generates a white-space once you display your div as inline-block.
25%+50%+25% + 2 white-space +borders is more than 100% .
borders can be included using box-sizing, and white-space erased from HTML with <!--comment--> or via CSS setting font-size to 0 and back to 16px or so for .promobox.
Update for your CSS:
.bigbox {
font-size:0;
}
.promobox {
box-sizing:border-box;/* add vendor prefix where needed */
font-size:16px;/* fallback*/
font-size:1rem;
}
Try this:
<html>
<head>
<style>
* {
margin: 0px; padding: 0px; border: 0px;
}
#container {
width: 100%; height: 500px;
max-width: 1440px; min-width: 1024px;
margin: 0px auto;
text-align: center;
}
.bigbox {
height: 530px;
background-image: url(images/photos/landscape-1440.jpg);
background-position: 50% 50%;
}
.promobox {
width: 25%;
height: 200px;
display: inline-block;
background-position: 50% 0%;
margin: 0px;
padding: 0px;
vertical-align: top;
float:left;
}
.promobox div {
height: 200px;
border-color: #FFF;
border-style: none;
}
div {
text-align: center;
position: relative;
}
div a {
position: absolute;
bottom: 10px; right: 10px;
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
#pb1 {width: 25%;}
#pb2 {width: 50%;}
#pb3 {width: 25%}
</style>
</head>
<body bgcolor="white">
<div id="container">
<div class="bigbox">
<div style='background:red' class="promobox" id="pb1">#</div>
<div style='background:green' class="promobox" id="pb2">#</div>
<div style='background:yellow' class="promobox" id="pb3">#</div></div></div></body></html>
here's a working demo of two divs in a row
<div style="text-align:center;">
<div style="border:1px solid #000; display:inline-block;">Div 1</div>
<div style="border:1px solid red; display:inline-block;">Div 2</div>
Demo
I don't know why but when the height of the content_second_box is set higher then the height of the screen resolution then the whole page shifts left by a few pixels. Once the div reaches the bottom of the screen it shifts, when the height does not reach then it is ok.
I have tried many things but nothing has worked. Does anyone please know why?
CSS is as follows:
body {
background-color: white;
}
#container {
position: relative;
width: 1300px;
margin-left: auto;
margin-right: auto;
padding: 10px 50x 30px 50px;
}
#content {
width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 40px 0px 0px 0px;
/*text-align: center;*/
}
#content_first_box {
width: 225px;
height: 50px;
/* min-height: 160px; */
/* height: auto !important; */
background-color: #ff8b00; /*#9caad6;*/
border-radius:5px;
box-shadow: 3px 3px 5px #888888;
padding: 5px 5px 5px 5px;
overflow: hidden;
float: left;
text-align: center;
margin-right: 15px;
}
#content_second_box {
width: 225px;
height: 500px;
/* min-height: 160px; */
/* height: auto !important; */
background-color: #79bbff; /*#9caad6;*/
border-radius:5px;
box-shadow: 3px 3px 5px #888888;
padding: 5px 5px 5px 5px;
overflow: hidden;
float: left;
text-align: center;
margin-right: 15px;
}
HTML file is as follows:
<body>
<div id="container">
<div id="content">
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
</div>
</div>
</body>
The scroll bar appears once the page is longer than the viewport. This causes all content to shift left to allow for the scrollbar.
You can get rid of the content shift by always showing the scrollbar in browser as -
html{
overflow-y: scroll;
}
Here is a fiddle of the problem. http://www.jsfiddle.net/PL6KX/
I do not know where the problem is. Would appreciate help.
Thanks.
I want to center everything proportionally from the edges. Horizontal center.
HTML:
<div id="firstleft-box"></div>
<div id="secondleft-box"></div>
<div id="firstright-box"></div>
<div id="secondright-box"></div>
CSS:
#firstleft-box {
position: absolute;
display:block;
left: 20%;
border: 2px solid black;
width: 100px;
height: 100px;
}
#secondleft-box {
position: absolute;
display:block;
left: 40%;
border: 2px solid black;
width: 100px;
height: 100px;
}
#firstright-box {
position: absolute;
display:block;
left: 60%;
border: 2px solid black;
width: 100px;
height: 100px;
}
#secondright-box {
position: absolute;
display:block;
left: 80%;
border: 2px solid black;
width: 100px;
height: 100px;
}
Use float to get divs next to each other, margin to make space between them and then wrap one div around them and center it with margin: 0px auto; your approach is too complicated
See the following JS Fiddle for a demonstration on why your code is not producing the output you are expecting.
http://jsfiddle.net/PL6KX/2/
Basically, you are aligning the left side of each box at 20, 40, 60, 80 etc. You are assuming that it would align the center of your boxes. What I have done in the above fiddle is to create 5 boxes 20% wide so that the points where they meet and touch each other represent 20%, 40%, 60% and 80%. As you can see your boxes at the top are aligning their left edge to those percentages.
What you need: (third set of boxes in the fiddle)
http://jsfiddle.net/PL6KX/4/
HTML:
<div class="container">
<div id="new-box"></div>
<div id="new-box"></div>
<div id="new-box"></div>
<div id="new-box"></div>
</div>
CSS:
.container {
margin: 0 auto;
width: 450px;
border: 1px solid red;
overflow: hidden;
clear: both;
margin-top: 20px;
}
#new-box {
box-sizing: border-box;
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid black;
}