HTML5実践～css3を使って画像スタイルを豊かにする方法を詳しく解説(2)

前回のチュートリアル「HTML5実践 - css3 画像スタイル」では、画像に background-image パッケージを追加し、box-shadow と border-radius を使用して画像にさまざまなスタイルを設定する方法を紹介しました。興味がある方はご覧ください。友達は読み返すことができます。しかし最近、PhotoTouch テーマをデザインするときに、背景画像のサイズを調整できないという問題が発生しました。これはレスポンシブ デザインには理想的ではありません。今日はその問題を解決してみます。

問題

ほとんどのブラウザは、画像の境界線の半径と埋め込まれたボックスシャドウの効果を完全にはレンダリングしません。つまり、画像にエンボス、ハイライト、圧縮などの効果を作成することはできません。

前の解決策

前の解決策では、背景画像 属性 を画像のパッケージ化に追加し、上記の問題を解決しました。背景画像を使用する場合の問題は、画像サイズを動的に拡大縮小できないことです。したがって、この方法は画像の拡大縮小が必要なレスポンシブデザインにはあまり適していません。

新しいソリューション

新しいソリューションは、前のソリューションと多少似ていますが、画像マスクレイヤーの:after疑似クラスにCSS3効果を追加します。これの利点は、画像の整合性と縮小性が維持されることです。

動的効果を実現する

jquery

ステートメント

jqueryは、#demoの下にあるすべての画像をクエリし、それらにspanパッケージを動的に追加します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function(){

    $(&#39;#demo img&#39;).each(function() {        
    var imgClass = $(this).attr(&#39;class&#39;);
        $(this).wrap(&#39;<span class="image-wrap &#39; + imgClass + &#39;" style="width: auto; height: auto;"/>&#39;);
        $(this).removeAttr(&#39;class&#39;);
    });

});</script>

出力結果

上記のコードは以下の結果を出力します:

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

css手法

css手法は、.image-wrap:afterで使用する非常にシンプルな手法です。 -radius は、スタイル効果を実現するために画像と .image-wrap:after の両方で使用されます。

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;

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

画像スタイル

複数のインラインボックスシャドウ属性を使用することで、レリーフ、カットアウト、圧縮、ハイライトなどのさまざまな効果を実現できます。もちろん、:before を使用して、ハイライトなどの他のレイアウト効果を実現することもできます。デモのソース コードを表示して詳細を確認できます。その後、ブラウザ ウィンドウのサイズを変更して、画像サイズが変更されたかどうかを確認できます。

ブラウザの互換性

この手法は、Chrome、Firefox、Safari、IE9+ など、Javascript と CSS3 をサポートするほとんどの最新のブラウザでサポートされています。

以上がHTML5実践～css3を使って画像スタイルを豊かにする方法を詳しく解説(2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。