I'm using border groove but I need to edit the second color.
border-right: 2px groove #FFFFFF;
border-top: 2px groove #FFFFFF;
You need some CSS trick to make like groove style, see this:http://jsfiddle.net/LbH92/9/
HTML:
<div class="border">
Hi I have two border colors<br />I am also Fluid
</div>
CSS:
div.border{
border-right:2px solid #ffffff;
border-top:2px solid #cccccc;
position:relative;
}
div.border:before{
position:absolute;
display:block;
content:'';
border-right:2px solid #cccccc;
border-top:2px solid #ffffff;
height:100%;
width:100%;
box-sizing: border-box;
-moz-box-sizing:
border-box; -webkit-box-sizing:
border-box;
}
Hope will solve problem!
I'm afraid you can't change the second color of a groove border.
You should make two different borders using :after.
border-top: 2px groove #ff0000;
use this code
Related
I am trying to get something like this:
I've tried using outline but I can't set the border radius on an outline. I've also tried a box shadow with a white border but I need the border to be transparent. Any ideas would be greatly appreciated.
can't set border radius of the outline with this:
.btn {
outline: 1px solid #B54104;
outline-offset: 1px;
}
gap between outline and button is not transparent:
.btn {
border: 1px solid #fff;
box-shadow: 0 0 0 1px #c5170a;
}
The gap between the button and the offset outline must be transparent.
You can try a background coloration relying on background-clip to avoid coloring a part of the button:
.button {
display:inline-block;
padding:3px; /*control the spacing*/
width:100px;
text-align:center;
line-height:30px;
border-radius:15px;
color:#fff;
border:2px solid orange;
background: orange content-box; /*color only the content*/
}
body {
background:pink;
}
<div class="button">
button
</div>
Same idea using padding-box and controling the space with border:
.button {
display:inline-block;
width:100px;
text-align:center;
line-height:30px;
border-radius:15px;
color:#fff;
border:5px solid transparent; /*control the spacing*/
background: orange padding-box; /*don't color the border*/
box-shadow: 0 0 0 2px orange;
}
body {
background:pink;
}
<div class="button">
button
</div>
border-radius now works fine with outline.
.btn {
display: inline-block;
margin: 20px;
padding: 15px 30px;
background-color: #b54204;
border-radius: 5px;
color: #fff;
outline: 2px solid #b54204;
outline-offset: 4px;
}
<div class="btn">
BUTTON
</div>
I'm looking at a text boxes here. They have a very nice effect. How can I achieve same effect with CSS. This is what I'm able to get but it's not close to that.
What I'm trying to achieve:
By default the textbox has greyish outline and when on focus it changes to blue color. I want a similar effect. I tried using outline property and shadows (in code below) but couldn't get that.
My attempt to get that effect (https://jsfiddle.net/7jphmdzf/):
#tags {
width:500px;
height:30px;
border: 1px solid grey;
border-radius: 10px;
}
input:focus {
outline: 0;
box-shadow: 0 0 0 0.7pt blue;
}
<div class="ui-widget">
<input id="tags">
</div>
You can use the following solution (https://jsfiddle.net/7jphmdzf/1/):
#tags {
outline:0;
width:500px;
height:30px;
border: 2px solid #ccc;
border-radius: 8px;
font-size:24px;
padding:8px 12px;
}
#tags:focus {
outline:0;
border: 2px solid #0097cf;
border-radius: 8px;
}
<div class="ui-widget">
<input id="tags" placeholder="Tags">
</div>
To change the color of the outline on :focus you have to set the border. There is no need for styling the outline or box-shadow of the <input>.
Try This,
#tags {
width:200px;
height:30px;
border: 2px solid grey;
border-radius: 10px;
}
#tags:focus {
outline: 0;
border: 2px solid #109cdf;
}
<div class="ui-widget">
<input id="tags">
</div>
I want to create a border as shown in the image. I tried with all the styles inset, outset,ridge and groove but I was not able to get the expected result.
Is there any way to bend border towards inside till middle and get back towards till top(hope you understand the problem).
If it's repeated question please add the solution link.
Thanks in advance.
I have tried this:
div {
border-bottom: 1px ridge #B5B9BB;
/*border-bottom: 1px inset #B5B9BB;
border-bottom: 1px outset #B5B9BB;
border-bottom: 1px groove #B5B9BB; */
}
You could use outline:
.bordered {
border-bottom: 1px solid grey;
background: aliceblue;
outline: 5px solid aliceblue;
}
<div class="bordered">Available Apps</div>
Demo
Seems why not just use a border on the text?
div {
background: lightgrey;
padding: 0.5em;
}
p {
border-bottom: 1px ridge #B5B9BB;
}
<div>
<p>Available Apps</p>
</div>
It is probably best to use a wrapping element if possible; it is more flexible than outline (supports border-radius, box-shadows etc.)
For example:
<div class="headline-area">
<h2>Available Apps</h2>
</div>
with the CSS:
.headline-area {
background:#D4D9DC;
padding:5px;
}
.headline-area h2 {
border-bottom:1px solid #B5B9BB;
}
Whenever I am in your situation I use box-shadow:
body {
background:#D1D6D9;
font-family:verdana;
}
div {
border-bottom: 1px solid #B5B9BB;
box-shadow:0 1px 1px rgba(255,255,255,.7);
padding-bottom:5px;
}
<div>Available Apps</div>
You could always try a hr tag. You can then style it in CSS to your desired preference.
HTML
New apps
<hr>
Try this Also but you need an extra Div to do so.
HTML
<div class="outerDiv">
COntent
<div class="innerDiV">
</div>
<div>
CSS
.outerDiv{
background-color: grey;
height: 32px;
text-align: center;
padding: 16px;
font-weight: bolder;
font-size: 25px;
}
.innerDiV{
margin: 0 auto;
border: 1px solid black;
width: 98%;
margin-top: 10px;
}
Demo
WORKING SOLUTION:
http://jsfiddle.net/DPNLq/5/
ORIGINAL QUESTION:
I am trying to create a menu hover effect similar to the one found on the BBC website:
http://www.bbc.co.uk/
The top menu which creates a line at the bottom of the link being hovered over. I am trying to do something similar, but I want to line to be at the top.
I have created the following example, to show the problem I am experiencing:
http://jsfiddle.net/DPNLq/1/
link 1
link 2
link 3
a.menu_link{
height:50px;
display:block;
float:left;
margin-right:10px;
padding:0px 5px 0px 5px;
}
a.menu_link:hover{
border-top:5px solid black;
padding-top:5px;
}
When hovering over my example links, the line pushes the link down. I don't want this to happen, and I can't figure out how to stop it from happening.
Any suggestions?
Keep the border there all the time. Just change its colour. (From transparent if you can't match a solid colour).
Add this to your menu_link default css
border-top: 5px solid transparent;
So it ends up like this;
a.menu_link{
height:50px;
display:block;
float:left;
margin-right:10px;
padding:0px 5px 0px 5px;
border-top: 5px solid transparent;
}
If you want to keep the padding, you can set the box-sizing to border-box, but keep in mind that this is css3 and won't work in older browsers
a.menu_link{
height:50px;
display:block;
float:left;
margin-right:10px;
padding:0px 5px 0px 5px;
border-top: 5px solid transparent;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
Match the top elements (padding and border) before the hover:
a.menu_link{
height:50px;
display:block;
float:left;
margin-right:10px;
padding:5px 5px 0px 5px;
border-top: 5px solid transparent;
}
http://jsfiddle.net/DPNLq/2/
Working example - http://jsfiddle.net/DPNLq/4/
.menu_link{
height:50px;
display:block;
float:left;
margin-right:10px;
padding:10px 5px 0px 5px;
}
a.menu_link:hover{
border-top:5px solid black;
padding-top:5px;
}
We have a hr line and there is a weird black pixel underneath it.
Screenshot: http://i52.tinypic.com/2vwxy78.jpg
Our code:
HTML:
<hr />
CSS:
hr {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #AAAAAA;
clear: both;
height: 0;
margin: 12px 0 18px;
}
Browser:
Firefox
Why is this pixel appearing underneath the <hr />? How do we fix this?
You need to reset all the border properties for the <hr>. Particularly the left border in your case. So:
border: 0;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #AAAAAA;
....
Check it out - http://jsfiddle.net/uwed3/
You haven't removed the default style on the <hr> element.
Add this to your CSS:
border-left: 0;
And you should be fixed.