純粋なCSSセミ原理

セミの原理により、いくつかのシンプルな画像から非常に長く、繰り返しのないWebページの背景を構築できます。 これは、2011年4月にAlex Walkerによって最初に説明され、すぐに人気を集めました。 サイトdesignfestival.comには、この原則に基づいて作成された背景のギャラリーがあります 。



多くの場合、グラデーションを使用してさらに節約できます。 ほとんどすべてのブラウザがプレフィックスのみのlinear-gradient



プロパティをサポートしているにもかかわらず、背景を作成するために必要なCSSコードの総量は、フラグメントを含む複数のPNGのサイズよりも数倍小さく、さらに重要なこととして、追加のリクエストを必要としませんサーバーに。 そこで、Eric Meyerは最近、Walkerのオリジナル記事であるCSSの最初の2つの背景の実装例を紹介しました。 シンプルなカラーバー（上記）には、2.66 KbのCSSコードが必要でした（プレフィックス付き、縮小および圧縮なし）。 将来、すべての一般的なブラウザでプレフィックスが削除されると、0.59 Kbのコードで十分になります。 元の例では、イメージの重量は約6 KB +サーバーへの3回の要求でした。 後幕の例（下）はさらに印象的です。 プレフィックスを使用しても、約10倍のゲインが得られます。



例のコードは単純明快です。 記事が煩雑にならないように、すべてのプレフィックスを含むフルバージョンを引用しませんでした。 これが一番上の例です。

 /*    */ background-image: linear-gradient( /*   */ 0deg, rgba(171,191,196,0.6), rgba(171,191,196,8) 50%, rgba(255,0,0,0) 50%, rgba(255,0,0,0) ) , linear-gradient( /*   */ 0deg, rgba(203,138,153,0.7), rgba(203,138,153,0.7) 49%, rgba(203,138,153,0.5) 50%, rgba(255,0,0,0) 50%, rgba(255,0,0,0) ) , linear-gradient( /*   */ 0deg, rgba(220,209,185,0) 0%, rgba(220,209,185,0) 20%, rgba(220,209,185,0.4) 20%, rgba(220,209,185,0.8) 80%, rgba(255,0,0,0) 80%, rgba(255,0,0,0) ) ; background-size: 29px 100%, 37px 100%, 53px 100% ; background-repeat: repeat-x; height: 200px;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これが一番下です：

 /*  */ background-image: linear-gradient( /*      */ 90deg, rgba(255,128,128,0.25), rgba(255,128,128,0) 75% ) , linear-gradient( /*   */ -1deg, transparent, transparent 30%, #510A0E 35%, #510A0E 40%, #61100F 43%, #B93F3A 50%, #4B0408 55%, #6A0F18 60%, #651015 65%, #510A0E 70%, #510A0E 75%, rgba(255,128,128,0) 80%, transparent ) , linear-gradient( /*   */ 2deg, #510A0E, #510A0E 20%, #61100F 25%, #B93F3A 40%, #4B0408 50%, #6A0F18 70%, #651015 80%, #510A0E 90%, #510A0E ) ; /*      :( */ background-size: auto, 300px 100%, 109px 100%; background-position: background-repeat: repeat-x; height: 400px;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

線形勾配とセミの原理を最初に組み合わせたのは、2011年6月にRandy Merrillによって発明されました 。 これに先立ち、放射状グラデーションを使用して擬似ランダムノイズを生成する試みはあまり成功していませんでした 。 これまでのところ、このような手法の広範な使用はブラウザの後方性によって妨げられています-グラデーションを機能させるには、同じコードの山を異なるプレフィックスでDXImageTransform.Microsoft.gradient()



、IEをバージョン10でサポートするためにDXImageTransform.Microsoft.gradient()



を一般的に使用するDXImageTransform.Microsoft.gradient()



あります



それにもかかわらず、「cicadients」で実験したい場合、ここにいくつかの便利なリンクがあります：

• さまざまなブラウザーの勾配サポート表 。
• CSS3のパターンのコレクション 。
• 視覚的なグラデーションジェネレーター 。