I'm designing the header for a web site. I'm trying to use an image on the right side of the header with a gradient color over the top of it with the rgba of the right side set to a level of transparency. Individually the image shows and the gradient works fine, but the image and the gradient do not work together, only the gradient shows up with the transparent color letting white show through, but no image.
Here is my code.
.header-container {
background: url('banner-background.PNG') right top no-repeat;
background: rgb(86,0,0); /* Old browsers */
background: -moz-linear-gradient(left, rgba(86,0,0,1) 0%, rgba(126,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(126,0,0,0)), color-stop(100%,rgba(86,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 */
}
You could do this like below CSS to combine a background image and CSS3 gradients:
.header-container {
background: rgb(86,0,0); /* Old browsers */
background: url('banner-background.PNG') right top no-repeat, -moz-linear-gradient(left, rgba(86,0,0,1) 0%, rgba(126,0,0,0) 100%); /* FF3.6+ */
background: url('banner-background.PNG') right top no-repeat, -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(126,0,0,0)), color-stop(100%,rgba(86,0,0,1))); /* Chrome,Safari4+ */
background: url('banner-background.PNG') right top no-repeat, -webkit-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: url('banner-background.PNG') right top no-repeat, -o-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Opera 11.10+ */
background: url('banner-background.PNG') right top no-repeat, -ms-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* IE10+ */
background: url('banner-background.PNG') right top no-repeat, linear-gradient(to right, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 */
}
[EDITED] (Gradient over background image)
.header-container {
background: rgb(86,0,0); /* Old browsers */
background: -moz-linear-gradient(left, rgba(86,0,0,1) 0%, rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(126,0,0,0)), color-stop(100%,rgba(86,0,0,1))), url('banner-background.PNG') right top no-repeat; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* IE10+ */
background: linear-gradient(to right, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 */
}
Related
I have a button that has 2 different colors. I don't know about a way to color a button with 2 colors and I want to avoid from putting an image to be the background so I guess that I need 2 buttons (one under the other).
Both of the colors have to be changed when pressed (active).
Does anybody knows a way to make another button to be shown as active when the first one is pressed?
playground
<button>BUTTON</button>
button{
padding:10px 25px;
color:#fff;
border:0;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #207cca 48%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(48%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 48%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#207cca 48%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#207cca 48%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#207cca 48%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
button:active{
background: #b4ddb4; /* Old browsers */
background: -moz-linear-gradient(top, #b4ddb4 0%, #70aa7d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(100%,#70aa7d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b4ddb4 0%,#70aa7d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b4ddb4 0%,#70aa7d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b4ddb4 0%,#70aa7d 100%); /* IE10+ */
background: linear-gradient(to bottom, #b4ddb4 0%,#70aa7d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#70aa7d',GradientType=0 ); /* IE6-9 */
}
Use the :active psudeo class:
input
{
color:red;
}
input:active
{
color:blue;
}
Fiddle here
I got a css class to separate the contents:
HTML:
<div class='seperator-gradient'></div>
css:
.seperator-gradient{
width: 100%;
height: 1px;
border-bottom:
background: #c4c4c4; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 */
}
this works fine, but now, I have a table, I'd like the bottom of each cells of this table has the same feature like the above. Is it possible to achieve this?
at the moment, I make the table's css to:
border-bottom: 1px solid;
but it doesn't have the same effect as the seperator-gradient class can achieve.
This is only supported in a few browsers at the moment:
-webkit-border-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)) 0 0 1 1 repeat repeat;
Here's the browsers it's supported in: http://caniuse.com/#search=border-image
apply the class .seperator-gradient
property to all td tags of that particular table
In your css put
table td {
width: 100%;
height: 1px;
border-bottom:
background: #c4c4c4; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 */
}
Here is some usefull gradient effects.
http://css-tricks.com/examples/GradientBorder/
I'd like to have a background-image with a line on the end.
The border or line should begin where the background-size ends.
The border line is grey in the concept. It should stay just one element.
background-image: gradient-y(#color-grey-2, #color-white);
background-position: left top;
background-size: 100% 40px;
background-repeat: no-repeat;
http://jsfiddle.net/8Q79p/ OLD JSFIDDLE. (Wrapper)
http://jsfiddle.net/8Q79p/1/ Updated; if you want just one element, you can use color-stop
<div id="gradient">
</div>
#gradient{
background: rgb(221,221,221); /* Old browsers */
background: -moz-linear-gradient(top, rgba(221,221,221,1) 1%, rgba(255,255,255,1) 46%, rgba(149,149,149,1) 47%, rgba(149,149,149,1) 48%, rgba(255,255,255,1) 49%, rgba(252,252,252,1) 100%, rgba(27,27,27,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(221,221,221,1)), color-stop(46%,rgba(255,255,255,1)), color-stop(47%,rgba(149,149,149,1)), color-stop(48%,rgba(149,149,149,1)), color-stop(49%,rgba(255,255,255,1)), color-stop(100%,rgba(252,252,252,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
width: 100%;
height: 100px;
border: solid 1px black;
}
Below CSS class I am using for input button.
I want gradient with arrows to a button.
.addBtn{border:1px solid #B9770C;color:#000000;
background: url('../../images/arrow_right.png') no-repeat center bottom;
/* fallback */
background: url('../../images/arrow_right.png') no-repeat center bottom, -webkit-gradient(linear, left top, left bottom, from(#f9d295), to(#f1a32b)); /* Saf4+, Chrome */
background: url('../../images/arrow_right.png') no-repeat center bottom, -webkit-linear-gradient(top, #f9d295, #f1a32b); /* Chrome 10+, Saf5.1+ */
background: url('../../images/arrow_right.png') no-repeat center bottom, -moz-linear-gradient(top, #f9d295, #f1a32b); /* FF3.6+ */
background: url('../../images/arrow_right.png') no-repeat center bottom, -ms-linear-gradient(top, #f9d295, #f1a32b); /* IE10 */
background: url('../../images/arrow_right.png') no-repeat center bottom, -o-linear-gradient(top, #f9d295, #f1a32b); /* Opera 11.10+ */
background: url('../../images/arrow_right.png') no-repeat center bottom, linear-gradient(top, #f9d295, #f9d295); /* W3C */
}
.addBtn:hover{
border: 1px solid #B9770C;
background: url('../../images/arrow_right.png') no-repeat center bottom; /* fallback */
background: url('../../images/arrow_right.png') no-repeat center bottom, -webkit-gradient(linear, left top, left bottom, from(#f1a32b), to(#f9d295)); /* Saf4+, Chrome */
background: url('../../images/arrow_right.png') no-repeat center bottom, -webkit-linear-gradient(top, #f1a32b, #f9d295); /* Chrome 10+, Saf5.1+ */
background: url('../../images/arrow_right.png') no-repeat center bottom, -moz-linear-gradient(top, #f1a32b, #f9d295); /* FF3.6+ */
background: url('../../images/arrow_right.png') no-repeat center bottom, -ms-linear-gradient(top, #f1a32b, #f9d295); /* IE10 */
background: url('../../images/arrow_right.png') no-repeat center bottom, -o-linear-gradient(top, #f1a32b, #f9d295); /* Opera 11.10+ */
background: url('../../images/arrow_right.png') no-repeat center bottom, linear-gradient(top, #f1a32b, #f9d295); /* W3C */
}
You can check this URL in IE and other browsers.
http://jsfiddle.net/aEK4j/
Use this site for get gradient to everything! This is useful for all version of IE(6-9)!
Advanced Colorful Goodies
I'm trying to add an arrow image to my link and have it positioned to the middle.
My link has a background gradient in place as well and im trying to apply a background-image on to of this applied to the right.
CSS
#nav a.linkchildflyout:link,
#nav a.linkchildflyout:active,
#nav a.linkchildflyout:visited
{
display:block;
padding:0px 5px;
text-decoration:none;
background: #b95d73; /* Old browsers */
background: -moz-linear-gradient(top, #b95d73 0%, #970e2e 0%, #9c1a38 0%, #910022 52%, #b95d73 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b95d73), color-stop(0%,#970e2e), color-stop(0%,#9c1a38), color-stop(52%,#910022), color-stop(100%,#b95d73)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* IE10+ */
background: linear-gradient(top, #b95d73 0%,#970e2e 0%,#9c1a38 0%,#910022 52%,#b95d73 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b95d73', endColorstr='#b95d73',GradientType=0 ); /* IE6-9 */
color: white;
}
#nav a.linkchildflyout
{
background-image: url(Images/arrow.png);
background-position: right center;
background-repeat: no-repeat;
}
You can (and should) use the :before and :after pseudo-elements to achieve such effects.
Here's a Great article on the subject!
Yes there css3 multiple background property. You can write like this:
#nav a.linkchildflyout{
background:linear-gradient(top, #b95d73 0%, #970e2e 0%, #9c1a38 0%, #910022 52%, #b95d73 100%),url(Images/arrow.png) no-repeat right center;
}
Read this for more http://www.css3.info/preview/multiple-backgrounds/