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.
Related
I'm struggling to make the semicircle edges round, where can i fix my code?
.circle {
position: absolute;
width: 80px;
height: 50px;
background-color: transparent;
top: 70;
left: 20;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
border: 20px solid #fff58f;
border-top: 0;
}
<div class="circle"></div>
Only possible way to do this in pure CSS is by faking it with pseudo-elements:
.wrapper {
background: darkorange;
border-radius: 50%;
width: 200px;
height: 200px;
display: grid;
justify-content: center;
align-content: center;
}
.box {
background: orange;
width: 120px;
height: 120px;
border-radius: 50%;
position: relative;
}
.circle {
position: absolute;
width: 100px;
height: 50px;
background-color: transparent;
bottom: 0;
left: -10px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
border: 20px solid #FFF58F;
border-top: 0
}
.circle::before, .circle::after {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: #FFF58F;
}
.circle::before {
left: -20px;
top: -8px;
}
.circle::after {
right: -20px;
top: -8px;
}
<div class="wrapper">
<div class="box">
<div class="circle"></div>
</div>
</div>
Another possibility with css
I have used ::before and ::after pseudo elements for the rounded corner for the semi circle.
.parentcircle {
position: absolute;
background: #824b20;
width: 160px;
height: 160px;
border-radius: 50%;
padding: 30px;
}
.outercircle {
position: relative;
width: 100%;
height: 100%;
background: #e08027;
border-radius: 50%;
}
.circle {
position: relative;
width: calc(100% - 20px);
height: calc(50% - 10px);
background-color: transparent;
top: 50%;
left: -10px;
border-bottom-right-radius: 50% 100%;
border-bottom-left-radius: 50% 100%;
border: 20px solid #FFF58F;
border-top: 0
}
.circle::before {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: #FFF58F;
top: -10px;
left: -20px;
}
.circle::after {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: #FFF58F;
top: -10px;
left: 100%;
}
<div class="parentcircle">
<div class="outercircle">
<div class="circle"></div>
</div>
</div>
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 1 year ago.
I wanted to experiment with ::after, so I made three figures (square, circle and triangle) then put their respective after, and works fine with the circle and square however with the triangle makes a gap and I don't understand why, I tried changing the positions and displays attributes but it didn't work
.maincontainer {
background-color: whitesmoke;
border-radius: 1rem;
width: 95%;
min-height: 200px;
margin: 0 auto;
display: flex;
}
.maincontainer div {
margin: 10px;
background-color: teal;
}
.cuadrado {
width: 100px;
height: 100px;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen !important;
}
.triangulo {
width: 0px;
border-bottom: 100px solid yellow;
border-left: 50px solid transparent;
background-color: transparent !important;
border-right: 50px solid transparent;
}
.triangulo::after {
content: "Triangulo";
position: fixed;
top: 120px;
left: 28.5%;
}
.cuadrado::after {
content: "Cuadrado";
position: fixed;
top: 120px;
left: 65px;
}
.circulo::after {
content: "circulo";
position: fixed;
top: 120px;
left: 195px;
}
<div class="maincontainer">
<div class="cuadrado"></div>
<div class="circulo"></div>
<div class="triangulo"></div>
</div>
You can remove the gap by setting the height to 0px
note: I also set left: 48% just to make the triangulo word in the center
.maincontainer {
background-color: whitesmoke;
border-radius: 1rem;
width: 95%;
min-height: 200px;
margin: 0 auto;
display: flex;
}
.maincontainer div {
margin: 10px;
background-color: teal;
}
.cuadrado {
width: 100px;
height: 100px;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen !important;
}
.triangulo {
width: 0px;
height: 0px; /* << here */
border-bottom: 100px solid yellow;
border-left: 50px solid transparent;
background-color: transparent !important;
border-right: 50px solid transparent;
}
.triangulo::after {
content: "Triangulo";
position: fixed;
top: 120px;
left: 48%;
}
.cuadrado::after {
content: "Cuadrado";
position: fixed;
top: 120px;
left: 65px;
}
.circulo::after {
content: "circulo";
position: fixed;
top: 120px;
left: 195px;
}
<div class="maincontainer">
<div class="cuadrado"></div>
<div class="circulo"></div>
<div class="triangulo"></div>
</div>
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>
Below is the image I am trying for; I managed to get a rectangle using CSS, but I am trying for a rectangle above another one .
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
}
<div ondragstart="dragStart(event)" draggable="true" id="dragtarget2">
<p>meter</p>
</div>
Make your rectangles position: absolute and the container as position: relative.
This is the code you're looking for.
.container{
position: relative;
}
.first , .second, .third {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 40px;
background-color: gray;
border-radius: 4px;
border: 2px solid red;
}
.second{
top: 4px;
left: 4px;
}
.third{
top: 8px;
left: 8px;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Use position: absolute/position: relative to move element from it's origin position. Use z-index to move element above/below other elements (higher z-index - higher element is positioned).
.border {
border: 2px solid red;
background-color: #aaa;
width: 200px;
height: 50px;
line-height: 50px;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.border:nth-child(2) {
left: 5px;
top: 5px;
z-index: 6;
}
.border:nth-child(3) {
left: 10px;
top: 10px;
z-index: 7;
}
.wrapper {
margin: 10px;
/* NOTE: this does not effect absolute elements */
padding: 10px;
/* NOTE: this will be origin of absolute elements coordinates */
position: relative;
}
<div class="wrapper">
<div class="border">1</div>
<div class="border">2</div>
<div class="border origin">SmartMeter</div>
</div>
With less HTML:
.wrapper {
position: relative;
margin: 10px;
}
.border {
position: relative;
}
.border span,
.border:before,
.border:after {
content: '';
position: absolute;
left: 0;
top: 0;
border: 2px solid red;
background: #aaa;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
}
.border:after {
left: 5px;
top: 5px;
z-index: 6;
}
.border span {
left: 10px;
top: 10px;
z-index: 7;
}
<div class="wrapper">
<div class="border"><span>SmartMeter</span>
</div>
</div>
I have added two outer divs so that the code is as follows.
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
border: 2px solid;
padding: 2px;
}
.dragtarget0 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 2px;
margin: 2px;
}
.dragtarget1 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 3px;
}
<div class="dragtarget0">
<div class="dragtarget1">
<div id="dragtarget2">
<p>meter</p>
</div>
</div>
</div>
How to create the curve that you see in picture with CSS and HTML?
Can I use CSS border radius or use other solution?
You could do it with two divs and psuedo elements :before and :after. Working code below
.top-bar{
height: 100px;
width: 100%;
background-color: #55c3ff;
}
.curved-bottom{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #55c3ff;
border-radius: 0 0 20px 20px;
position: relative;
}
.curved-bottom:before {
height: 50px;
width: 16%;
background-color: white;
border-top-right-radius: 10px;
left: -16%;
content: '';
position: absolute;
top: -8px;
}
.curved-bottom:after {
height: 50px;
width: 16%;
background-color: white;
border-top-left-radius: 10px;
right: -16%;
content: '';
position: absolute;
top: -8px;
}
<div class="top-bar"></div>
<div class="curved-bottom"></div>
If your main horizontal blue bar is a div, and the box sticking down is a separate div, you can use the pseudo elements :before and :after to create those inner radius.
See the following as an example:
html,
body {
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: #5DC4FD;
width: 100%;
height: 160px;
}
.tab {
position: relative;
top: 130px;
background-color: #5DC4FD;
width: 80%;
height: 100px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
}
.tab:before {
position: absolute;
content: "";
left: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 0 30px 0 0;
}
.tab:after {
position: absolute;
content: "";
right: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 30px 0 0 0;
}
<div class="header">
<div class="tab">
</div>
</div>
Well, you could use overlapping divs like this:
#top {
background: #00BFFF;
width: 100%;
height: 150px;
}
#container{
display: flex;
}
#mid{
background: #00BFFF;
width: 70%;
height: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#left{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-right-radius: 25px;
}
#right{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-left-radius: 25px;
}
<div id="top"></div>
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
but I'd recommend using a background image with the desired shape