CSS Fade Out Horizontal Rule/Line Styled Div Effect Without Images

CSS fade out horizontal rule / line styled div effect without images

You can use CSS3's stops and the :after pseudo-element to achieve such an effect. The trick is to add a border to the <hr> element by using the :after pseudo-element and position it in the center of the initial gradient with a soft color that ends with the gradient.

Here is a quick demo, and another demo using some color.

Horizontal line with fade out effect

Reason:

Your problem is not with the mixin but the choice of colors. rgba(0,0,0,0) is equivalent to transparent but you already have a background-color set within the selector. So effectively your gradient becomes from #403a41 to #403a41 which just results in a solid line.

You can verify this behavior by changing the background-color to something else within your selector. In the below snippet, I have set it to red so that you can see what I mean.

.post-title-line {

  background-color: red;

  background-image: -webkit-gradient(linear, left top, right top, from(#403a41), to(rgba(0, 0, 0, 0)));

  background-image: -webkit-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));

  background-image: -moz-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));

  background-image: -ms-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));

  background-image: -o-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));

  width: 100%;

  height: 1px;

  position: relative;

}

<div class="post-title-line"></div>

Styling hr tag in css

You can use multiple backgrounds feature, you need to specify the first background (the behind one) which is gradiented vertically (looks like a shadow) while the second backgrournd (the front one) is gradiented horizontally (looks like fading):

hr {
 clear:both;
 margin-bottom: 0px;
 border: 0;
 height: 6px;
 background-image: linear-gradient(to right, white, transparent, white), 
                   linear-gradient(transparent, rgba(0,0,0,0.55) 150%);
 background-image: -moz-linear-gradient(to right, white, transparent, white), 
                   -webkit-linear-gradient(transparent, rgba(0,0,0,0.55) 150%);
 background-image: -ms-linear-gradient(to right, white, transparent, white), 
                   -webkit-linear-gradient(transparent, rgba(0,0,0,0.55) 150%);  
}

Note that we used the color white as the background of the parent, currently this solution works only if the parent has a solid background, otherwise the color white will be distinct and shows off ugly.

Demo.

How to fade out sides of images?

Here's one way to skin this cat:

HTML:

<div class="frame">
  <div class="fade"></div>
  <img src="picture.jpg" alt="Sample Image"/>
</div>

CSS:

.frame {
    width: 315px;
    height: 165px;
    margin: 20px;
    position: relative;
}

.fade {
    height: 100%;
    width: 100%;
    position:absolute;
    background: -webkit-linear-gradient(left, 
                rgba(0,0,0,0.65) 0%, 
                rgba(0,0,0,0) 20%,
                rgba(0,0,0,0) 80%,
                rgba(0,0,0,0.65) 100%
    );
}

Personally, I'm not a huge fan of the (semantically) unnecessary fade div, and I'm sure there's probably a more clever way to do the same effect without it, but it'll work.

I only included the webkit prefixed rule, if you want to get legit you'd need to add the other vendor prefixes.

Fiddle here.

Update:
If the image is just serving as background—as is the case in your linked example—the gradient and image can both be set on the css for the containing element:

.frame {
  width: 315px;
  height: 165px;
  margin: 20px;

  background-image: url(picture.jpg);
  background-image: -webkit-linear-gradient(left, 
    rgba(0,0,0,0.9) 0%, 
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0.9) 100%
  ),
  url(picture.jpg);
}

...

<div class="frame">
  Content...
</div>

Less muss, less fuss: new-style fiddle with vendor prefixes and everything.

Creating a horizontal rule (HR) divider that contains text with Tailwind CSS

You can use this HTML syntax to create what you want :

<div class="relative flex py-5 items-center">
    <div class="flex-grow border-t border-gray-400"></div>
    <span class="flex-shrink mx-4 text-gray-400">Content</span>
    <div class="flex-grow border-t border-gray-400"></div>
</div>

See here the result: https://play.tailwindcss.com/65JULZ5XES

Alternative to CSS3 hr tag of simple styles with fade out edges if this do not work and a child standard hr tag kick in instead?

Maybe you are better off using hr that way if you are worried about a fall back, but you can probably replace the hr with a div with an image inside or as a background if the browser doesn't support css gradients, to be able to detect such feature you can use Modernizr.

once you have modernizr on your html you can test with jQuery if css gradients are available to your client, I normally do it like this, but there might be a better way of doing this using Modernizr js API.

Please let me know if it works for you, and good luck!

HTML

<hr>
<hr>
<hr>
<hr>

CSS

hr {
    border: 0; height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));       
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    width:100%; 
}

.hr {
    border: 0; height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));       
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

.no-js .glossy,
.no-cssgradients .glossy {
    background: url("images/glossybutton.png");
}

.cssgradients .glossy {
    background-image: linear-gradient(top, #555, #333);
}

(function($){
if( $('.cssgradients').length == 0 ){
    // no css gradients
    $('hr').each(function(index){
        // replace for image maybe?
    });
}
}(jQuery);

CSS cannot fade out and then hide

Add animation-fill-mode: forwards; so that the element you're animating stays on the last (key)frame, and it doesn't start over or refresh to the beginning.

Learn more about animation-fill-mode.

Another way to write this animation:

.hide {
  animation: fadeOut 1s forwards;
}

.hide {

    animation-name:fadeOut;

    animation-duration:1s;

    animation-fill-mode: forwards; /* added */

    /*visibility: hidden;

    display: none;*/

}

@keyframes fadeOut {

    from {

        opacity: 1;

        margin-left: 0%;

    }

    to {

        opacity: 0;

        margin-left: -100%;

        height: 0; /* added */

    }

}

<div class="hide">

  <div style="padding:20px;background:orange;">

    <div style="padding:5px;background:azure;">

      My content

    </div>

  </div>

</div>

   <div>

 Other content

   </div>

Fade borders in CSS

You can specify gradients for colours in certain circumstances in CSS3, and of course borders can be set to a colour, so you should be able to use a gradient as a border colour. This would include the option of specifying a transparent colour, which means you should be able to achieve the effect you're after.

However, I've never seen it used, and I don't know how well supported it is by current browsers. You'll certainly need to accept that at least some of your users won't be able to see it.

A quick google turned up these two pages which should help you on your way:

CSS3 Gradient Borders
http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders

Hope that helps.

CSS Fade Out Horizontal Rule/Line Styled Div Effect Without Images