CSS3テキストフェード

みなさんこんにちは。 本日の投稿は短くなりますが、便利だと思います。

テキストを下、上などに「フェード」する方法についてよく耳にします。

jsにはオプションがあり、画像とテキストの上に重ねられたcssグラデーションだけのオプションがあります。

今日、この問題を解決するためのわずかに異なるアプローチが思い浮かびました。

その実装は3ペニーほど簡単です。



コンテナとテキスト付きブロックの2つのブロックが必要です。

<div class="shadow"> <div class="text"> ---------------------------- </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

 .shadow{ width:400px; margin:20px auto; cursor:text; box-shadow:inset 0px -190px 190px -50px #add7f8; } .text{ color:#000; position:relative; z-index:-1; background:#f9fca3; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今ポイント。

テキストを含むブロックをコンテナに入れ、そこに内側の影を設定します。 影自体は、「減衰」が必要な場所にシフトします。 ただし、内側の影はブロックの輪郭全体に沿って分布します。これを避けるために、負の拡張を与えます。 私たちには多くの分散と大きなシフトがあるという事実のために-影の減衰はそれが必要な場所だけになります。

コンテナの影がその上にあるように、テキストブロックを負のZインデックスに設定する必要があります。

それだけです



プロから：

1）テキストが完全に強調表示されます

2）テキストブロックはストリームからドロップアウトせず、コンテンツをdivラッパーに追加できます（ただし、フェードしなくなります）

3）減衰はブロックサイズに依存せず、常に追加した場所に残ります。



マイナスのうち：

1）Zインデックスが負であるため、テキストにカーソルアイコンを追加する必要がありました（わかりやすくするため）

2）オペラ（11.52）では、ストレッチは多少異なる方法で行われます。その結果、影が非常に強くなります。

3）IEで8までは機能しません



したがって、色、強度、およびサイズをシャドウパラメーターで設定できます。



ここに例



upd同志VitaZheltyakovは、別のシャドウを適用してメインの背景とよりスムーズにマージすることを提案しています。