CSSテキストのフェード

サイトを作成するときに、テキストの一部のみを表示する必要がある場合があります。 フォローアップが続くことをユーザーに明確にするために、たとえば、省略記号または「続きを読む」リンクを付けることができます。 しかし、テキストをフェードアウトさせる非常に美しい方法があります。

危機にwhatしているものを明確にするために、すぐに例を挙げます。

私が1日に見つけたすべての資料の中で、 ここで説明したシンプルで明確な方法が最も適していました。 しかし、大きなマイナス点があります。シャドウの配置は難しく、インデントを使用してサイドエッジを分離する必要があります。

テキストを暗くする簡単な方法を探している人のために、簡単な例を示します。



したがって、暗くするテキストがあるブロックは1つだけ必要です。

<div id="textbox"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、たった2つのCSSクラス：

 #textbox{ max-height:100px; overflow:hidden; margin-top:-20px; } #textbox:before{ content:""; display:block; height:20px; position:relative; top:80px; background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今要点：

before擬似クラスを使用して、グラデーションで塗りつぶした小さなブロックを作成します。 デフォルトでは、ブロックの上部にテキストがあります。 position：relativeを使用して、このブロックを下に移動して、テキストの最後の行の1つ（または複数）をカバーします。 それだけです



私たちが区別できる利点のうち：

-実装の容易さ（cssのみを使用）

-強調表示されたテキスト



マイナスのうち：

-バージョン9までのIEでは動作しません（誰が疑うでしょう）

-固定高ブロックに適しています