Fading stripes on CSS3 without images
I want to share with you my way of creating fading strips without using images. Next under the cat describes the method of creating such elements with comments and examples.
First of all, it is necessary to prepare an html layout. I will work with the following code:
')
To create stripes we will use the css3-property: linear-gradient. It is supported in all latest stable versions of browsers except IE. IE10 has support for gradients, but, unfortunately, IE10 only works under Windows 8, so this article will not talk about IE support.
A simple dark gradient with attenuation looks like this: background-image: linear-gradient (rgba (0,0,0,0), rgba (0,0,0,0,1), rgba (0,0,0,0));
To build a single strip, we “flatten” this gradient up to 1 pixel in height, and the background-size property will help us with this. Set the background-size parameters in it: 100% 1px; and get a gradient in the entire width of the block and 1 pixel in height. The result is the following code:
But we will go further and add another strip to create a volume effect. We will have it, respectively, white.
But bad luck, we can not place it in the same place as the light gradient, otherwise they will overlap each other. Using 2px stripes will not work either, since they will look inharmonious on a different background.
In this case, another css3 property will be useful to us: background-origin. It can take three values: content-box, padding-box, border-box. This property allows you to position the background relative to the layout of the block.
To add our light bar below the dark one, we first add a transparent frame at the bottom (border: 1px solid transparent;), and then set the background-origin gradient: border-box;
And finally, after a combination of gradients, our code will look like this:
And finally, you can add a radial gradient of this type:
radial-gradient (50% 100%, ellipse cover, rgba (0,0,0, 0.05), rgba (0,0,0,0) 50%);
The final version can be viewed on the jsfiddle demo .
First of all, it is necessary to prepare an html layout. I will work with the following code:
<html> <body> <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> </body> </html> ')
To create stripes we will use the css3-property: linear-gradient. It is supported in all latest stable versions of browsers except IE. IE10 has support for gradients, but, unfortunately, IE10 only works under Windows 8, so this article will not talk about IE support.
A simple dark gradient with attenuation looks like this: background-image: linear-gradient (rgba (0,0,0,0), rgba (0,0,0,0,1), rgba (0,0,0,0));
To build a single strip, we “flatten” this gradient up to 1 pixel in height, and the background-size property will help us with this. Set the background-size parameters in it: 100% 1px; and get a gradient in the entire width of the block and 1 pixel in height. The result is the following code:
.container li { background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)); /* 0deg , */ background-repeat: no-repeat; /* , background-size */ background-position: 50% 100%; background-size: 100% 1px; } But we will go further and add another strip to create a volume effect. We will have it, respectively, white.
But bad luck, we can not place it in the same place as the light gradient, otherwise they will overlap each other. Using 2px stripes will not work either, since they will look inharmonious on a different background.
In this case, another css3 property will be useful to us: background-origin. It can take three values: content-box, padding-box, border-box. This property allows you to position the background relative to the layout of the block.
To add our light bar below the dark one, we first add a transparent frame at the bottom (border: 1px solid transparent;), and then set the background-origin gradient: border-box;
And finally, after a combination of gradients, our code will look like this:
.container li { background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25)); background-repeat: no-repeat, no-repeat; background-position: 50% 100%, 50% 100%; background-size: 100% 1px, 100% 1px; background-origin: padding-box, border-box; border-bottom: 1px solid transparent; } And finally, you can add a radial gradient of this type:
radial-gradient (50% 100%, ellipse cover, rgba (0,0,0, 0.05), rgba (0,0,0,0) 50%);
The final version can be viewed on the jsfiddle demo .
Source: https://habr.com/ru/post/140215/
All Articles