All geek questions in one place

CSS Gradient: Defining Width in Pixels

Please take a look at this script: http://jsfiddle.net/jpftqc26/

The CSS gradient, starting with black on the left, turns red and then back to black. Really simple.

Is there a way to make the red part 500 pixels wide and the black parts fill the screen, regardless of resolution? With red in the middle, like in a violin.

Is there a way to determine the width in pixels, between color stops, in a CSS gradient?

The code:

.test_gradient { background: linear-gradient( to right, #000000, #000000 20%, #ff0000 20%, #ff0000 80%, #000000 80% );
+5
source share
5 answers

If you want the black part to be flexible and the red part to be fixed, you can 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

0
source

Yes. You can do this using hard pixel points and using the calc function. Just install 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 */ );
+6
source

Another way to do this 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 goes to the left, and each has half the total width

fiddle

+4
source

At the moment, I can’t figure out how to do this, only with CSS gradients and one element.

Given your example and assuming that an additional div is fine, then 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 gives the same effect, uses one additional element and provides a red foreground that will increase to a maximum width of 500 pixels - except that it is black on both sides. If you want red always to be 500 pixels wide, just remove the max-width rule and change the width to 500px.

+1
source

I think the best solution without adding any html element is to use the image as a background:

 .test_gradient { background: url('http://s14.postimg.org/zf0kd84lt/redline.jpg') repeat-y #000 center top; }

http://jsfiddle.net/Monteduro/jpftqc26/3/

0
source

Source: https://habr.com/ru/post/1204128/

More articles:


All Articles