www.webdeveloper.com
Results 1 to 3 of 3

Thread: Horizontal rule gradient problem

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    25

    Horizontal rule gradient problem

    I have been stuck on this problem for a few hours, and since I am about to get off work, I decided to ask for some helps.

    I have a horizontal rule and created a line that fades at both ends.

    Code:
    hr {
      height: 1px;
      margin: 50px 0;
      background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0,0,0,0)), color-stop(0.5, #AEAEAE), to(rgba(0,0,0,0)));
      background: -webkit-linear-gradient(left, rgba(0,0,0,0), #AEAEAE, rgba(0,0,0,0));
      background: -moz-linear-gradient(left, rgba(0,0,0,0), #AEAEAE, rgba(0,0,0,0));
      background: -o-linear-gradient(left, rgba(0,0,0,0), #AEAEAE, rgba(0,0,0,0));
      background: linear-gradient(left, rgba(0,0,0,0), #AEAEAE, rgba(0,0,0,0));
      border: 0;
      position: relative;
      top:105px;
    }
    Then I have a Radial Gradient coming from the bottom of the HR.

    Code:
    hr:after { 
      display: block; 
      content:'';
      height: 30px;
    
      background-image: -webkit-gradient(radial, 0% 0%, 0, 50% 0%, 116, color-stop(0%, #151515), color-stop(100%, rgba(255, 255, 255, 0)));
      background-image: -webkit-radial-gradient(center top, farthest-side, #151515 0%, rgba(255, 255, 255, 0) 100%);
      background-image: -moz-radial-gradient(center top, farthest-side, #151515 0%, rgba(255, 255, 255, 0) 100%);
      background-image: -o-radial-gradient(center top, farthest-side, #151515 0%, rgba(255, 255, 255, 0) 100%);
      background-image: radial-gradient(farthest-side at center top, #151515 0%, rgba(255, 255, 255, 0) 100%);
    }
    It works great, however for my design I want the graident to on the top, facing upward. Instead of on the bottom of the line and facing down. (Sorry if this sucks as explaining as to what I want). So basically rotated 180 degrees

    Here is the jsfiddle.

    Any ideas?

  2. #2
    Join Date
    Nov 2013
    Posts
    41
    This should make your gradient do a flip (180 degrees):
    Code:
    hr:after {
      display: block;
      content:'';
      height: 30px;
      background-image: -webkit-gradient(radial, 0% 0%, 0, 50% 0%, 116, color-stop(0%, #151515), color-stop(100%, rgba(255, 255, 255, 0)));
      background-image: -webkit-radial-gradient(center top, farthest-side, #151515 0%, rgba(255, 255, 255, 0) 100%);
      background-image: -moz-radial-gradient(center top, farthest-side, #151515 0%, rgba(255, 255, 255, 0) 100%);
      background-image: -o-radial-gradient(center top, farthest-side, #151515 0%, rgba(255, 255, 255, 0) 100%);
      background-image: radial-gradient(farthest-side at center top, #151515 0%, rgba(255, 255, 255, 0) 100%);
      
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
    }

  3. #3
    Join Date
    Nov 2013
    Posts
    41
    Oops. Just realized that you could flip the whole thing!
    http://jsfiddle.net/DaAwesomeP/mMkEU/1/

    Works, but I haven't tested IE. There is probably a strange CSS value for that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles