I want an hr that contains 50% of the page.
hr {
background-color: #E0DFDF;
background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
border: none;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
background-color: #border; is invalid CSS. I guess you are porting some code from preprocessor (e.g. SASS), please fix it.
Your syntax is wrong:
/* incorrect */
-webkit-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);
^^
/* correct */
-webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
Here's a demo:
hr {
background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
border: none;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
<hr>
Your syntax is incorrect. linear-gradient: (...) should be ---> linear-gradient(...), without the semi-colon(:).
hr {
background: -webkit-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: -moz-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: -o-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
border: 0;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
<hr />
Related
I've put together an animation which indicates a countdown until a toast notification disappears:
.toastDiv {
animation: toastProgress 3s ease;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25);
margin: 0 0 1ex 0;
padding: 1ex 1em;
}
#keyframes toastProgress {
0% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 0%, white 0%, white 100%);
}
10% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 10%, white 10%, white 100%);
}
20% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 20%, white 20%, white 100%);
}
30% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 30%, white 30%, white 100%);
}
40% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 40%, white 40%, white 100%);
}
50% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 50%, white 50%, white 100%);
}
60% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 60%, white 60%, white 100%);
}
70% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 70%, white 70%, white 100%);
}
80% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 80%, white 80%, white 100%);
}
90% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 90%, white 90%, white 100%);
}
100% {
background: linear-gradient(to right, aliceblue 0%, aliceblue 100%, white 100%, white 100%);
}
}
<div class="toastDiv">hello</div>
However, it is very tedious to have to spell out the individual animation stages and at the granularity I chose, I am getting choppy results.
I tried using this:
#keyframes toastProgress {
from {
background: linear-gradient(to right, aliceblue 0%, aliceblue 0%, white 0%, white 100%);
}
to {
background: linear-gradient(to right, aliceblue 0%, aliceblue 100%, white 100%, white 100%);
}
}
But this transitions from one solid background to the next instead of animating the color stops from left to right.
Is there a way to make this progress-style gradient animation using only from and to and not percent-steps?
You can rely on background-size animation and steps() like below:
.toastDiv {
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25);
margin: 0 0 1ex 0;
padding: 1ex 1em;
background:
linear-gradient(aliceblue,aliceblue) left no-repeat,
white;
animation: toastProgress 5s steps(10,start);
}
#keyframes toastProgress {
0% {
background-size:0% 100%;
}
100% {
background-size:100% 100%;
}
}
<div class="toastDiv">hello</div>
<div class="toastDiv" style="animation-timing-function:ease">without Steps</div>
Related to understand how steps() works: https://stackoverflow.com/a/51843473/8620333
I have to do a soccer team shield with css, the idea is do a circle with the team colors and I have done the circles for shields with 1 or 2 colors but I am having troubles with 3 color shields
I'm using this for 2 colors shields
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 50%, #FFFFFF 50%);
background-image: -o-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -moz-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -webkit-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -ms-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
display: inline-block;
}
<div class="equipo"></div>
but I want that it have 3 color and I try this, but it doesn't work
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
display: inline-block;
}
<div class="equipo"></div>
What I have to do, I want 3 or more colors?
It is the nature of CSS gradients to behave, well, like gradients. The trick for having discrete colors, which do not blend, is to make the blend area have no width. This is done by putting two colors at the same point on the gradient, as shown below.
.equipo {
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -o-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -moz-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -webkit-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -ms-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
display: inline-block;
}
<div class="equipo"></div>
Add the same color again, if one ends at 30%, the next one should start at 30%,
As so: -moz-linear-gradient(left center , #01135b 30%, #ffffff 30%, #ffffff 65%, #df0408 30%)
This will essentially make a hard edge/stop on the previous color
.equipo {
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
display: inline-block;
background: -moz-linear-gradient(left center , #01135b 32%, #ffffff 32%, #ffffff 66%, #df0408 66%);
}
<div class="equipo"></div>
Apply the same principal to the rest.
Try this just added new linear gradients which is overriding your styling if this is what you were looking for you can remove the upper gradients. Also added one alternate with many colors.
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
display: inline-block;
background-image: -o-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
background-image: -ms-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
background-image: -webkit-gradient(linear, right top, right bottom, color-stop(15%,#a8e9ff), color-stop(32%,#052afc),color-stop(90%,#ff8d00));
}
.grad {
background-image: -moz-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
background-image: -webkit-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
background-image: linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
}
<div class="equipo"></div>
<div class="equipo grad"></div>
here i worked for a flag, this is same as your requirement, try this
.flag-sample {
border-radius: 50%;
border: 1px solid #333333;
width: 100px;
height: 100px;
display: block;
background: -moz-linear-gradient(left center , #01135b 33%, #ffffff 33%, #ffffff 66%, #df0408 66%);
}
<div class="flag-sample"></div>
Here is my css (for this gradient the code was copied from colorzilla). Nothing too special. If i remove all the gradient parts and stay with a solid color, the colored stripe renders in IE8 just fine. But the gradient is not displaying (in chrome everything looks correct). How to fix this? Thnks.
.hdr:after {
content: " ";
display: block;
position: absolute;
min-width: 960px;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: #e7eff3;
background: -moz-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e7eff3), color-stop(50%, #1d667a), color-stop(100%, #e7eff3));
background: -webkit-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -o-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -ms-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: linear-gradient(to right, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e7eff3', endColorstr='#e7eff3', GradientType=1);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7eff3', endColorstr='#e7eff3',GradientType=1 )';
}
I'm trying to use two pseudoelements :after, but only the first one is working:
[data-msgcounter]:after {
background-color: #FF6969;
background-image: -webkit-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -moz-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -o-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -ms-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: linear-gradient(#FF6969 0%, #ff0000 100%);
content: attr(data-msgcounter);
}
[data-notcounter]:after {
background-color: #FF6969;
background-image: -webkit-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -moz-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -o-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -ms-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: linear-gradient(#FF6969 0%, #ff0000 100%);
content: attr(data-notcounter);
}
Anyone have tips or a solution?
I've stumbled upon something weird. When applying a dashed white border to an element, the colors of the background gradient appear on the wrong side of the element, like so:
I've seen this in the latest versions of Firefox, Chrome, Opera and in IE10. IE9 has my intented effect, however.
My css is currently:
aside.block {
width: 259px;
padding: 12px;
margin: 15px 0;
border: 2px dashed #fff;
background-image: -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00', endColorstr='#dbcb00');
}
The border colors on the left and right side color fine, but since this happens in pretty much every browser, I'll have to assume this is my mistake, not a browser bug. What am I missing here?
You can fix this by setting background-origin to border-box.
http://jsfiddle.net/LVfqe/11/
.block{
width: 259px;
padding: 12px;
background-image: -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00',endColorstr='#dbcb00');
border: 2px dashed #fff;
background-origin:border-box;
}