I need to create a circle with an image inside, so far I almost achieved this but I want set the content dimension too, this is my code:
.circle {
position: absolute;
z-index: 10;
top: -25%;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
content: url("logo");
}
<img class="img-responsive center-block circle">
this is a fiddle.
As you can see I have to display only half of the circle, but the problem is that the logo is not entire visible. How can I manage this?
To fix this you needed to give the img a z-index greater than the circles and then center it ontop of the circle.
Here's the code:
.circle{
background-color: red;
position: absolute;
top: -250px;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align:center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
}
.img {
content: url("https://www.google.it/logos/doodles/2019/rugby-world-cup-2019-opening-day-6753651837108235-l.png");
z-index: 10;
position: absolute;
left: 50%;
transform : translateX(-50%);
}
<div class="circle">
</div>
<div class="img">
</div>
here is the jsfiddle fix: http://jsfiddle.net/t5L49f7g/
Hope this helps!
Related
im trying to create this kind of border, is there a way to do it with css? thanks for the help enter image description here
i have no idea how to even search for this...
Here is one example using pseudo-elements.
body {
background: #000;
}
div {
height: 300px;
border: 1px solid orange;
position: relative;
max-width: 600px;
margin: auto;
}
div:after {
position: absolute;
top: -1px;
left: 40%;
transform: translateX(-50%);
content: '';
background: #000;
width: 200px;
height: 1px;
}
div:before {
content: "";
position: absolute;
top: 20px;
left: 0%;
transform: translateX(-50%);
background: #000;
height: 100px;
width: 3px;
}
<div></div>
Probably the easiest approach is to have a div, with a border, and then set that div's position as relative. Then put 1 or more divs within that div positioned absolute and size them and position them to cover up parts of the border as shown above. Then put the div content on a higher z-level than those divs that cover part of the border
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
padding: 20px;
}
.card {
position: relative;
width: 75%;
border-style: solid;
border-width: 1px;
border-color: red;
padding: 10px;
}
.block1 {
position: absolute;
z-index: 2;
width: 50%;
height: 2px;
background-color: white;
top: -2px;
left: 10%;
}
.block2 {
position: absolute;
z-index: 2;
width: 2px;
height: 60%;
background-color: white;
top: 5%;
left: -2px;
}
.content {
z-index: 3;
}
<div class="container">
<div class="card">
<div class="block1"></div>
<div class="block2"></div>
<div class="content">
<h1>Something</h1>
<h3>random text<h3>
<hr>
<h3>random text<h3>
<hr>
<h3>random text<h3>
<hr>
<h3>random text<h3>
<hr>
<h3>random text<h3>
<hr>
<h3>random text<h3>
</div>
</div>
</div>
Just mess around with the top and left values for the block1 and block2 classes to get the effect you would like
Heres what I did and it works - also with pseudo elements
Thank you all for your answers!
.border-one:after{
content: "";
border-top: 7px solid #1B1B1B;
width: 300px;
position: absolute;
top: -22px;
left: 183px;
margin: 20px;
display: block;
z-index: 99999;}
.border-one:before{
content: "";
border-left: 7px solid #1B1B1B;
height: 140px;
position: absolute;
top: 72px;
left: -9px;
margin: 20px;
display: block;
z-index: 99999;}
I have set up a modal for phots, so when i click on a small photo i get a larger photo up in a modal, the modal has position: fixed; and the modal-content has position: absolute; i can center it with margin: auto; left: 0; right: 0;but then the width goes all the way to the right and left, i want the modal content width to be the same as the photo inside it or the content of the modal-content
my code:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 30px;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
margin-bottom: 30px;
margin: auto;
border: 1px solid #888;
}
.modalimg {
position: relative;
text-align: center;
}
.modalimg img{
max-width: 100%;
max-height: 400px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
its maybe a bit messy now but i have tried alot of different things with no luck..
This is what I use when I center an absolute-positioned element, this works for me all the time:
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
here you are please
.element {
position: absolute;
top: 15px;
z-index: 2;
width: 40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin: 0 auto;
left: 0;
right: 0;
background: red;
color: #fff;
text-align: center;
}
<div class="element">
text..
</div>
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
border: 1px solid #888;
}
to align absolute div to center
left: 0;
right: 0
text-align: center
this will align the div in center.
Here's a possible solution that uses:
absolute positioning on the content container (.modal-content)
doesn't use absolute|fixed on the actual content
The content container (.modal-content) will grow along with its content. Finally, it's moved back to the middle using transform: translate(-50%, -50%);:
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
border: 2px solid red;
transform: translate(-50%, -50%);
}
<div class="modal">
<div class="modal-content">
<img src="//placehold.it/200x200" alt="">
</div>
</div>
Demo
Try before buy
I want to create the following shape:
Important: if I use "Border Radius" I get this (and I do not want this result):
Here are DEMO
HTML:
<div id="gray">
<div id="red"></div>
</div>
CSS:
#gray{
height: 100%;
background-color: #ccc;
overflow: hidden;
}
#red{
width: 150%;
height: 150%;
background-color: #f00;
border-radius: 100%;
top: 50%;
left: -25%;
right: 0;
position: relative;
}
Something like this would be roughly equivalent:
http://jsfiddle.net/ny4Q9/
css:
.curvetop {
position: relative;
margin-top: 80px;
background: red;
width: 100%;
height: 400px;
z-index: 1;
}
.curvetop:after {
top: -80px;
display: block;
position: absolute;
content: '';
border-radius: 50%;
background: red;
width: 100%;
height: 170px;
}
markup:
<div class="curvetop"></div>
By using border-radius with a value of 50% you can create a circle.. which, as per your question you can attach to the top of another element by way of a pseudo element.
You can use border radius
http://jsfiddle.net/wULyB/
<div id="out">
<div id="in"></div>
</div>
CSS
#out{
width: 100px;
height: 100px;
overflow: hidden;
background: green;
position: relative;
}
#in{
width: 200px;
height: 200px;
border-radius: 100px;
background: black;
position: absolute;
left: -50px;
top: 30px;
}
You can play around with the numbers but you get the idea
I want to make a solar system and I've used two divs around my sun so far; a div to specify the orbit path, and earth, to follow that path. The problem is that I want to place the #earth div onto the #earth-orbit div which has a border-radius of 50%. I've wrapped #earth-orbit around #earth like this:
<div id='sun'>
</div>
<div id='earth-orbit'>
<div id='earth'>
</div>
</div>
Then, in my css I have this so far:
#sun
{
margin: auto;
height: 200px;
width: 200px;
background-color: orange;
position: absolute;
border-radius: 50%;
top: 0; left: 0; bottom: 0; right: 0;
}
#earth-orbit
{
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
position: absolute;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
height: 500px;
width: 500px;
}
#earth
{
height: 50px;
width: 50px;
background-color: white;
border-radius: 50%;
}
How do I place the #earth onto the curved border of the #earth-orbit?
Edit: It's easy to do it when you're not trying to simultaneously keep the whole system in the middle of the screen
<style>
#sun
{
margin: auto;
height: 200px;
width: 200px;
background-color: orange;
position: absolute;
border-radius: 50%;
top: 0; left: 0; bottom: 0; right: 0;
}
#earth-orbit
{
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
position: absolute;
border-width: 2px;
border-style: dotted;
border-color: blue;
border-radius: 50%;
height: 500px;
width: 500px;
}
#earth
{
position:absolute;
left:130px;
height: 50px;
width: 50px;
background-color: red;
border-radius: 50%;
}
</style>
<div id='sun'>
</div>
<div id='earth-orbit'>
<div id='earth'>
</div>
</div>
If you want just make static image, you can absolute position #earth:
#earth
{
position:absolute;
top: -25px;
height: 50px;
width: 50px;
background-color: white;
border-radius: 50%;
}
and do not forget about:
#earth-orbit
{
top: 25px; left: 25px; bottom: 25px; right: 25px;
position: absolute;
}
I drew a cloud via CSS3 using different div tags I am trying to add a border to the whole shape but I am having trouble since every shape get its own border how can I apply a border to the whole cloud?
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: #4ca3ff;
}
#cloud {
position: absolute;
}
#bottom_c {
position: relative; top: 200px; left: 500px;
width: 350px;
height: 150px;
background-color: #fff;
border-radius: 100px;
border: solid 5px black;
z-index: 100;
}
#right_c{
position: absolute; top: 140px; left: 640px;
width: 150px;
height: 150px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
#left_c{
position: absolute; top: 170px; left: 550px;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
Image:
You can do it without any additional elements. Just use the ::before and ::after pseudo-elements with the same size and round shape as the top cloud bubbles. z-index keeps everything in the right layer.
Demo:
Output:
CSS:
body{
background-color: #4ca3ff;
}
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
Thank you for the original solution! I needed to create multiple clouds and dynamically resize and recolor them, so I adapted to original solution as follows:
I made the clouds resizable by using percentages values for the height, width, top and left properties. The .cloud class uses padding-top to adjust the height of the cloud relative to the cloud's width.
I made the :before and :after pseudo-elements divs.
I changed the id selectors to class selectors
And I reorganized the properties so they're easier to read.
I hope this helps someone. Here's the code:
Output
I don't yet have the reputation to post images :/. So here's a link to the output: http://imgur.com/nN9dBiQ
CSS:
.cloud {
position: relative;
width: 100%;
padding-top: 57.5%;
box-sizing: border-box;
}
.cloud_bottom,
.cloud_left,
.cloud_right {
border: solid 5px black;
}
.cloud_bottom,
.cloud_left,
.cloud_right,
.cloud_leftCircle,
.cloud_rightCircle {
background-color: #fff;
}
.cloud_bottom {
position: absolute;
top: 43.48%;
height: 65.2%;
width: 87.5%;
border-radius: 100px;
z-index: 0;
}
.cloud_left {
position: absolute;
top: 30.43%;
left: 12.5%;
height: 43.48%;
width: 25%;
border-radius: 100%;
z-index: -1;
}
.cloud_right {
position: absolute;
top: 17.39%;
left: 35%;
height: 65.2%;
width: 37.5%;
border-radius: 100%;
z-index: -1;
}
.cloud_leftCircle {
position: absolute;
top: 32.61%;
left: 13%;
height: 43.48%;
width: 25%;
border-radius: 50%;
z-index: 1;
}
.cloud_rightCircle {
position: absolute;
top: 23.48%;
left: 35%;
height: 65.21%;
width: 37.5%;
border-radius: 50%;
z-index: 1;
}
HTML:
<div class="firstCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
<div class="secondCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
JavaScript:
function updateCloudColor(cloudElement, color) {
cloudElement.children().css("background-color", color);
}
$(window).load(function () {
updateCloudColor($(".firstCloud"), "red");
updateCloudColor($(".secondCloud"), "blue");
});