как делить исчезать

Question

Можете ли вы сказать мне, как я могу получить эффект исчезнуть слева от текста или любого div с использованием CSS или JavaScript?Эффект выглядит так:

В html:

<div class="buttonBackground">
  <div class="divToFadeOut">asdasdasdasdasdasdasd</div>
</div>

Answer 1

Если вы хотите просто потушить буквы внутри div, то вы хотите создать png-32 шириной около 20-30 пикселей, а затем применить CSS, чтобы исправить это справа.CSS приходит.

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

В выбранном вами редакторе изображений примените градиент к изображению шириной 30 пикселей и высотой около 100 пикселей (менее важно).Он будет прозрачным с левой стороны, и будет соответствовать фону справа.Это будет немного сложно ... так как это также вертикальный градиент.

Answer 2

Это может быть достигнуто без изменения HTML

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

применить следующий 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; 
}

Answer 3

Вам вообще не нужен javascript.Кажется, что если вы укажете div с текстом (и задаете его ширину, скрытый переполнение), с фоновым изображением кнопки, а затем укажите другое изображение, наложенное поверх текста с непрозрачностью, перемещающейся с 0 на 1 по мере продвиженияслева направо, вы получите этот эффект.