This question already has answers here:
How to color part of a box
(6 answers)
Closed 1 year ago.
I'm trying to show only part of the entire box.
<div class="box">30%</div>
.box{
background : linear-gradient(to right, rgba(250,0,0,0),rgba(250, 0, 0, 1));
}
The box looks like this, and I want to make only 30% of the background of the box colored and the rest transparent. I'm not trying to minimize the box to 30% width. I want the box's width to stay 100% but show only 30% of the gradient background.
If you wanna do it with the css background property, here you go:
background: background: linear-gradient(270deg, #F00 0%, rgba(255, 0, 0, 0.473958) 70.00%, rgba(255, 0, 0, 0) 70.01%, rgba(255, 0, 0, 0) 100%);
This is how it'll look line in a white background:
Notice the "70%" standing right there, it's where you can control where in the dimension you want a color to start (in this case rgba(255, 0, 0, 0) at 70% from the right border)
You can read more about it at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()#gradient_with_multi-position_color_stops
If I understand you correctly, you are wanting to have the left 70% transparent and have the gradient show only for the last 30%. If this is what you want you need to add 70% to your first colour stop as follows:
#box1{
background : linear-gradient(to right, rgba(250,0,0,0) 70%,rgba(250, 0, 0, 1));
}
#box2{
background : linear-gradient(to left, red, orange 70%, rgba(250,0,0,0) 30%);
}
#box3{
background : linear-gradient(to right, red 0%, orange 30%, white 30% );
}
.box {
margin-top: 15px;
}
<div class="box" id="box1">30%</div>
<div class="box" id="box2">30%</div>
<div class="box" id="box3">30%</div>
It looks like the OP was looking for something similar to a rainbow progress bar. There are many examples available including this one here: Progress bar different colors
Youn Can acheive it by:
css gradient background generator
with ::before and ::after
with clippath
span{
color:blue;
}
.box{
height:100px;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,0,0,1) 30%);
}
.box2{
margin-top:30px;
position:relative;
height:100px;
}
.box2::before{
content:"";
position:absolute;
background-color:#000;
left:0;
top:0;
height:100%;
width:30%;
z-index:-1;
}
.box3{
background-color:#000;
height:100px;
margin-top:15px;
clip-path: inset(0 70% 0 0);
}
.box4{
margin-top:15px;
position:relative;
height:100px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
}
.box4::before{
content:"";
position:absolute;
top:0;
right:0;
width:70%;
height:100%;
background-color:#fff;
}
<div class="box">
<span>content<span>
</div>
<div class="box2">
<span>content<span>
</div>
<div class="box3">
<span>width clip path</span>
</div>
<div class="box4">
<span>As per your comment</span>
</div>
I am tried to do something in CSS, but I failed miserably.This is what I got so far:
#stripes {
height:90vh;
background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
background-size:4px 4px;
}
<div id="stripes"></div>
As you can see, the "black-white-ratio" is always the same. So you got a 1px stripe, then a 1px gap, 1px stripe, 1px gap,...But what I am trying to achieve, is that there are like 5px space between the stripes.I tried changing the percentages, but that doesn't result in what I try to do either.I'm sure this is possible somehow. Does anyone know how? Thanks for your help!
Something like this using repeating-linear-gradient
#stripes {
height: 100vh;
background: repeating-linear-gradient( -45deg, transparent, transparent 5px, /* gap */
black 6px, /* overall width incluing gap */
black 6px);
}
* {
margin: 0;
padding: 0;
}
<div id="stripes"></div>
I'm trying to create a multiple color background to implement this:
And right now I managed to do this:
What I did:
Desired Background:
I'm trying to do it using gradients, but it seems that it's not possible to combine two gradients to do that. (It's possible to do other things, but not this).
Is there a way to implement this backgorund?
Thanks!
Try this (adjust the percentage and colors as your needs):
.yourdiv{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 70%, #f1f1f1 70%, #f1f1f1 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 );
}
DEMO HERE
i am guessing u need the darker grey section in the desired output to be shown? if so i would suggest to divide it into sections and give individual background.
if u can post some code. i would be happy to help.
Okay, not sure if this is exactly what you want but this is how I'd do psd to css/html. See screen shot below.
Also a WORKING DEMO HERE
Just wrap the whole card in a div and apply a left border would do the trick.
border-left-width: 8px;
border-left-color: rgba(10, 255, 80, 0.75);
border-radius: 5px;
You may remove the box shadow if you don't want, just feel move active with it.
At the end, I managed to do it with this:
This for the GREEN part:
.assignment-item {
padding: 5px 5px 0px 10px !important;
margin:15px auto;
border-radius: 8px;
background: linear-gradient(to right, #4f8b2b 0%,#4f8b2b 2%,#ffffff 2%,#ffffff 100%, transparent) !important;
}
This for the GREY part:
.assignment-item:before{
position:absolute;
z-index:-1;
bottom:0;
left:2%;
width:100%;
height:25%;
content:"";
background-color:#f2f2f2;
}
Here is the result:
What I am trying to do is I want to keep the top 50% of the html button to have a gradient say from #FFF to #BBB and the bottom 50% should remain in one color lets say #111. I can't figure out a way to do it, any help would be largely appreciated.
The code of my button is:
<button class="Button1" type="submit">Submit</button>
The css:
.Button1 {
background-image: linear-gradient(to bottom, #fff 0%, #bbb 50%, #111 50%);
}
This should do the trick in latest browsers. It's up to you to make it cross-browser compatible. (I personally like the Photoshop-esque interface of http://www.colorzilla.com/gradient-editor/)
Here is a sample from Bootstrap that should help you out with button gradients. This also covers most modern browsers.
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
Hope that helps.(these are sort of teal, so you'll have to change that part)
I am wondering how I could style the new <meter> tag.
<meter value=80 min=0 max=100>
80/100
</meter>
I just want to change the background color and the value color, but I can't find the right CSS properties.
For webkit-based browsers I've found these:
meter::-webkit-meter-horizontal-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC), to(#DDD));
}
Pseudo element
meter::-webkit-meter-horizontal-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3), to(#AD7));
}
Pseudo element
meter::-webkit-meter-horizontal-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-horizontal-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}
Pseudo element
meter::-webkit-meter-vertical-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#DDD), to(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC));
}
Pseudo element
meter::-webkit-meter-vertical-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#AD7), to(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3));
}
Pseudo element
meter::-webkit-meter-vertical-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-vertical-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}
Where can I find the right CSS properties for gecko-based browsers (Firefox), Opera and IE?
Here is a cross browser solution in 2019:
meter {
--background: #dadada;
--optimum: forestgreen;
--sub-optimum: gold;
--sub-sub-optimum: crimson;
/* The gray background in Firefox */
background: var(--background);
display: block;
margin-bottom: 1em;
width: 100%;
}
/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {
background: var(--background);
}
/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
background: var(--optimum);
}
/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {
background: var(--optimum);
}
/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--sub-optimum);
}
/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
background: var(--sub-optimum);
}
/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--sub-sub-optimum);
}
/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
background: var(--sub-sub-optimum);
}
<label>
Optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=80>
80/100
</meter>
</label>
<label>
Sub-optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=50>
80/100
</meter>
</label>
<label>
Sub-sub-optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=20>
80/100
</meter>
</label>
Note that the unfilled (grey) portion of the meter is styled with the ::-webkit-meter-bar in Chrome, while firefox uses ::-moz-meter-bar for the filled (green, yellow, red) part and styles the unfilled part with under the meter element it self.
Also note that firefox has pseudo selectors on the meter element to differentiate between optimal and sub-optimal values (:-moz-optimal, :-moz-sub-optimal, and :-moz-sub-sub-optimal; then you simply style the ::-moz-meter-bar pseudo child of the appropriate pseudo selector) while Chrome allows you to style different pseudo elements for that purpose (::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, and ::-webkit-meter-even-less-good-value respectively).
Here is a link that explains what these prefixed pseudo elements mean.
https://scottaohara.github.io/a11y_styled_form_controls/src/meter/
I got the meter styled with a nice subtle gradient in Webkit browsers using the following code:
meter { -webkit-appearance: none; } //Crucial, this will disable the default styling in Webkit browsers
meter::-webkit-meter-bar {
background: #FFF;
border: 1px solid #CCC;
}
meter::-webkit-meter-optimum-value {
background: #87C7DE;
background: -moz-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a1d4e6), color-stop(100%, #6bb4d1));
background: -webkit-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
background: -o-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
background: -ms-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
background: linear-gradient(to bottom, #a1d4e6 0%, #6bb4d1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}
However, Chris Coyier over at CSS-Tricks recommends the following HTML code:
<div class="meter">
<span style="width: 25%"></span>
</div>
... rather than the HTML5 <meter> or <progress> tags. At this point in time (February 2013), I agree with him:
To make things worse, things are very different across browsers, even
between different WebKit browsers. Pseudo elements also work
inconsistently. I hate to leave things hanging like this, but this is
really a topic for another time. Suffice it to say, for these
particular progress bars, the div/span thing is the ticket for now.
Browsers just don't really seem ready to accept the new HTML5 standard tags for <meter> and <progress>. With that said, I'd suggest that people get over the desire to go straight for the future and rather go for something that works visually until further notice. I should also mention that at the current point in time, the current browser support for these tags is at 53%... that's not worth it for me, but I'll leave that to your project's discretion.
Below are the rules for FireFox. I included a screenshot on where to find the rules in the Firefox inspector.
::-moz-meter-bar {
/* Block styles that would change the type of frame we construct. */
display: inline-block ! important;
float: none ! important;
position: static ! important;
overflow: visible ! important;
-moz-appearance: meterchunk;
height: 100%;
width: 100%;
}
:-moz-meter-optimum::-moz-meter-bar {
/* green. */
background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
:-moz-meter-sub-optimum::-moz-meter-bar {
/* orange. */
background: -moz-linear-gradient(top, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
/* red. */
background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}
Meter elements look like progress bars used elsewhere on the platform you are on.
try this to replace the meter elements:
<div style="padding:2px;background:#CCC;">
<div style="width:25%;background:#F00;text-align:center;">
<span>25%</span>
</div>
</div>
For anyone looking for a non-trivial style in 2021, it's certainly possible to create any kind of meter you want through creative use of the background-image property and friends.
The only difference between firefox and chrome is the background: none;
Safari requires -webkit-appearance: none, while Chrome requires -webkit-appearance: meter, so they are incompatible. The hack to make this work is out of scope for this answer.
.scaffolding {
display: grid;
grid-template-columns: 2rem 1fr;
gap: 8px;
}
label {
display: flex;
align-items: center;
justify-content: flex-end;
line-height: 0;
}
meter,
meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::-webkit-meter-inner-element {
background: none;
border-radius: 0;
border: none;
width: 100%;
height: 4rem;
}
meter {
appearance: none;
-moz-appearance: meter;
-webkit-appearance: meter;
width: 20rem; //very important
}
meter::-webkit-meter-optimum-value {
background-image: repeating-linear-gradient(to right,
transparent 0rem, transparent 0.25rem,
green 0.25rem, green 0.5rem, transparent 0.5rem, transparent 0.75rem,
green 0.75rem, green 1rem, transparent 1rem, transparent 1.25rem,
green 1.25rem, green 1.5rem, transparent 1.5rem, transparent 1.75rem,
green 1.75rem, green 2rem, transparent 2rem, transparent 2.25rem),
repeating-linear-gradient(to right,
transparent 0%, transparent 2.25rem, green 2.25rem, green 2.5rem, transparent 2.5rem);
background-size: 2.5rem 3rem, 2.5rem 4rem;
background-position-y: center, center;
background-repeat: repeat-x, repeat-x;
}
meter::-moz-meter-bar {
background: none;
background-image: repeating-linear-gradient(to right,
transparent 0rem, transparent 0.25rem,
green 0.25rem, green 0.5rem, transparent 0.5rem, transparent 0.75rem,
green 0.75rem, green 1rem, transparent 1rem, transparent 1.25rem,
green 1.25rem, green 1.5rem, transparent 1.5rem, transparent 1.75rem,
green 1.75rem, green 2rem, transparent 2rem, transparent 2.25rem),
repeating-linear-gradient(to right,
transparent 0%, transparent 2.25rem, green 2.25rem, green 2.5rem, transparent 2.5rem);
background-size: 2.5rem 3rem, 2.5rem 4rem;
background-position-y: center, center;
background-repeat: repeat-x, repeat-x;
}
<div class="scaffolding">
<label>40</label>
<meter min="0" max="40" value="40"></meter>
<label>20</label>
<meter min="0" max="40" value="20"></meter>
<label>15</label>
<meter min="0" max="40" value="15"></meter>
<label>35</label>
<meter min="0" max="40" value="35"></meter>
<label>4</label>
<meter min="0" max="40" value="4"></meter>
</div>
You can style the meter size and position using something like the following in your css:
meter {
margin: 0 auto 4.5em;
width: 450px;
height: 50px;
display: block;
}
For colours, you need to use a webkit appropriate to your browser.