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;
}
Related
I need change the jsf(now use jsf 2.2) button text style. I didn't find any default styles in the other forums(like .ui-buttons, .ui-buttons-text-only, it doesn't work).
As example, I need a button with sizes(200, 200, blue), in the center of this rectangle new (20,20, white) and the simple text "blah". If
try
<h:button value="Logout" outcome="welcome" styleClass="button">
<h:outputLabel value="blah" styleClass="some_style">
</h:button>
result will be next -> button, after it the text 'blah', but I need text inside button.
Have anyone same problem?
I need much same butons and commandButtons. Maybe some can give advice about reasons to create own jsf element with need parameters and styles?
Thx
Because there is small space in comment section, I post it as answer.
For changing background, font size, style of button the following syntax and styles can be used:
html
<h:commandButton value="blah" action="welcome" styleClass="richButton" />
css
.richButton {
margin:0 5px 0 0;
padding:5px 10px 5px 10px;
height:29px;
font-size:12px;
color:#262626;
font-weight:bold;
border:1px #ccc solid;
border-radius:5px;
cursor:pointer;
font-family:Arial, Helvetica, sans-serif;
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Opera */
background: -o-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #E3E3E3));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #FFFFFF 0%, #E3E3E3 100%);
}
.richButton:hover:enabled {
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Opera */
background: -o-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CCCCCC));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%);
}
.richButton:active:enabled {
/* IE10 Consumer Preview */
background: -ms-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Mozilla Firefox */
background: -moz-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Opera */
background: -o-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0F0F0), color-stop(1, #CCCCCC));
/* Webkit (Chrome 11+) */
background: -webkit-linear-gradient(top, #F0F0F0 0%, #CCCCCC 100%);
/* W3C Markup, IE10 Release Preview */
background: linear-gradient(to bottom, #F0F0F0 0%, #CCCCCC 100%);
}
.richButton:disabled {
font-weight: normal;
color: #888888;
}
You need change size, border size, border radius, background.
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 */
}
I want to place a gradient over an <img> tag. src attribute of the tag is angular-item. For example:
<img src={{value.angitem.image}}>
I've tried to make css class:
.pickgradient {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
}
and
<img src={{value.angitem.image}} class="pickgradient ">
but it doesn't work. What should I do?
With z-index :
You may use a container and put the gradient on that container. Then use a negative z-index to position image behind the gradient.
.pickgradient {
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
<div class="pickgradient">
<img src="http://i.imgur.com/HDssntn.jpg" />
</div>
With a pseudo element :
As commented, you can also use a pseudo element with the gradient and absolute positioning to put the gradient over the image :
.pickgradient{
position:relative;
display:inline-block;
}
.pickgradient:after {
content:'';
position:absolute;
left:0; top:0;
width:100%; height:100%;
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
display:block;
height:200px;width:auto;
}
<div class="pickgradient">
<img src="http://i.imgur.com/HDssntn.jpg" />
</div>
For 2020, mask-image can work well. It works in modern browsers (not IE, -webkit- prefix in many browsers currently). https://caniuse.com/#feat=css-masks
img {
height: 200px;
width: auto;
mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
<img src="http://i.imgur.com/HDssntn.jpg" />
I recommend you to set background-color:black; to your container and then set class img{opacity:0.4}. Then you will get the same effect as you got with
backgroundImage:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img_url))
My example on Slide:
.Slide {
position: relative;
border: 1px solid blue;
min-width: 100%;
height: 100%;
transition: 0.5s;
background-color: rgb(0, 0, 0);
}
.Slide img{
position: relative;
border: 1px solid blue;
min-width: 100%;
height: 100%;
transition: 0.5s;
opacity: 0.4;
}
try placing a div over the image in question and placing the gradient on the div instead of the image.
I've some scenario where I should use multiple background color to one div. It's better for me rather than using background images or additional div. But, I can't find easier way to use it by CSS. So, I need help about some scenario. Please, see the image:
(1) I want to build "A". for that I wrote:
div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }
But, after writing that code, it'll like "B". But, I want exactly like "A". So, by css/css3 how can I do it(without adding more divs)?
(2) Is it possible to make one portion smaller than other portion? For example, at "C", blue color is smaller(at height) than the other portion. How, can I apply multiple background color to one div with making one portion smaller like "C"(without adding additional divs to "C")?
Update:
After #Mohammad's answer, I've tried with that way. But, for "C" scenario, I can't decrease the height of blue portion. Can you please, tell me how can I do it?
jsfiddle.net/mFjQ6
The A div can actually be made without :before or :after selector but using linear gradient as your first try. The only difference is that you must specify 4 positions. Dark grey from 0 to 50% and ligth grey from 50% to 100% like this:
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);
As you know, B div is made from a linear gradient having 2 positions like this:
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%);
For the C div, i use the same kind of gradient as div A ike this:
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
But this time i used the :after selector with a white background like if the second part of your div was smaller. * Please note that I added a better alternative below.
Check this jsfiddle or the snippet below for complete cross-browser code.
div{
position:relative;
width:80%;
height:100px;
color:red;
text-align:center;
line-height:100px;
margin-bottom:10px;
}
.a{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}
.b{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}
.c{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */
}
.c:after{
content:"";
position:absolute;
right:0;
bottom:0;
width:50%;
height:20%;
background-color:white;
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
There is also an alternative for the C div without using a white background to hide the a part of the second section.
Instead, we make the second part transparent and we use the :after selector to act as a colored background with the desired position and size.
See this jsfiddle or the snippet below for this updated solution.
div {
position: relative;
width: 80%;
height: 100px;
color: red;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
}
.a {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, #f6f6f6), color-stop(100%, #f6f6f6));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
/* IE6-9 */
}
.b {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(100%, #f6f6f6));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #f6f6f6 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
/* IE6-9 */
}
.c {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#ffffff00', GradientType=1);
/* IE6-9 */
}
.c:after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 80%;
background-color: #33ccff;
z-index: -1
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
You could apply both background-color and border to make it look like 2 colors.
div.A { width: 50px; background-color: #9c9e9f; border-right: 50px solid #f6f6f6; }
The border should have the same size as the width.
Sorry for misunderstanding, from what I understood you want your DIV to have three different colors with different heights. This is the output of my code:
,
If this is what you want try this code:
div {
height: 100px;
width:400px;
position: relative;
}
.c {
background: blue; /* Old browsers */
}
.c:after{
content: '';
position: absolute;
width:20%;
left:0;
height:110%;
background: yellow;
}
.c:before{
content: '';
position: absolute;
width:40%;
left:60%;
height:140%;
background: green;
}
<div class="c"></div>
it is compatible with all the browsers, change values to fit your application
background: #fdfdfd;
background: -moz-linear-gradient(top, #fdfdfd 0%, #f6f6f6 60%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(60%,#f6f6f6), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f2f2f2',GradientType=0
With :after and :before you can do that.
HTML:
<div class="a"> </div>
<div class="b"> </div>
<div class="c"> </div>
CSS:
div {
height: 100px;
position: relative;
}
.a {
background: #9C9E9F;
}
.b {
background: linear-gradient(to right, #9c9e9f, #f6f6f6);
}
.a:after, .c:before, .c:after {
content: '';
width: 50%;
height: 100%;
top: 0;
right: 0;
display: block;
position: absolute;
}
.a:after {
background: #f6f6f6;
}
.c:before {
background: #9c9e9f;
left: 0;
}
.c:after {
background: #33CCFF;
right: 0;
height: 80%;
}
And a demo.
You can create something like c using CSS multiple-backgrounds.
div {
background: linear-gradient(red, red),
linear-gradient(blue, blue),
linear-gradient(green, green);
background-size: 30% 50%,
30% 60%,
40% 80%;
background-position: 0% top,
calc(30% * 100 / (100 - 30)) top,
calc(60% * 100 / (100 - 40)) top;
background-repeat: no-repeat;
}
Note, you still have to use linear-gradients for background types, because CSS will not allow you to control the background-size of a single color layer. So here we just make a single-color gradient. Then you can control the size/position of each of those blocks of color independently. You also have to make sure they don't repeat, or they'll just expand and cover the whole image.
The trickiest part here is background-position. A background-position of 0% puts your element's left edge at the left. 100% puts its right edge at the right. 50% centers is middle.
For a fun bit of math to solve that, you can guess the transform is probably linear, and just solve two little slope-intercept equations.
// (at 0%, the div's left edge is 0% from the left)
0 = m * 0 + b
// (at 100%, the div's right edge is 100% - width% from the left)
100 = m * (100 - width) + b
b = 0, m = 100 / (100 - width)
so to position our 40% wide div 60% from the left, we put it at 60% * 100 / (100 - 40) (or use css-calc).
background: linear-gradient(152deg , #0A64B1 60%,#0A64B1 33%,#2C3E52 45%,#2C3E52 156%);
You can do this way:-
In CSS file:-
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
display: flex;
}
.split {
height: 100vh;
width: 50%;
top: 0;
}
.left {
background-color: lightblue;
left: 0;
}
.left h1 {
text-align: center;
margin-top: 20%;
font-size: 90px;
}
.right {
background-color: lightsalmon;
right: 0;
}
.footer {
background-color: black;
color: white;
font-size: 13px;
padding: 1px;
}
</style>
And in body:-
<body>
<div class="container">
<div class="split left">
<h1>Welcome<br>to<br>website</h1>
</div>
<div class="split right">
<h2>welcome<br>to<br>website</h2>
</div>
</div>
<div class="footer">
<h3>copyright ©</h3>
</div>
</body>
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/