0

Can you tell me how can I get the effect fade out to left of text or any div using css or JavaScript? The effect looks like here:

enter image description here

In html:

<div class="buttonBackground">
  <div class="divToFadeOut">asdasdasdasdasdasdasd</div>
</div>
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
Mirek
  • 391
  • 3
  • 8
  • 20

3 Answers3

1

If you're wanting to just fade out the letters inside the div then you want to create a png-32 that's about 20-30px wide then apply some CSS to fix it to the right. CSS coming.

<style type="text/css">
  .buttonBackground { 
     position: relative;
     padding: 15px; /* approximate */ 
  }
  .divToFadeOut img { 
     position: absolute; 
     right: 0; 
     top: 0; 
     z-index : 10;  
  }
</style>


<div class="buttonBackground">
  <div class="divToFadeOut">
    asdasdasdasdasdasdasd<img src="horiz-fade.png" alt="" />
  </div>
</div>

In your image editor of choice apply a gradient to an image that's 30px wide and about 100px high ( less important ). It will be transparent on the left side, and it will match the background on the right. That will be a little tricky... as that's also a vertical gradient.

Armstrongest
  • 15,181
  • 13
  • 67
  • 106
  • Yes, I thought this way also, but I want to do universal effect. So if I match the background on the right it will be solution only for this background. – Mirek Sep 07 '11 at 18:13
  • That's true Mirek. You can also do alpha transparency in an overlaid background but you will still need to specify your solid color. It's more universal in that you don't need to create new images, however you will still need a solid color. I'm not sure there's a "CSS" way to just fade the text out, otherwise. See here: http://stackoverflow.com/questions/2293910/css3-transparency-gradient – Armstrongest Sep 07 '11 at 18:18
0

You dont need any javascript at all. It seems that if you specify a div with the text (and give it a width, overflow hidden), with a background image of the button, and then specify another image layered over the text with the opacity moving from 0 to 1 as you go left to right, you would get that effect.

Tejs
  • 40,736
  • 10
  • 68
  • 86
  • but it is also not a universal effect unfortunately. I want to do effect only on div with text, irrespective of container div's background – Mirek Sep 07 '11 at 18:42
0

It can be achieved without changing the HTML

<div class="divToFadeOut">abcdefghijklmnopqrstuvwxyz</div>

apply the following css:

.divToFadeOut { 
   background-color: #CCC; 
   height: 50px; 
   width: 350px; 
   font-size: 36px; 
   line-height: 50px; 
   padding-top: 0px; 
   padding-right: 10px; 
   padding-bottom: 0px; 
   padding-left: 10px; 
   position:relative; /* important */
   overflow:hidden;  /* important */
}
.divToFadeOut:after { 
   content:".";
   text-indent:9999px; 
   position:absolute; 
   top:0px; 
   right:0px; 
   width:350px; 
   height:50px; 
   background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); 
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); 
   background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
   background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
   z-index:9999; 
}
Jose Philip Raja
  • 188
  • 1
  • 6
  • It doesn't work correctly. http://imageshack.us/photo/my-images/545/textfadeoutbad.png/ It makes the fade out effect also one the container div(.buttonBackground) which has the same image background as .divToFadeOut – Mirek Sep 07 '11 at 19:41
  • try adding following css `.buttonBackground { overflow: hidden; }` – Jose Philip Raja Sep 08 '11 at 08:46