CODEWITHSUNDEEP
javascriptcssxhtml
Mirek
Mirek

Reputation: 391

how to div fade out

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>

Upvotes: 0

Views: 1049

Answers (3)

Jose Philip Raja
Jose Philip Raja

Reputation: 188

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; 
}

Upvotes: 0

Armstrongest
Armstrongest

Reputation: 15409

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.

Upvotes: 1

Tejs
Tejs

Reputation: 41236

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.

Upvotes: 0

Related Questions