I'm trying to create a timeline in WordPres like this:
I managed to create the vertical line in the middle of the content by using the following code:
.here:after {
content:"";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
border-left: 40px dotted #44b072;
transform: translate(-50%);
}
div {
margin: 10px auto;
width: 60%;
height: 100px;
position:relative;
text-align:center
}
<div class="here"></div>
But how can I add the numbers on top of the vertical line, and how do I add the line at the left or right of the number. I thought of using pseudo elements to achieve that. But haven't figured it out yet.
Usually I would suggest to use svg for complicated graphics like these, but here is an example how I solved it with pure html/css.
.timeline {
display: flex;
flex-direction: column;
position: absolute;
top: 25%;
left: 50%;
padding-top: 20px;
}
.timeline__backroad {
background-color: #45B072;
width: 50%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
}
.timeline__backroad:before {
content: '';
border-left: 2px dotted white;
height: 100%;
position: absolute;
left: 50%;
}
.timeline__circle {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #7D206A;
border-radius: 50%;
font-size: 30px;
color: white;
margin-bottom: 50px;
z-index: 2;
}
.timeline__circle.is--left:before {
content: '';
border: 2px solid #7D206A;
width: 25px;
position: absolute;
left: -25px;
}
.timeline__circle.is--right:after {
content: '';
border: 2px solid #7D206A;
width: 25px;
position: absolute;
left: 50px;
}
<div class="timeline">
<div class="timeline__backroad"></div>
<div class="timeline__circle is--left">5</div>
<div class="timeline__circle is--right">6</div>
</div>
Related
I made a bulb in pure CSS and I want the bulb to change color on click. But my bulb shape consists of two shapes, so I cannot hover over both. Is there a way to solve this without using JavaScript, sticking to CSS only? Is there maybe a way to create this yellow shape without the need to combine two? Or any other way I could have the hover effect working.
.box {
position: relative;
margin: auto;
display: block;
margin-top: 8%;
width: 600px;
height: 600px;
background: white;
}
#circle {
position: absolute;
width: 40%;
height: 40%;
background: yellow;
top: 20%;
left: 30%;
margin: 0 auto;
border-radius: 50%;
}
#trapezoid {
position: absolute;
background: yellow;
height: 30%;
width: 40%;
left: 30%;
top: 42%;
-webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
#bottom1 {
position: absolute;
height: 5%;
width: 25%;
background: grey;
top: 72%;
left: 37.5%;
z-index: 1;
}
#bottom1:before {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
left: -8%;
}
#bottom1:after {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
right: -8%;
}
#bottom2 {
position: absolute;
height: 5%;
width: 22%;
background: grey;
top: 78%;
left: 39%;
}
#bottom2:before {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
left: -8%;
}
#bottom2:after {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
right: -8%;
}
#bottom3 {
position: absolute;
height: 5%;
width: 18%;
background: grey;
top: 84%;
left: 41%;
z-index: 1;
}
#bottom3:before {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
left: -8%;
}
#bottom3:after {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
right: -8%;
}
#shine {
width: 20%;
height: 20%;
background: white;
border-radius: 50%;
top: 20%;
position: absolute;
left: 18%;
}
.halfCircle {
height: 100px;
width: 100px;
border-radius: 0 0 90px 90px;
}
#halfCircle {
height: 45px;
width: 90px;
border-radius: 0 0 90px 90px;
background: black;
margin: 0 auto;
top: 88%;
position: relative;
}
.drop {
width: 5%;
height: 5%;
position: absolute;
border: 15px solid orange;
}
#left {
left: 38%;
top: 45%;
border-radius: 50% 50% 0 50%;
}
#left:after {
content: "";
height: 110px;
width: 24px;
border: 15px solid orange;
display: block;
position: absolute;
left: 100%;
top: 100%;
}
#right {
right: 38%;
top: 45%;
border-radius: 50% 50% 50% 0;
}
#circle:hover {
background: red;
}
#trapezoid:hover {
background: red;
}
<div class='box'>
<div id='circle'>
<div id='shine'></div>
</div>
<div id='trapezoid'></div>
<div id='bottom1'></div>
<div id='bottom2'></div>
<div id='bottom3'></div>
<div id='halfCircle'></div>
<div class='drop' id='left'></div>
<div class='drop' id='right'></div>
<div id='wire'></div>
</div>
You don't have to apply the :hover directly to the element that you want to change. You can hoist it to a wrapping element and apply it there.
Considering your example, your selectors would likely be something along the lines of:
.box:hover #circle {
background: red;
}
.box:hover #trapezoid {
background: red;
}
Consider this concrete example. Hovering either of the nested <div> cause the sibling <div> to also change color because #container is being :hovered.
#foo,
#bar {
height: 20px;
background-color: green;
border: 1px solid white;
}
#foo:hover,
#bar:hover {
background-color: blue;
border: 1px dashed yellow;
}
#container:hover #foo,
#container:hover #bar {
background-color: red;
}
<div id="container">
<div id="foo">foo</div>
<div id="bar">bar</div>
</div>
In my webpage I have a left and a right part, they are not on the same nesting though. I want the left part to fill 25% of the page and the right part to fill the rest of the width.
Simply putting 75% isn't cutting it for me because the right part also needs a 30px right margin. A right padding won't work because my content and background-color overflows then.
Do you have an idea how to solve this?
The .left (blue) and .right(yellow) div should always perfectly meet each other and the .right needs to keep it's 30px right margin.
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: 75%;
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
It's not a good idea to create a layout using only absolute position. You may better rely on flexbox for example:
body {
height: 100vh;
margin: 0;
display: flex;
background: grey;
}
.left {
flex: 1;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
flex: 4;
margin-top: 45px;
margin-right: 30px;
background-color: yellow;
}
<div class="left">TEST</div>
<div class="right">TEST</div>
But in case you want to keep your code, you need to consider the margin within the calculation of the width:
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: calc(75% - 30px);
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
I have a cloud made with HTML/CSS and I'm trying to include some text in the center of it. But I'm having trouble positioning it and having it overlap over the cloud divs.
#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;
}
.text {
overflow: hidden;
position: absolute;
z-index: -2;
}
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c">
<p class="text">
this is some text
</p>
</div>
<div id="left_c">
</div>
</div>
Not entirely sure how to make it work, I thought the z-index would allow the text to take "priority" and show first, but it doesn't seem to be working. Do I need to insert the p tags inside another div? Any suggestions would be appreciated!
Remove the text element from its current nesting level. Just make it a sibling of the border divs. Still one overall container.
#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;
}
.text {
position: absolute;
top: 40px;
left: 135px;
z-index: 2;
}
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
<p class="text">this is some text</p>
</div>
If you change your html to:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
<p class="text">
this is some text
</p>
and the text element in css to:
.text {
overflow: hidden;
position: absolute;
z-index: 2;
top:200px;
right:200px;
}
then it works.
I'm designing a logo in CSS3.
I have made a class .logo with particular height and width. Rest of the div inside .logo class will resize its position relative to parent div.
This is my CSS code.
.logo {
width: 200px;
height: 200px;
position: fixed;
}
.logo .vertical-left {
width: 25px;
height: 60%;
position: absolute;
bottom: 0;
background-color: #09aaba;
}
.logo .vertical-right {
width: 25px;
height: 65%;
background-color: #09aaba;
margin-left: 60%;
top: 0;
position: absolute;
}
.logo .vertical-right2 {
width: 25px;
height: 60%;
background-color: #ba1dd4;
margin-left: 60%;
top: 0;
position: absolute;
}
.logo .horizontal-top {
width: 100%;
height: 25px;
background-color: #09aaba;
position: absolute;
top: 30%;
border-radius: 10px 0;
}
.logo .horizontal-top2 {
width: 60%;
height: 25px;
background-color: #ba1dd4;
position: absolute;
top: 30%;
right: 0;
}
.logo .horizontal-bottom {
width: 72.5%;
height: 25px;
background-color: #09aaba;
position: absolute;
top: 65%;
border-radius: 10px 0;
}
/* triangle */
.logo .arrow-left {
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
position: absolute;
top: 30%;
left: 35%;
border-right:10px solid #ba1dd4;
}
.logo .arrow-down {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 13px solid transparent;
position: absolute;
top: 60%;
right: 27%;
border-top: 10px solid #ba1dd4;
}
<div class="logo">
<div class="vertical-left"></div>
<div class="vertical-right"></div>
<div class="vertical-right2"></div>
<div class="horizontal-top"></div>
<div class="horizontal-top2"></div>
<div class="horizontal-bottom"></div>
<div class="arrow-left"></div>
<div class="arrow-down"></div>
</div>
Here .logo div size is 200px X 200px. When I change it to 300px X 300px the inside div are messed up as in following snippet.
.logo {
width: 300px;
height: 300px;
position: fixed;
}
.logo .vertical-left {
width: 25px;
height: 60%;
position: absolute;
bottom: 0;
background-color: #09aaba;
}
.logo .vertical-right {
width: 25px;
height: 65%;
background-color: #09aaba;
margin-left: 60%;
top: 0;
position: absolute;
}
.logo .vertical-right2 {
width: 25px;
height: 60%;
background-color: #ba1dd4;
margin-left: 60%;
top: 0;
position: absolute;
}
.logo .horizontal-top {
width: 100%;
height: 25px;
background-color: #09aaba;
position: absolute;
top: 30%;
border-radius: 10px 0;
}
.logo .horizontal-top2 {
width: 60%;
height: 25px;
background-color: #ba1dd4;
position: absolute;
top: 30%;
right: 0;
}
.logo .horizontal-bottom {
width: 72.5%;
height: 25px;
background-color: #09aaba;
position: absolute;
top: 65%;
border-radius: 10px 0;
}
/* triangle */
.logo .arrow-left {
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
position: absolute;
top: 30%;
left: 35%;
border-right: 10px solid #ba1dd4;
}
.logo .arrow-down {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 13px solid transparent;
position: absolute;
top: 60%;
right: 27%;
border-top: 10px solid #ba1dd4;
}
<div class="logo">
<div class="vertical-left"></div>
<div class="vertical-right"></div>
<div class="vertical-right2"></div>
<div class="horizontal-top"></div>
<div class="horizontal-top2"></div>
<div class="horizontal-bottom"></div>
<div class="arrow-left"></div>
<div class="arrow-down"></div>
</div>
How can I have a responsive logo which will adjust according to parent height and width?
Setting the dimensions to percentages should make it resize. But the pointed arrow tips won't because they can't be set to percentage. The code below makes the logo resize but you will see that the arrow head cuts off at some point. Hope this puts you in the right direction
.logo {
width: 300px;
height: 300px;
position: fixed;
}
.logo:nth-child(2) {
width: 100px;
height: 100px;
position: absolute;
right: 0;
}
.logo .vertical-left {
width: 12.5%;
height: 60%;
position: absolute;
bottom: 0;
background-color: #09aaba;
}
.logo .vertical-right {
width: 12.5%;
height: 65%;
background-color: #09aaba;
margin-left: 60%;
top: 0;
position: absolute;
}
.logo .vertical-right2 {
width: 12.5%;
height: 60%;
background-color: #ba1dd4;
margin-left: 60%;
top: 0;
position: absolute;
display: flex;
justify-content: center ;
align-items: flex-end;
}
.logo .horizontal-top {
width: 100%;
height: 12.5%;
background-color: #09aaba;
position: absolute;
top: 30%;
border-radius: 10px 0;
}
.logo .horizontal-top2 {
width: 60%;
height: 12.5%;
background-color: #ba1dd4;
position: absolute;
top: 30%;
right: 0;
display: flex;
justify-content: center;
flex-direction: column;
}
.logo .horizontal-bottom {
width: 72.5%;
height: 12.5%;
background-color: #09aaba;
position: absolute;
top: 65%;
border-radius: 10px 0;
}
/* triangle */
.logo .arrow-left {
}
.logo .arrow-down {
}
.vertical-right2:after {
content: '';
width: 100%;
height: 0;
border-left: 12px solid transparent;
border-right: 13px solid transparent;
position: relative;
bottom: -10px;
border-top: 10px solid #ba1dd4;
z-index: 100;
}
.horizontal-top2:before {
content: '';
width: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
position: relative;
border-right: 10px solid #ba1dd4;
left: -10px;
flex-grow: 1;
z-index: 100;
}
<div class="logo">
<div class="vertical-left"></div>
<div class="vertical-right"></div>
<div class="vertical-right2"></div>
<div class="horizontal-top"></div>
<div class="horizontal-top2"></div>
<div class="horizontal-bottom"></div>
<div class="arrow-left"></div>
<div class="arrow-down"></div>
</div>
<div class="logo">
<div class="vertical-left"></div>
<div class="vertical-right"></div>
<div class="vertical-right2"></div>
<div class="horizontal-top"></div>
<div class="horizontal-top2"></div>
<div class="horizontal-bottom"></div>
<div class="arrow-left"></div>
<div class="arrow-down"></div>
</div>
I've tweaked your CSS a bit:
.logo .vertical-right {
width: 25px;
height: calc(65% - 25px);
background-color: #09aaba;
margin-left: 60%;
bottom: calc(27% + 25px);
position: absolute;
}
.logo .vertical-right2 {
width: 25px;
height: 60%;
background-color: #ba1dd4;
margin-left: 60%;
bottom: 40%;
position: absolute;
}
.logo .horizontal-top {
width: 100%;
height: 25px;
background-color: #09aaba;
position: absolute;
bottom: 60%;
border-radius: 10px 0;
}
.logo .horizontal-top2 {
width: 60%;
height: 25px;
background-color: #ba1dd4;
position: absolute;
bottom: 60%;
right: 0;
}
.logo .horizontal-bottom {
width: calc(60% + 25px);
height: 25px;
background-color: #09aaba;
position: absolute;
bottom: 27%;
border-radius: 10px 0;
}
/* triangle */
.logo .arrow-left {
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
position: absolute;
bottom: 60%;
right: 60%;
border-right: 10px solid #ba1dd4;
}
.logo .arrow-down {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 13px solid transparent;
position: absolute;
top: 60%;
margin-left: 60%;
border-top: 10px solid #ba1dd4;
}
First off I agree with other posters here that an image sounds more like what should be getting used in this case. However that doesn't really answer the question; it's just handy advice.
With the sort of positioning you're attempting try to make your elements use a common "point of origin" within your container. In other words always try to align them from the same edges. You had a bit of a mixture before of top, right, left, and bottom. I've made elements that respect each other use the same edge for calculating distance. I've also added a couple of CSS calc functions like this one height: calc(65% - 25px);, since you're mixing mostly percentage elements with a couple of static pixel based measurements.
A perfect way to achieve what you want to do is to go for a SVG logo.
SVGs can be resized without breaking, and are quite powerful.
This tutorial could help you get started.
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/