Now I found this already of SO, and everyone seems to think it works great How do I combine a background-image and CSS3 gradient on the same element?
For some reason when I do it, it fails. The image works alone, and so does the gradient. What am I doing wrong?
.cSub {
background: #00f;
background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -moz-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -webkit-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -o-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -ms-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, linear-gradient(135deg, #0088b7 0%, #006da4 100%);
border-top: 2px solid #0089b7;
}
You have background-image as the property but you put all the background value for it, just put background instead of background-image.
.cSub {
background: #00f;
background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -moz-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -webkit-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -o-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -ms-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, linear-gradient(135deg, #0088b7 0%, #006da4 100%);
border-top: 2px solid #0089b7;
width:200px;
height:auto
}
you need to mentiion width and the height to get display the background.
Related
I am trying to style a button that is disabled, but the styling doesn't take effect, and go back to the old styling. I have cleared my cache, to no avail. I have a button that gets disabled using JavaScript with document.getElementById("updateAccountButton").disabled = true;. This aforementioned button also has the class of btn-signature-green. Inside my stylesheet, I am trying to set the styling of this button when disabled using:
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
/* styles go here */
}
This is because I have other buttons that may have disabled attributes that I want to account for.
Code snippet:
$(window).on("load", function() {
document.getElementById("updateAccountButton").disabled = true;
});
/* disabled button */
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
background-color: #afafaf;
color: white;
}
.btn-signature-green {
-moz-box-shadow: 0px 6px 11px -7px #5fd623;
-webkit-box-shadow: 0px 6px 11px -7px #5fd623;
box-shadow: 0px 6px 11px -7px #5fd623;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #67e827), color-stop(1, #81de52));
background: -moz-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -webkit-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -o-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -ms-linear-gradient(top, #67e827 5%, #81de52 100%);
background: linear-gradient(to bottom, #67e827 5%, #81de52 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#67e827', endColorstr='#81de52', GradientType=0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
border: 0px;
cursor: pointer;
color: #ffffff !important;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
}
/* the green button when hovered over */
.btn-signature-green:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #81de52), color-stop(1, #67e827));
background: -moz-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -webkit-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -o-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -ms-linear-gradient(top, #81de52 5%, #67e827 100%);
background: linear-gradient(to bottom, #81de52 5%, #67e827 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#81de52', endColorstr='#67e827', GradientType=0);
background-color: #81de52;
color: black !important;
}
/* the green button when clicked */
.btn-signature-green:active {
position: relative;
top: 1px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<button class="btn-signature-green" id="updateAccountButton">disabled button</button>
The disabled style is overlapped by the parent style.
Instead of background-color, use background on :disabled style.
And the parent button has got color style with !important so it is needed to set the color with important on :disabled selector style.
And to disable hover effect when disabled, it is needed to set pointer-events: none;.
$(window).on("load", function() {
document.getElementById("updateAccountButton").disabled = "disabled";
});
/* disabled button */
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
background: red;
color: blue !important;
pointer-events: none;
}
.btn-signature-green {
-moz-box-shadow: 0px 6px 11px -7px #5fd623;
-webkit-box-shadow: 0px 6px 11px -7px #5fd623;
box-shadow: 0px 6px 11px -7px #5fd623;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #67e827), color-stop(1, #81de52));
background: -moz-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -webkit-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -o-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -ms-linear-gradient(top, #67e827 5%, #81de52 100%);
background: linear-gradient(to bottom, #67e827 5%, #81de52 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#67e827', endColorstr='#81de52', GradientType=0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
border: 0px;
cursor: pointer;
color: #ffffff !important;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
}
/* the green button when hovered over */
.btn-signature-green:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #81de52), color-stop(1, #67e827));
background: -moz-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -webkit-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -o-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -ms-linear-gradient(top, #81de52 5%, #67e827 100%);
background: linear-gradient(to bottom, #81de52 5%, #67e827 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#81de52', endColorstr='#67e827', GradientType=0);
background-color: #81de52;
color: black !important;
}
/* the green button when clicked */
.btn-signature-green:active {
position: relative;
top: 1px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<button class="btn-signature-green" id="updateAccountButton">disabled button</button>
You are using two different properties, you are setting a background on your button but a background-color on the disabled, background takes priority so it looks like it doesn't work as you'd expect.
To fix this you just need to use the same properties between disabled and active buttons.
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>
i am having the following code to style the select box, it works perfectly in chrome but not in mozilla fire fox 27.0
.select-box {
line-height: inherit;
width: 150px;
height:150px;
font-size: 14px;
padding: 1px 30px 0px 7px;
height: 30px;
margin-left:20px;
margin-top: 2px;
background: #fdfffc;
background: -moz-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfffc), color-stop(85%, #f4f4f4), color-stop(95%, #f4f4f4));
background: -webkit-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -o-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -ms-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: linear-gradient(to bottom, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfffc', endColorstr='#f4f4f4', GradientType=0);
color: #dddddd;
text-shadow: 1px 1px 1px #fafafa;
}
JSfiddle: http://jsfiddle.net/mSL87/2/
Try it this css - mozilla fire fox 28.0
.select-box {
line-height: inherit;
width: 150px;
height:150px;
font-size: 14px;
padding: 3px 2px 2px 7px; /*i have editing in right pading*/
border:1px solid #999; /*i have edit border */
height: 30px;
margin-left:20px;
margin-top: 2px;
background: #fdfffc;
background: -moz-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfffc), color-stop(85%, #f4f4f4), color-stop(95%, #f4f4f4));
background: -webkit-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -o-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -ms-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: linear-gradient(to bottom, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfffc', endColorstr='#f4f4f4', GradientType=0);
color: #dddddd;
text-shadow: 1px 1px 1px #fafafa;
}
I don't know, how to make this code crossbrowser:
(it works only in safari and chrome)
http://jsfiddle.net/MWYnP/
body {
padding: 10px 9px;
background: -webkit-linear-gradient(left, #C5CCD4 71%, #CBD2D8 71%, #CBD2D8 100%);
-webkit-background-size: 7px 1px;
}
Try with this:
body {
padding: 10px 9px;
background: -moz-linear-gradient(left, #C5CCD4 71%, #CBD2D8 71%, #CBD2D8 100%);
background: -ms-linear-gradient(left, #C5CCD4 71%, #CBD2D8 71%, #CBD2D8 100%);
background: -o-linear-gradient(left, #C5CCD4 71%, #CBD2D8 71%, #CBD2D8 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.71, #C5CCD4), color-stop(0.71, #CBD2D8), to(#CBD2D8));
background: -webkit-linear-gradient(left, #C5CCD4 71%, #CBD2D8 71%, #CBD2D8 100%);
background: linear-gradient(left, #C5CCD4 71%, #CBD2D8 71%, #CBD2D8 100%);
background-size: 7px 1px;
-moz-background-size: 7px 1px;
-o-background-size: 7px 1px;
-webkit-background-size: 7px 1px;
}
You could use something like this to generate your gradient: http://www.colorzilla.com/gradient-editor/. Also, don't use gradients, it is not compatible with other than the latest versions of browsers, and not even all of them. Instead make the gradient a image and repeat it.
I have 2 divs where the first is on top and the second is below that...
I have added shadow to the first div which is on top and looks well.
box-shadow: 0px 5px 5px #000000;
-moz-box-shadow: 0px 5px 5px #000000;
-webkit-box-shadow: 0px 5px 5px #000000;
But when i add a gradient css on the second div which is below, the first loses its shadow... or i dont know whats going on...
I need to be able to see the shadow of the first without adding margin to the second div below.
Thanks
EDIT:
My mark up is:
<div id="header">
<div class="960width"></div>
</div>
<div id="content">
<div class="960width"></div>
</div>
My css is:
#content{
background: #e5e5e5;
background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
padding-top:15px;
}
#header{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
padding:5px;
box-shadow: 0px 5px 5px #000000;
-moz-box-shadow: 0px 5px 5px #000000;
-webkit-box-shadow: 0px 5px 5px #000000;
}
This is HTML tags :
<div id="top">
<div id="back">
[Content]
</div>
</div>
your CSS was fine, you only need to change your HTML tag, if you do this, your problem is fix ... look at this Fiddle , i think this is what you meant ...
PS: if you gave width to the top DIV, you will see the shadow in right and left ...
PS2 : i changes the "ID"s name ...