I have a header box including border and padding and background color for that box, can I change the background color only for the padded region after the border and then the same background color for the rest of the width (i.e. grey in the given code)?
Just a pinch of the code where I want the padded background color:
nav {
margin:0px auto;
width:100%;
height:50px;
background-color:grey;
float:left;
padding:10px;
border:2px solid red;
}
This question is related to
css
the answers said all the possible solutions
I have another one with BOX-SHADOW
here it is JSFIDDLE
and the code
nav {
margin:0px auto;
width:100%;
height:50px;
background-color:grey;
float:left;
padding:10px;
border:2px solid red;
box-shadow: 0 0 0 10px blue inset;
}
it also support in IE9, so It's better than gradient solution, add proper prefixes for more support
IE8 dont support it, what a shame !
This would be a proper CSS solution which works for IE8/9 as well (IE8 with html5shiv ofcourse): codepen
nav {
margin:0px auto;
height:50px;
background-color:gray;
padding:10px;
border:2px solid red;
position: relative;
color: white;
z-index: 1;
}
nav:after {
content: '';
background: black;
display: block;
position: absolute;
margin: 10px;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
You can use background-gradients for that effect. For your example just add the following lines (it is just so much code because you have to use vendor-prefixes):
background-image:
-moz-linear-gradient(top, #000 10px, transparent 10px),
-moz-linear-gradient(bottom, #000 10px, transparent 10px),
-moz-linear-gradient(left, #000 10px, transparent 10px),
-moz-linear-gradient(right, #000 10px, transparent 10px);
background-image:
-o-linear-gradient(top, #000 10px, transparent 10px),
-o-linear-gradient(bottom, #000 10px, transparent 10px),
-o-linear-gradient(left, #000 10px, transparent 10px),
-o-linear-gradient(right, #000 10px, transparent 10px);
background-image:
-webkit-linear-gradient(top, #000 10px, transparent 10px),
-webkit-linear-gradient(bottom, #000 10px, transparent 10px),
-webkit-linear-gradient(left, #000 10px, transparent 10px),
-webkit-linear-gradient(right, #000 10px, transparent 10px);
background-image:
linear-gradient(top, #000 10px, transparent 10px),
linear-gradient(bottom, #000 10px, transparent 10px),
linear-gradient(left, #000 10px, transparent 10px),
linear-gradient(right, #000 10px, transparent 10px);
No need for unecessary markup.
If you just want to have a double border you could use outline and border instead of border and padding.
While you could also use pseudo-elements to achieve the desired effect, I would advise against it. Pseudo-elements are a very mighty tool CSS provides, if you "waste" them on stuff like this, you are probably gonna miss them somewhere else.
I only use pseudo-elements if there is no other way. Not because they are bad, quite the opposite, because I don't want to waste my Joker.
I'd just wrap the header with another div and play with borders.
<div class="header-border"><div class="header-real">
<p>Foo</p>
</div></div>
CSS:
.header-border { border: 2px solid #000000; }
.header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; }
I am sorry everyone that this is the solution the true one where you dont have to actually set the padding.
http://jsfiddle.net/techsin/TyXRY/1/
What i have done...
Clever if i say so to myself.
div {
padding: 35px;
background-image:
linear-gradient(to bottom,
rgba(240, 255, 40, 1) 0%,
rgba(240, 255, 40, 1) 100%),
linear-gradient(to bottom,
rgba(240, 40, 40, 1) 0%,
rgba(240, 40, 40, 1) 100%);
background-clip: content-box, padding-box;
}
You can't set colour of the padding.
You will have to create a wrapper element with the desired background colour. Add border to this element and set it's padding.
Look here for an example: http://jsbin.com/abanek/1/edit
background-clip
and box-shadow
properties.1) Set background-clip: content-box
- this restricts the background only to the content itself (instead of covering both the padding and border)
2) Add an inner box-shadow
with the spread radius set to the same value as the padding.
So say the padding is 10px - set box-shadow: inset 0 0 0 10px lightGreen
- which will make only the padding area light green.
nav {_x000D_
width: 80%;_x000D_
height: 50px;_x000D_
background-color: gray;_x000D_
float: left;_x000D_
padding: 10px; /* 10px padding */_x000D_
border: 2px solid red;_x000D_
background-clip: content-box; /* <---- */_x000D_
box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */_x000D_
}_x000D_
ul {_x000D_
list-style: none;_x000D_
}_x000D_
li {_x000D_
display: inline-block;_x000D_
}
_x000D_
<h2>The light green background color shows the padding of the element</h2>_x000D_
<nav>_x000D_
<ul>_x000D_
<li><a href="index.html">Home</a>_x000D_
</li>_x000D_
<li><a href="/about/">About</a>_x000D_
</li>_x000D_
<li><a href="/blog/">Blog</a>_x000D_
</li>_x000D_
</ul>_x000D_
</nav>
_x000D_
For a thorough tutorial covering this technique see this great css-tricks post
There is no exact functionality to do this.
Without wrapping another element inside, you could replace the border by a box-shadow and the padding by the border. But remember the box-shadow does not add to the dimensions of the element.
jsfiddle is being really slow, otherwise I'd add an example.
You can do a div over the padding as follows:
<div id= "paddingOne">
</div>
<div id= "paddingTwo">
</div>
#paddingOne {
width: 100;
length: 100;
background-color: #000000;
margin: 0;
z-index: 2;
}
#paddingTwo {
width: 200;
length: 200;
background-color: #ffffff;
margin: 0;
z-index: 3;
the width, length, background color, margins, and z-index can vary of course, but in order to cover the padding, the z-index must be higher than 0 so that it will lay over the padding. You can fiddle with positioning and such to change its orientation. Hope that helps!
P.S. the divs are html and the #paddingOne and #paddingTwo are css (in case anyone didn't get that:)
Source: Stackoverflow.com