I have been tasked with turning this rough idea into a live page.
While I have a basic structure established, I am wondering the best way to go about creating the curved lines that connect the months.
Should I just create images and over lay them?
Is there a way to draw them with some kind of scripting/coding?
Canvas?
I don't know the best way to do this.
I just put this together to show you that it is very possible and there are probably other ways to do it.
#upper-line {
border: solid 1px #000;
width:80%;
height: 250px;
border-radius: 50%;
left:55px;
border-right: none;
border-top: none;
border-bottom: none;
position: absolute;
top: 100px;
}
#lower-line {
border: solid 1px #000;
width: 80%;
height: 250px;
border-radius: 50%;
top: 340px;
left: -60px;
border-left: none;
border-top: none;
border-bottom: none;
position: absolute
}
#content-1 {
position: absolute;
left: 180px;
top: 75px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
text-align: center;
background-color: orange;
}
#content-2 {
position: absolute;
left: 40px;
top: 200px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
text-align: center;
background-color: #98879A;
}
#content-3 {
position: absolute;
left: 400px;
top: 400px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
text-align: center;
background-color: #637DBA;
}
<div id="upper-line"></div>
<div id="lower-line"></div>
<div id="content-1">content 1</div>
<div id="content-2">content 2</div>
<div id="content-3">content 3</div>
Note: This is just an example, you have to put in a little work to get it to work for you. The code could be even cleaner.
See how it works on fiddle
You should try SVG.
JsPlumb its a great library to make connections between elements.
http://jsplumb.org
Related
I am trying to create something similar to a semi circle inside a rectangle something like this, the ellipse in the background.
expected design
I am able to implement the circle inside the rectangle but couldn't find a way to cut out the extra part of the ellipse, can someone please help me with achieving the required design?
achieved
.rectangle {
height: 110px;
width:200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
}
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
You want to hide the part of the circle that overflows the rectangle
You can do this by setting overflow: hidden; on the rectangle.
.rectangle {
height: 110px;
width: 200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle {
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
}
<div class="rectangle">
<div class="circle">
</div>
</div>
.rectangle{
height: 110px;
width:200px;
background-color: #313131;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle{
position: absolute;
right: 3px;
top: 1px;
width: 93%;
height: 95%;
border-radius: 50%;
background: #404040;
}
.circle-border{
border-radius: 50%;
position: relative;
right: -129px;
top: -6px;
width: 41%;
height: 70%;
border: 2px solid #404040;
}
<div class="rectangle">
<div class="circle-border">
<div class="circle">
</div>
</div>
</div>
I'm working on simple Escape room game using HTML, CSS and JavaScript where every item in room is figure created by CSS. But I'm stuck trying to create responsive design. Whole room should change size with different screens but still be inline. I tried grid and media queries but it's doesn't work with my figures. For now it’s just one size and a part of code in HTML and CSS looks like these:
html {
height: 100%;
}
body {
background-color: #051217;
background-image: radial-gradient(circle, #071e26, #051217);
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#door {
width: 180px;
height: 380px;
display: fixed;
position: absolute;
right: 50px;
bottom: 2px;
border: 5px solid white;
background-color: #051217;
background-image: radial-gradient(circle, #071e26, #051217);
}
#handle {
width: 10px;
height: 10px;
border-radius: 50%;
border: 3px solid white;
background-color: #051217;
background-image: radial-gradient(circle, #071e26, #051217);
position: absolute;
bottom: 50%;
left: 5%;
}
#keypad {
width: 25px;
height: 40px;
border: 2px solid white;
position: absolute;
bottom: 37%;
left: 3%;
}
#input {
width: 20px;
height: 5px;
border: 1px solid white;
position: absolute;
left: 1%;
top: 3%;
}
.keypad {
width: 20px;
height: 28px;
border: 1px solid white;
position: absolute;
top: 19%;
left: 1%;
}
<div class="container">
<!-- Door -->
<div id="door">
<div id="handle"></div>
<div id="keypad" onmouseover="keypadMouseOver()" onmouseout="keypadMouseOut()">
<img class="keypad" src="static/images/keypad.png">
<div id="input"></div>
</div>
</div>
</div>
This may be a stupid question, but I have to clarify this fact. So this is my concern. I can style two div elements to look like below.
.element-container{
display: flex;
position: relative;
width: 300px;
height: 100px;
}
.element{
z-index:1;
width: 100%;
height: 100%;
position: absolute;
background-color: Transparent;
background-repeat:no-repeat;
border-radius: 20px;
display: inline-block;
border: 2px solid black;
}
.element-shadow{
z-index: -1;
top: 10%;
left: 4%;
border-radius: 20px;
background-color: yellow;
height: 100%;
width: 100%;
position: absolute;
}
<div class="element-container">
<div class="element"></div>
<div class="element-shadow"></div>
</div>
my question is can we do the same using ::after pseudo element. Basically can we add an html element after some other element rendered in to DOM (make the shadow effect after element is created, so someone does not need to concern about the actual size of the element when use it somewhere if the shadow element created with the same styles but with ::after pseudo element)
#Telary's answer is acceptable with this upper part of the question(original question) But now it directs me to another question, I was try to did the same with an <button>, but it does not work as expected. what did I miss here? Below code is my new problem
.but{
position: absolute;
background-color: Transparent;
background-repeat:no-repeat;
cursor:pointer;
outline:none;
border-radius: 500px;
display: inline-block;
border: 2px solid black;
color: black;
font-size: 250%;
padding: 20px 100px;
}
.but:after{
content:'';
z-index: -1;
top: 8%;
left: 3%;
border-radius: 500px;
display: inline-block;
background-color: rgba(140,122,230,1);
position: absolute;
}
<button class="but">GO</button>
Is it because I removed the outer <div> element?
You can use the code below to achieve the needed effect:
.element-container{
display: flex;
position:relative;
width: 300px;
height: 100px;
z-index: 1;
}
.element{
width: 100%;
height: 100%;
position: absolute;
background-color: Transparent;
background-repeat:no-repeat;
border-radius: 20px;
display: inline-block;
border: 2px solid black;
}
.element:after{
content:'';
display: inline-block;
top: 10%;
left: 4%;
border-radius: 20px;
background-color: yellow;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}
<div class="element-container">
<div class="element"></div>
</div>
You need to remove z-index in ".element" selector, to put it on the top of "shadow" layer.
What i need to do is on image below:
I do not want use SVG at all. I think it is two divs with border-radius 50%. But how I merge them like on image? Can you solve this or give an advice?
This is a simpliest way to do it, may be you can improve it for your needs
#main {
width: 80px;
border-radius: 50%;
height: 80px;
border: 3px solid blue;
}
#background {
background: grey;
border-radius: 50%;
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
#small {
background: grey;
width: 30px;
border-radius: 50%;
height: 30px;
border: 3px solid blue;
margin-top: -30px;
margin-left: 50px;
}
<div id="main">
<div id="background"></div>
</div>
<div id="small"></div>
How could I center the blue box inside the red one ?
I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks !
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
If you're able to change the <span> tag to a <div>
<div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
Then this piece of CSS should work.
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.
You could add left:50px to #abs if that's all you want...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
If you are going to define dimensions like that (200px x 300px and 300px x 400px), here's how it can be centered:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
You can check at my solution here at http://jsfiddle.net/NN68Z/96/
I did the following to the css
#rel {
position: relative;
top: 10px;
left: 20px;
right: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#abs {
display: block;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}
This should work
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}