I have a div
<div class="test">
Some text
</div>
I would like to have different background color for the same div by percent (Horizontal coloring)
-----------------------------
| 20% | 30% | 50% |
| Red | Yellow | Green |
-----------------------------
Is this possible with CSS?
I have a div
<div class="test">
Some text
</div>
I would like to have different background color for the same div by percent (Horizontal coloring)
-----------------------------
| 20% | 30% | 50% |
| Red | Yellow | Green |
-----------------------------
Is this possible with CSS?
Share Improve this question edited Jan 22, 2014 at 13:42 Mr. Alien 157k36 gold badges303 silver badges285 bronze badges asked Nov 19, 2013 at 9:47 ddbddb 1,40611 silver badges17 bronze badges 1- Do you want a gradient or strictly limited color areas? – Igl3 Commented Nov 19, 2013 at 9:51
4 Answers
Reset to default 12You can use CSS3 Gradients[1] to achieve such effect
div {
background: linear-gradient(to right, #ff3236 0%,#ff3033 32%,#3e30ff 32%,#3e30ff 63%,#33ff30 63%,#33ff30 100%);
height: 400px;
}
Demo
You can create such gradients over here
You can also use px as a unit, along with % if you are looking for static gradient widths
Demo (Please add browser-prefixes if you are looking for a cross browser solution, I've not added all the rules in this demo)
Demo 2 (Vertical Split, just change to right to to bottom)
1. More on CSS3 Gradients 2. Browser Support
You could achieve this by using a gradient:
Either google it and create an own. Or use a generator like this:
http://www.colorzilla./gradient-editor/
which gives you the following css-code:
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(left, #ff3019 0%, #d40000 20%, #f2f600 20%, #f2f600 50%, #1e7a00 50%, #1e7a00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3019), color-stop(20%,#d40000), color-stop(20%,#f2f600), color-stop(50%,#f2f600), color-stop(50%,#1e7a00), color-stop(100%,#1e7a00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* IE10+ */
background: linear-gradient(to right, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#1e7a00',GradientType=1 ); /* IE6-9 */
You could create three descendant divs within the parent. Absolutely position them, make the parent transparent, then give the three divs a z-index of 0 so they sit underneath the text, not on top.
This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required
#div{
position:relative;
z-index:1;
min-width:200px;
min-height:200px;
padding:120px 200px 50px;
background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}
#div:before,
#div:after {
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}
DEMO