Please refer to attached
image
How can hide the red line (its a span) from out of div?
Margin left not worked because the line left the other side.
How can fix it?
#keyframes linewidth1 {
0%{
border-bottom: 4px solid white;
width: 0%;
}
25%{
border-bottom: 4px solid white;
border-bottom: 4px solid white;
width: 0%;
}
60%{
border-bottom: 4px solid white;
border-bottom: 4px solid white;
}
75%{
border-bottom: 2px solid transparent;
border-bottom: 2px solid transparent;
}
90%{
width: 100%;
border-bottom: 2px solid #e10000;
border-bottom: 2px solid #e10000;
}
}
.line2 {
left: 0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 100%;
float: left;
height: 1px;
display: inline-block;
margin-top: 57px;
}
.single_style {
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
How can hide the red line (its a span) from out of div?
Margin left not worked because the line left the other side.
How can fix it?
added overflow: hidden; to .single_style
.line2 {
left: 0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 100%;
float: left;
height: 1px;
display: inline-block;
margin-top: 57px;
}
.single_style {
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
overflow: hidden;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
Simply create this line using background:
.single_style {
background:linear-gradient(#e10000,#e10000) 0 57px/100% 2px no-repeat;
animation: linewidth1 3s;
padding-top: 15px;
background-color: rgb(238, 238, 234);
border-radius:170px 39px 11px 57px;
border-top: 4px solid;
border-right: 2px solid;
border-left: 1px solid;
border-bottom: 1px solid;
border-color: cadetblue;
margin:5px 3% 5px 20px;
max-width: 1200px;
}
#keyframes linewidth1 {
0%,25%{
background-size:0% 2px;
background-image:linear-gradient(#fff,#fff);
}
60%{
background-size:100% 4px;
}
75%{
background-size:100% 0px;
background-image:linear-gradient(#fff,#fff);
}
75.01%{
background-size:100% 0px;
background-image:linear-gradient(#e10000,#e10000);
}
90%{
background-size:100% 2px;
background-image:linear-gradient(#e10000,#e10000);
}
}
<body>
<div class="single_style" style="height:200px;">
</div>
</body>
Float the span to the right side and decrease its width to 95%
.line2 {
left:0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 95%;
float: right;
height: 1px;
display: inline-block;
margin-top: 57px ;
}
.single_style{
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
Related
I had this code to create a double border off different widths, but i need it to only show on the left,top and right sides. This is fine with the border property but not possible with outline as it doesn't share the same border-left etc
border: double 4px black;
outline: solid 3px black;
any help would be great
Why not remove the outline and instead create a nested element inside of the element?
You can do like this:
Create nested elements in HTML:
<div class="big">
<div class="small">Some text Here.....</div>
</div>
Then apply CSS:
.big{
border: 5px solid green;
border-bottom: none;
}
.small{
border: 2px solid black;
border-bottom: none;
margin: 2px;
}
No need to use the outline.
You can use box-shadow instead of outline - see demo below:
div {
line-height: 20px;
border-color: black;
border-style: double;
border-width: 4px 4px 0 4px;
box-shadow: -3px 0 0 0 black, /* left */
3px 0 0 0 black, /* right */
3px -3px 0 0 black, /* top */
-3px -3px 0 0 black; /* top */
}
<div> </div>
Create nested elements with their own id's
<div id="outer-border">
<div id="inner-border"></div>
</div>
Then set the correct CSS properties for those elements, for example something like:
#outer-border{border-bottom: none}
#inner-border{border-bottom: none}
Here is an idea using gradient to create the second border.
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
padding:3px; /*control the distance between border*/
padding-bottom:0;
background:
linear-gradient(green,green) top /100% 4px,
linear-gradient(green,green) left /4px 100%,
linear-gradient(green,green) right/4px 100%;
background-repeat:no-repeat;
background-origin:content-box;
}
<div class="box">
</div>
Another idea using pseudo element:
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:3px;
left:3px;
right:3px;
bottom:0;
border: solid 4px green;
border-bottom:none;
}
<div class="box">
</div>
.st1, .st2 {
background-color: yellow;
}
.st1 {
outline: solid 3px black;
width: 400px;
height: 200px;
position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}
<div class="st1"><div class="st2"></div></div>
or
.st1, .st2 {
background-color: yellow;
}
.st1 {
border: 3px solid black;
border-bottom: none;
width: 400px;
height: 200px;
position: relative;
box-sizing: border-box;
}
.st2 {
border: 1px solid black;
border-bottom: none;
margin-top: 2px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 0px;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
<div class="st1"><div class="st2">test</div></div>
How to set the outline border according to the original border which is currently rectangle on hover? I would like to set this up according to its border..
#hello {
width: 25px;
height: 10px;
background-color: red;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 10px solid red;
border-bottom: 0;
padding: 15px;
transform: rotate(90deg);
margin-top: 25%;
float: right;
cursor: pointer;
}
#hello:hover {
outline: 2px solid #1abc9c;
}
#hello-left {
width: 25px;
height: 10px;
background-color: red;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 10px solid red;
border-bottom: 0;
padding: 15px;
transform: rotate(270deg);
margin-top: 25%;
float: left;
cursor: pointer;
}
#hello-left:hover {
outline: 2px solid #1abc9c;
position: absolute;
}
<div id="hello-left"></div>
<div id="hello"></div>
Try this and you're all set...
#hello {
width: 25px;
height: 10px;
background-color: red;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 10px solid red;
border-bottom: 0;
padding: 15px;
transform: rotate(90deg);
margin-top: 25%;
float: right;
cursor: pointer;
}
#hello:hover {
filter: drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c);
}
#hello-left {
width: 25px;
height: 10px;
background-color: red;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 10px solid red;
border-bottom: 0;
padding: 15px;
transform: rotate(270deg);
margin-top: 25%;
float: left;
cursor: pointer;
}
#hello-left:hover {
filter: drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c) drop-shadow(0px 0px 1px #1abc9c);
}
<div id="hello-left"></div>
<div id="hello"></div>
In this image you can see a visible extra space in between input field and search button. I want to remove this space and make them close. If I'm wrong somewhere in my coding, please tell me the solution. How can I overcome this problem?
And, here's my code:
input[type=text].search_input {
width: 350px;
height: 40px;
font-size: 16px;
background-color: white;
background-image: url('assets/imgs/asd.png');
background-position: 7px 4.5px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top:2px solid #0073f5;
border-left:2px solid #0073f5;
border-bottom: 2px solid #0073f5;
border-right: 0px solid #0073f5;
outline: none;
font-size: 16px;
box-sizing: border-box;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.search {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top:2px solid #0073f5;
border-left:2px solid #0073f5;
border-bottom: 2px solid #0073f5;
border-right: 0px solid #0073f5;
padding: 0px 19px 0px 19px;
width: 110px;
height: 40px;
font-size: 16px;
background:#0073f5;
outline: none;
color : white;
cursor: pointer;
}
<form action="search.php" method="GET">
<input class="search_input" id="search" type="text" name="q">
<button class="search" type="submit">SEARCH</button>
</form>
Insert float:left like this:
input[type=text].search_input {
float: left;
//other codes....
}
input[type=text].search_input {
width: 350px;
height: 40px;
font-size: 16px;
background-color: white;
background-image: url('assets/imgs/asd.png');
background-position: 7px 4.5px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top:2px solid #0073f5;
border-left:2px solid #0073f5;
border-bottom: 2px solid #0073f5;
border-right: 0px solid #0073f5;
outline: none;
font-size: 16px;
box-sizing: border-box;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
float: left;
}
.search {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top:2px solid #0073f5;
border-left:2px solid #0073f5;
border-bottom: 2px solid #0073f5;
border-right: 0px solid #0073f5;
padding: 0px 19px 0px 19px;
width: 110px;
height: 40px;
font-size: 16px;
background:#0073f5;
outline: none;
color : white;
cursor: pointer;
}
<form action="search.php" method="GET">
<input class="search_input" id="search" type="text" name="q">
<button class="search" type="submit">SEARCH</button>
</form>
I would just add display: flex to the form element:
form {
display: flex;
}
input[type=text].search_input {
width: 350px;
height: 40px;
font-size: 16px;
background-color: white;
background-image: url('assets/imgs/asd.png');
background-position: 7px 4.5px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top: 2px solid #0073f5;
border-left: 2px solid #0073f5;
border-bottom: 2px solid #0073f5;
border-right: 0px solid #0073f5;
outline: none;
font-size: 16px;
box-sizing: border-box;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.search {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top: 2px solid #0073f5;
border-left: 2px solid #0073f5;
border-bottom: 2px solid #0073f5;
border-right: 0px solid #0073f5;
padding: 0px 19px 0px 19px;
width: 110px;
height: 40px;
font-size: 16px;
background: #0073f5;
outline: none;
color: white;
cursor: pointer;
}
<form action="search.php" method="GET">
<input class="search_input" id="search" type="text" name="q">
<button class="search" type="submit">SEARCH</button>
</form>
An alternative to using the float layout property is to give the button a negative left margin:
.search {
margin-left: -4px;
}
input[type=text].search_input {
width: 350px;
height: 40px;
font-size: 16px;
background-color: white;
background-image: url('assets/imgs/asd.png');
background-position: 7px 4.5px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top:2px solid #0073f5;
border-left:2px solid #0073f5;
border-bottom: 2px solid #0073f5;
border-right: 0px solid #0073f5;
outline: none;
font-size: 16px;
box-sizing: border-box;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.search {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top:2px solid #0073f5;
border-left:2px solid #0073f5;
border-bottom: 2px solid #0073f5;
border-right: 0px solid #0073f5;
margin-left: -4px;
padding: 0px 19px 0px 19px;
width: 110px;
height: 40px;
font-size: 16px;
background:#0073f5;
outline: none;
color : white;
cursor: pointer;
}
<form action="search.php" method="GET">
<input class="search_input" id="search" type="text" name="q">
<button class="search" type="submit">SEARCH</button>
</form>
There could be 2 solutions.
As your input and button are in line, you can use margin-left: -5px to the button
or you can use a float to the input.
float: left;
I am trying to create right arrow with gray border with css. but I think the arrow is over lapping the left rectangle. some finishing touch is required here:
.arrow_box {
position: relative;
background: #fff;
border: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
}
.arrow_box:after,
.arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #fff;
border-width: 17px;
margin-top: -17px;
}
.arrow_box:before {
border-color: rgba(170, 170, 170, 0);
border-left-color: #aaa;
border-width: 19px;
margin-top: -19px;
}
<div class="arrow_box">Consumer Customer
</div>
You can add border on specific sides except right:
.arrow_box {
position: relative;
background: #fff;
border-left: 2px solid #aaa;
border-top: 2px solid #aaa;
border-bottom: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
box-sizing: border-box;
}
https://jsfiddle.net/2ca4aucm/1/
I am a beginner at CSS's programming and have a question about text positioning. I have to design download button in CSS without symbol font or images in it. I've done that, but text doesn't want to fit inside box (picture 1).
This is my CSS code:
#download{
background-color: rgb(0, 230, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
width: 235px;
height: 65px;
}
#download p{
font-family: 'Roboto Slab', serif;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-size: 30px;
color:white;
padding-left: 50px;
padding-bottom: 300px;
}
#ikonad{
border-radius: 150px;
border-color: rgb(0, 179, 0);
border-width: 3px;
border-style: solid;
background-color: rgb(242, 242, 242);
height: 58px;
width: 58px;
padding-left: 1px;
padding-top: 1px;
}
.kvadrat{
width: 15px;
height: 20px;
background: rgb(0, 179, 0);
margin-left: 20px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding-top: 8px;
}
#trikotnik {
padding-top: 10px;
margin-left: 12.5px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid rgb(0, 179, 0);
}
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Gumbi</title>
</head>
<body>
<div id="download">
<div id="ikonad">
<div class="kvadrat"><p>Download</p></div>
<div id="trikotnik"></div></div>
</div>
I would be glad, if anyone told me, what I did wrong. Thank you very much! :)
Just remove the margin from your <p> element:
#download p {
margin: 0;
}
(Side question: what is padding-bottom: 300px doing in there? Is that really necessary?)
Here's your markup with the added CSS rule:
#download {
background-color: rgb(0, 230, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
width: 235px;
height: 65px;
}
#download p {
font-family: 'Roboto Slab', serif;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-size: 30px;
color: white;
margin: 0;
padding-left: 50px;
padding-bottom: 300px;
}
#ikonad {
border-radius: 150px;
border-color: rgb(0, 179, 0);
border-width: 3px;
border-style: solid;
background-color: rgb(242, 242, 242);
height: 58px;
width: 58px;
padding-left: 1px;
padding-top: 1px;
}
.kvadrat {
width: 15px;
height: 20px;
background: rgb(0, 179, 0);
margin-left: 20px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding-top: 8px;
}
#trikotnik {
padding-top: 10px;
margin-left: 12.5px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid rgb(0, 179, 0);
}
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<div id="download">
<div id="ikonad">
<div class="kvadrat">
<p>Download</p>
</div>
<div id="trikotnik"></div>
</div>
</div>