Please take a look at this fiddle: http://jsfiddle.net/jpftqc26/
A CSS gradient, starts black from left, turns into red, then back to black again. Really simple.
Is there any way I can make the red part 500px wide and the black parts fill the screen, whatever the resolution? With red in the middle, just like in the fiddle.
Is there a way do define a width in pixels, between color stops, in a CSS gradient?
Code:
.test_gradient {
background:
linear-gradient(
to right,
#000000,
#000000 20%,
#ff0000 20%,
#ff0000 80%,
#000000 80%
);
Yes. you can do this with hard pixels points and the use of the calc function.
Just set them as such:
http://jsfiddle.net/jpftqc26/9/
CSS:
.test_gradient {
background:
linear-gradient(
to right,
#000000 0px, /* Starting point */
#000000 calc(50% - 250px), /* End black point */
#ff0000 calc(50% - 250px), /* Starting red point */
#ff0000 calc(50% + 250px), /* End red point */
#000000 calc(50% + 250px), /* Starting black point */
#000000 100% /* End black point */
);
Another way to do it, without using calc(), is to use 2 different gradients
.test_gradient {
background-image:
linear-gradient( to left, #ff0000 0px, #ff0000 250px, #000000 100px), linear-gradient( to right, red 0px, #ff0000 250px, #000000 100px);
background-size: 50.1% 1000px;
background-position: top left, top right;
background-repeat: no-repeat;
}
One goes to the right, the other to the left, and each one has half the total width
fiddle
At the moment I can't think of how to do it with only CSS gradients and a single element.
Given your example, and assuming an extra div is ok, then here's an alternative approach without gradients (http://jsfiddle.net/jpftqc26/2/):
HTML
<body class="background">
<div class="foreground"/>
</body>
CSS
html, body {
width: 100%;
height: 100%;
}
.background {
background-color: #000000;
}
.foreground {
background-color: #ff0000;
width: 100%;
max-width: 500px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
This produces the same effect, uses one additional element, and provides a red foreground that will grow to a max of 500px wide--beyond that it is all black on both sides. If you want the red to always be 500px wide then just remove the max-width rule and change width to 500px.
If you want that black part was flexible and red part was fixed you could use something like this:
html{height:100%;}
.test_gradient {
background: #000000;
position:relative;
margin:0;
height:100%;
}
.test_gradient:after{
content:'';
position:absolute;
top:0;
height:100%;
width:500px;
left:50%;
margin-left:-250px;
background:#f00;
}
DEMO
I think that the best solution, without adding any html element, is to use an image as background:
.test_gradient {
background: url('http://s14.postimg.org/zf0kd84lt/redline.jpg') repeat-y #000 center top;
}
http://jsfiddle.net/Monteduro/jpftqc26/3/
Related
I would like to create "ring" shape with specified thickness (in px) with radial gradient. Desired result is:
However, I don't know how to specify thickness in pixels and ensure that the color transition is smooth from green to transparent (not cut off). My current state is:
div {
background-image: radial-gradient(transparent, green, transparent);
border-radius: 100%;
height: 300px;
width: 300px;
}
<div></div>
Is there any way to make it in HTML and CSS, without using canvas or svg (fiddle). I can't use the image, because I would like to render different widths and thicknesses of this shape.
You can play with CSS radial gradient in this site.
I achieved what you want, here's a demo. Just play around with the percentages to get the desired output.
div {
background: radial-gradient(circle, rgba(0,128,0,0) 50%, rgba(0,128,0,1) 60%, rgba(0,128,0,0) 70%);
width: 300px;
height: 300px;
}
<div></div>
Here is a solution that will give you exactly the 50px of thickness you want. You can also make it a variable to adjust it like you want:
.box {
--t:50px;
background:
radial-gradient(farthest-side,transparent calc(100% - var(--t)), green, transparent 100%);
display:inline-block;
height: 250px;
width: 250px;
}
<div class="box"></div>
<div class="box" style="--t:80px;"></div>
<div class="box" style="--t:100px"></div>
div {
background-image: radial-gradient(transparent, transparent 100px, green 150px, transparent 200px, transparent);
border-radius: 100%;
height: 300px;
width: 300px;
}
<div></div>
I've just used some random px values. Edit them as your requirements. Here is the Santax: radial-gradient(color width, color width, color width, ...) width can be set in px, rem, % or any css unit.
It's not a perfect replica but it's close enough. The trick is to use mask.
div {
border-radius:50%;
background:linear-gradient(green, green, green);
-webkit-mask: radial-gradient(transparent 330px, #000 90px);
mask: radial-gradient(transparent 330px, #000 90px);
}
div:before {
content:"";
display:block;
padding-top:100%;
}
<div class="box"></div>
div {
height: 50px;
width: 100%;
background-image: linear-gradient(to right, white 50%, red 46px);
}
body {
padding: 20px;
}
<div></div>
I'm trying to use linear gradients as a two tone solid color background in a div.
The div can be any width, and I would like one of the colors to have a specified width in px - and the other color to fill up whatever is left of the total width. Is that possible as all?
Like:
div {
background-image: linear-gradient(to right, white auto, red 46px);
}
You Can simply go with:
Use the fixed background colour first then just put 0 in the second colour it will fill the rest of the div.
background: linear-gradient(to right, lightgreen 19px, darkgreen 0);
This will work fine for you.
div {
display: inline-block;
background: linear-gradient(to right, lightgreen 19px, darkgreen 0);
width: 50%;
height: 100px;
color: white;
text-align: center;
}
<div>
Test
</div>
Hope this was helpfull.
You can try this :
Use the value needed for the first color (here 46px) and simply use a small value for the second color (between 0 and 45px). Then change the direction of the gradient depending on your needs.
div.first {
height:100px;
background-image: linear-gradient(to right, red 46px, blue 40px);
}
div.second {
margin-top:10px;
height:100px;
background-image: linear-gradient(to left, red 46px, blue 0px);
}
<div class="first">
</div>
<div class="second">
</div>
I think this is a nice time to use css variables, we can set a variable as a breakpoint and only have to update that one variable when moving the gradient.
div {
--gradient-break: calc(100% - 46px);
height: 50px;
background-image: linear-gradient(to right, darkgreen var(--gradient-break), tomato var(--gradient-break));
}
<div></div>
You can use this method to make a Javascript controlled progress bar.
let progressCounter = 0;
setInterval(function() {
if (progressCounter >= 100) {
progressCounter = 0;
} else {
progressCounter++;
}
document.querySelector('.progress').style.setProperty('--gradient-break', progressCounter + "%")
}, 50)
div.progress {
--gradient-break: 0%;
height: 50px;
background-image: linear-gradient(to right, darkgreen var(--gradient-break), tomato var(--gradient-break));
}
<div class="progress"></div>
I'm setting the progress percentage with document.querySelector('.progress').style.setProperty('--gradient-break',progressCounter+"%") and the css is taking care of the rest.
Hope this is helpful.
i am trying to create a grid in a div using background.
naturally, the background-size property is a nice way to create a grid, where a size of 10% will create 10 evenly-spaced cells in the div, e.g.:
div{
width:200px;
border:solid 1px black;
background-size: 10% 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
}
<div>x</div>
however, i also need box-sizing to be "border-box" because otherwise the box takes up more pixels than specified via the width property. and this causes all kinds of havoc in Chrome with the background-size by percentage specification, e.g.:
div{background-color:white;}
#d1 {
width:200px;
border:solid 1px black;
background-size: 10% 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
padding:5px;
box-sizing:border-box;
}
#d2 {
width:200px;
border:solid 1px black;
background-size: 10% 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
padding:5px;
}
<div id="d1">more than 10 cells</div>
<p>
<div id="d2">box is bigger than 200px</div>
note that there are more than 10 cells displayed in the top div (d1), despite the fact that each is supposed to be 10% of the div width.
it seems that this is only a Chrome issue, but if someone has the solution to this, please let me know.
I admit I never played with this thing before, but it looks like you need to account for the 1px width of the background-image. Now don't ask me why, but it just works. Tested it with different percentages and widths. If you need the why, not only the how, you'll have to dig through W3C's docs yourself or wait for a better documented answer.
div {
background-color:white;
width:200px;
border:solid 1px black;
background-size: calc(10% + 1px), 1px;
background-image: linear-gradient(to left, gray 1px, transparent 1px);
padding:5px;
box-sizing:border-box;
}
div ~ div {
width:300px;
}
<div>exactly 10%</div>
<p>
<div>also exactly 10%</div>
Cheers!
Check the progress bar code. How it work?
.progress-bar{
background-color: blue;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
height: 40px;
width: 400px;
}
<div class="progress-bar"></div>
background-size: 40px 40px; that means 40px width and 40px width for the box. How two width work tougher? background-size First place image then place gap. Background image will start 0 to 40px then place 40px gap then 40px image. It's infinity until full width is complete. Look your first snippet background-size: 10% 1px; Browser render 10 gap from total width using 1px width image.
Note: background-size will work when you set background-image. Otherwise background-size property will not work.
Hope this help.
Andrei Gheorghiu's answer was really good, but wasn't consistent across all browsers, and was a few pixels off for some separator locations. Anyway, here's the more consistent answer, seems to work everywhere:
div {
background-color:white;
width:200px;
border:solid 1px black;
background: repeating-linear-gradient(to left, red, red 1px, white 2px, white 10%);
box-sizing:border-box;
}
div ~ div {
width:300px;
}
<div>exactly 10 red separators</div>
<div>also exactly 10 red separators</div>
I'm trying to put my triangle responsive, because it only works on desktop computers, how can i do that?
I have a code here, and i want to turn my div into a responsive div, for mobile phones, tablets...
triangle code:
*{
background-color: black;
padding:0;
margin:0 auto;
}
.triangle-down {
width: 0px;
height: 0px;
border-style: solid;
border-width: 642px 187.5px 0 187.5px;
border-color: #007bff transparent transparent transparent;
}
html code
<div class="triangle-down"></div>
if you do not mind using background-radient, this could be an alternative as body background:.
http://codepen.io/gc-nomade/pen/mBjtC
body {
background:
linear-gradient(
to top left,
black,
black 50%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,0)) top center no-repeat,
linear-gradient(
to top right,
black,
black 50%,
#007bff 50%,
#007bff ) top center no-repeat;
background-size:40% 200%;/* set your own values and units here */
background-color: black;
padding:0;
margin:0 auto;
min-height:100%;
}
html {
height:100%;
}
You should probably use percentages instead of pixels, you can work out the equivalent by dividing the pixel size by the context, which is usually the size of the body container which you haven't declared but is usually 1000px for ease. To use ems, it's divided by the base piel size, or you can use a converter, if you haven't declared a base font size it's usually 16px http://pxtoem.com/
I have a striped background with a gradient which I want repeated in x and stretched in y. I thought this would work:
background: url(bg.jpg) repeat-x;
background-size: auto 100%;
But it either stretches in y or repeats in x, never both at same time:
http://codepen.io/anon/pen/JCjEb
Edit: Note that I cannot simply repeat in y since the striped background also have a gradient (dark in bottom, lighter at top).
Instead of giving it width auto, give it the width of the image (36px).
http://codepen.io/thgaskell/pen/Bjsix
CSS
.c {
background-size: 36px 100%;
}
You can just use background: url(bg.jpg) repeat; without background-size. Here is the example.
The problem is that when you set the background-size to auto 100%, it's going to stretch the whole image proportionally, thus making the stripes too wide and distorted. Set the x part of the background-size to the width of the original image, and it won't stretch anymore.
.b {
background: url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif) repeat;
background-size: 35px 100%;
}
http://jsfiddle.net/BsAcY/
Try background: url(bg.png) center repeat-x;
Not sure about IE8 and below though, if that's a problem.
.a { background:
url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif)
repeat; display:block; width:500px; }
Is that what you need?
Try this
** HTML **
<div class="b"></div>
** CSS for bg image & gradient **
.b { /* unprefixed gradient for example only*/
background:
linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%),
url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif);
background-repeat:repeat;
}
div {
height: 300px;
width: 200px;
margin-right: 50px;
border:1px solid grey;
}
Codepen Example