CSS3で画像をデザインします。 パート2

画像のデザインに関する以前の記事では、 box-shadow 、 border-radius 、 transitionプロパティを使用して、完全に丸い角、厳密な影、その他のグラフィック「チップ」を作成するトピックについて説明しました。 なぜなら これらのプロパティは一部のブラウザでは正しく処理されません。クロスブラウザの互換性の問題は、画像を背景として使用するコンテナで画像をラップすることで解決しました。



今日、私はこの方法のもう1つの問題、つまり背景画像のサイズ変更が不可能であり、その結果、この方法をスケーラブル（適応）設計の設計で使用できないという 2番目の部分の翻訳を準備しました。



幸いなことに、回避策が見つかりました。 彼については、記事で説明します。

ソリューション（ デモを参照）

説明されている問題の解決策を検索する際、背景画像を使用するよりも興味深いオプションが見つかりました。 これは、イメージを「ラップ」するコンテナにafter疑似要素を追加することで構成されます。 コンテナ自体は、特定のフィルムで写真に重ねられます。 これはより良い 画像とそのサイズを元の形式で保存します。







繰り返しますが、jQueryを使用して画像をラップします。

<script type="text/javascript"> $(document).ready(function(){ $('#demo img').each(function() { var imgClass = $(this).attr('class'); $(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>'); $(this).removeAttr('class'); }); }); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、次のコードを取得します。

 <span class="image-wrap" style="width: auto; height: auto;"> <img src="image.jpg" /> </span>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のCSSが適用されるもの：

 .image-wrap { position: relative; display: inline-block; max-width: 100%; vertical-align: bottom; } .image-wrap:after { content: ' '; width: 100%; height: 100%; position: absolute; top: -1px; left: -1px; border: solid 1px #1b1b1b; -wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .image-wrap img { vertical-align: bottom; max-width: 100%; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 1px 2px rgba(0,0,0,.4); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

設計例（ デモを参照）

デモページには、さまざまな効果とスタイル（エンボス、埋め込み、光沢など）の例があります。







例は、ほとんどすべての最新ブラウザー、つまりChrome、Firefox、Opera、Safari、IE9で機能します。