I'm using the following code to give the double underline on my site (https://howtogetrippedathome.com/) below my widget titles a gradient color:
.widget-title:after {
border-bottom: 6px double;
-webkit-border-image: -webkit-linear-gradient(left, #ff2828, #F27B26);
}
However, when I apply this code the underline dissapears. I have looked in other topics and this should work, but I don't know what I'm doing wrong.
Simply use multiple gradient like this
h1{
display:inline-block;
padding-bottom:5px;
background:
linear-gradient(to left, red, blue),
linear-gradient(to left, red, blue);
background-size:100% 2px;
background-position:bottom 0 left 0,bottom 5px left 0;
background-repeat:no-repeat;
}
<h1>some text</h1>
Instead of using the pseudo element(:after),
Try this directly:
.widget-title {
border-bottom: 6px double;
-webkit-border-image: -webkit-linear-gradient(left, #ff2828, #F27B26);
}
In css3 please use pseudo-element with ::after instead of :after.
And please ensure you at least an empty content for the pseudo element style like (content: "") and specify display property.
.widget-title {
width: 100px;
height: 100px;
}
.widget-title::after {
content: "";
display: block;
background: #ffba10;
border-bottom: 6px double;
}
Above code works as expected. Please refer this link for more info.
html:
<mat-card class="matcard-black"></mat-card>
css:
.matcard-black {
background-color: black;
height: 400px;
margin-top: 10px;
background: linear-gradient(168deg, #000 62%, #000 62%, #000 62%,
transparent 63%);
}
I want to customize the shape of mat-card. Code which is written
above just build that shape within the card but I want my card to be
in that shape.
You can try styling with tag name instead of class name (i.e. mat-card)
You can try this.
mat-card {
background-color: black;
height: 400px;
margin-top: 10px;
background: linear-gradient(168deg, #000 62%, #000 62%, #000 62%,
transparent 63%);
}
I have this box with a linear gradient background created as a two tone solid color. One color is 44px - the rest has another color, like this:
background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);
Works great. Now I would like to add a two-tone border to the top and bottom of this element using border image linear gradients the same way - so that the colors of the border follow the color of the background. The trick is to use linear gradients as solid colors.
I have tried something like this:
border-image: linear-gradient(right, #365aa5 44px, #000 0);
border-style: solid;
border-width: 2px 0 2px 0;
But obviousley, it's not working.
Any ideas how I could make this work?
JsFiddle here.
You need to add a number in the end of the border-image property. In your case it has no effect but it is still required. Also use to right instead of right
div {
height: 50px;
width: 80%;
padding: 4px;
box-sizing: border-box;
position: relative;
background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0);
/* What I'm trying: */
border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0) 1;
border-style: solid;
border-width: 2px 0 2px 0;
}
body {
padding: 20px;
background-color: #fff;
}
<div>Two tone solid color top and bottom border to<br> match the two tone background</div>
I took the blue color so it is easier to see.
EDIT: Also possible as vibhu suggested:
border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0);
border-image-slice: 1;
You can add the two tone border by using the below additional code::
div::after {
content: "";
position: absolute;
height: 2px;
width: 44px;
right: 0;
background: #365aa5;
top: -2px;
}
div::before {
content: "";
position: absolute;
height: 2px;
width: 44px;
right: 0;
background: #365aa5;
bottom: -2px;}
Jsfiddle added here: https://jsfiddle.net/y2Ln2h86/
Hi i've got a input range on html5 min 0 and max 100.
But i would like to color a part for example between 70 and 100.
I don't want to use bootstrap for this.
I don't know how to do that.
You can easily do this by using a linear-gradient as background for the track. All that we need to do is create a gradient which is colored only for the width that we need (30% for your case because you need it colored only between 70-100) and then position it with respect to the track's (the track is the bar of the range input) right side. Since the styling of range inputs is still in experimental phase we have to use browser prefixed selectors (to select the track of each browser) and then apply styles to it. We also have to do some additional corrections to address browser specific problems, I've marked these with inline comments in the code.
The below code is tested and found to be working fine in Edge, IE11 and latest versions of Chrome, Firefox and Opera (all on a Windows 10 machine).
Note: This will only color the part between 70-100 of the range input differently. This doesn't have the code to make the appearance of range input the same in all browsers. I've not done that because that is out of the scope of this question.
Also, as mentioned by ssc-hrep3 in his comment, this may not be good for production implementation because these things are still in experimental stage and we've to use browser specific selectors but if you want to apply custom styling to HTML5 range inputs then there is probably no other way.
input[type=range] {
-webkit-appearance: none;
border: 1px solid black; /* just for demo */
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border: none; /* just do away with the track's border */
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
<input type="range" min="0" max="100" value="70" step="10" />
For the benefit of future readers: Just in case you need uniform styling across all major browsers then you could use the below snippet. It produces almost similar output in all of them.
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
height: 10px;
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border-color: transparent;
border-style: solid;
border-width: 10px 0px; /* dummy just to increase height, otherwise thumb gets hidden */
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 18px;
width: 18px;
margin-top: -4px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
height: 18px;
width: 18px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-ms-thumb {
height: 18px;
width: 18px;
margin-top: 0px; /* nullify default margin */
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
<input type="range" min="0" max="100" value="70" step="10" />
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;
}
I am sorry everyone that this is the solution the true one where you don't have to actually set the padding.
https://jsfiddle.net/techsin/TyXRY/1/
What I have done...
Applied two gradients on background with both having one start and end color. Instead of using solid color. Reason being that you can't have two solid colors for one background.
Then applied different background-clip property to each.
thus making one color extend to content box and other to border, revealing the padding.
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;
}
<p>Padding IS COLORED</p>
<div>Mexican’t professor plum charlie chaplin? Facial accessory lorreto del mar Daniel plainview landed gentry circus strongman sam elliott zap rowsdower, lorreto del mar off-piste frightfully nice mustachio landed gentry Daniel plainview zap rowsdower toothbrush
circus strongman boogie nights sam elliott Daniel plainview facial accessory, Daniel plainview man markings boogie nights mr frothy-top sam elliott worn with distinction mustachio zap rowsdower off-piste Daniel plainview toothbrush lorreto del mar frightfully
nice wario facial accessory mr frothy-top landed gentry circus strongman prostate cancer? Rock n roll star gunslinger villain marquess of queensbury en time-warped cabbie off-piste graeme souness en time-warped cabbie, cunning like a fox gunslinger
dodgy uncle clive villain karl marx marquess of queensbury en time-warped cabbie graeme souness rock n roll star off-piste en time-warped cabbie, rock n roll star lemmy dodgy uncle clive graeme souness professor plum en time-warped cabbie villain gunslinger
en time-warped cabbie marquess of queensbury cunning like a fox devilish cad off-piste karl marx. John aldridge basil fawlty landed gentry louis xiii sam elliott brigadier, et sodales cum dick van dyke mouth coiffure louis xiii landed gentry basil fawlty
john aldridge stiff upper lip brigadier crumb catcher sam elliott?</div>
Use the 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.
Codepen demo
nav {
width: 80%;
height: 50px;
background-color: gray;
float: left;
padding: 10px; /* 10px padding */
border: 2px solid red;
background-clip: content-box; /* <---- */
box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */
}
ul {
list-style: none;
}
li {
display: inline-block;
}
<h2>The light green background color shows the padding of the element</h2>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Blog
</li>
</ul>
</nav>
For a thorough tutorial covering this technique see this great css-tricks post
Another option with pure CSS would be something like this:
nav {
margin: 0px auto;
width: 100%;
height: 50px;
background-color: white;
float: left;
padding: 10px;
border: 2px solid red;
position: relative;
z-index: 10;
}
nav:after {
background-color: grey;
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: -1;
}
<nav>Some text or anything</nav>
Demo here
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.
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
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 !
in case you don't want to affect the content background, and you have different padding for each direction, use the following:
div {
width: 440px;
padding: 10px 20px 30px 40px;
box-shadow: inset 0 10px 0 0 lightGreen, inset -20px 0 0 0 lightGreen, inset 0 -30px 0 0 lightGreen, inset 40px 0 0 0 lightGreen;
}
<div>The light green background color shows the padding of the element</div>
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; }
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.
This would be a proper CSS solution which works for IE8/9 as well (IE8 with html5shiv of course): 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;
}
<nav>lorem ipsum dolor sit amet</nav>
Style the <hr> like this to get a solid line.
.line {
height: 10px;
color: black;
margin: 0;
border-style: solid;
background-color: black;
}
<hr class="line">
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:)
Another trick:
Stack two divs one on top of the other, then apply different background-clip for each (bottom with padding-box, top with content-box):
.rect {
width: 100px;
height: 50px;
border: red solid 5px;
padding: 10px;
position: absolute;
}
.bottom {
background: yellow padding-box;
}
.top {
background: pink content-box;
}
<div>
<div class="rect bottom"></div>
<div class="rect top"></div>
</div>
Linke:
The backgound clip property
Stacking divs