In today’s post I would like to share with you my method of creating fading lines without the use of images.
First of all it is necessary to prepare html markup. I am going to 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 the lines we will use css3- property: linear – gradient. It is supported in all last stable versions of browsers, except IE. There is a gradient support in IE10, but IE10, unfortunately, works only under Windows 8, therefore we will not talk in this article about the support of IE.
A simple dark gradient with fading looks like this: background – image: linear – gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));
To make one of these lines we will “flatten” this gradient to 1 pixel on a height, and for this purpose we will use background – size property. We will set the parameters of background – size: 100% 1px; and we will get a gradient in all width of the block and in a 1 pixel on a height. As a result you get 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)); /* we specify a corner 0deg in order that a gradient began from the left edge, otherwise a gradient will go from the top */
background-repeat: no-repeat; /* we take away the reiteration of the gradient, it is necessary for work of background - size */
background-position: 50% 100%;
background-size: 100% 1px;
}
But we will go farther and will add another line to create a volume effect. It will be of a white color. But here is the problem, we cannot place it near the light gradient, otherwise they will be imposed on each other. The use of 2px line will not suit us too, because they will look inharmoniously on a different background.
In such case we will need to use another css3 property: background – origin. It can take on three values: content – box, padding – box, border – box. This property allows positioning a background in relation to block’s marking.
To add our light line under the dark, first we will add a transparent frame from below (border: 1px solid transparent;), and then we will set background – origin: border – box for the gradient;
And in the total after the 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 in the end it is possible to add the radial gradient of such kind:
radial - gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);
You can see the final result at jsfiddle demo.
You might also be interested in..
Stop-watch on CSS3 Without Any Pictures or Scripts
Round Avatars in CSS3
Tooltips in CSS3 and HTML5
Making an Image Gallery with CSS3
How to Create Progress Bar with CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
CSS3 Now! Transitions
CSS3 Now! Animation, Transparency, and more (Part 2)
Sprite animation in CSS3
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools