HTML 5実践--css 3を使って私たちの画像スタイルを豊かにする方法-part 2
7611 ワード
転載はオリジナル住所を明記してください:http://www.cnblogs.com/softlover/archive/2012/11/23/2780892.html
以前のチュートリアル「HTML 5実践--css 3画像スタイル」では、background-imageパッケージを画像に追加する方法を紹介し、box-shadowとborder-radiusを利用して画像に多様なスタイルを設定し、興味のある方は振り返って読むことができます.しかし、最近私はPhotoTouchのテーマを設計している間に問題に直面し、background-imageのサイズを調整することができず、応答式の設計にはあまり理想的ではありません.今日は問題を解決しようとします.
demoプレビューアドレス:http://webdesignerwall.com/demo/css3-image-styles-part-2/
に質問
ほとんどのブラウザでは、画像のborder-radiusと埋め込みbox-shadow効果をレンダリングするのは完璧ではありません.これは、画像にレリーフ、ハイライト、圧縮などの効果を作成できないことを意味します.
以前のソリューション
以前の解決策では,画像のパッケージにbackground−image属性を追加し,上記の問題を解決した.
background-imageの問題点
background-imageを使用する問題は、ピクチャサイズのダイナミックスケールを実現できないことです.したがって,この方式は画像のスケーリングを要求する応答式設計にはそれほど適用されない.
新しいソリューション
新しい解決策は以前と少し似ていますが、css 3の効果をピクチャマスク層:after擬似クラスに追加すると、ピクチャが完全性と収縮性を維持する利点があります.
ダイナミックエフェクトを実現するjquery文
jqueryは、demoの下のすべての画像をクエリーし、spanパッケージを動的に追加します.
出力結果
上のコードは次の結果を出力します.
cssテクニック
cssテクニックは簡単で、マスクの効果が使われています.image-wrap:afterの上でborder-radiusは同時に画像と.image-wrap:afterの上に、スタイル効果を実現します.
css
画像スタイル
浮き彫り、ジグザグ、圧縮、ハイライトなど、さまざまな効果は、複数の埋め込みbox-shadowsプロパティを使用することで実現できます.もちろん、beforeを使用することで、ハイライトなどの別のレイアウト効果を実現することもできます.詳細については、demoソースコードを参照してください.その後、ブラウザウィンドウのサイズを調整して、画像のサイズが変わったかどうかを確認できます.
ブラウザ互換性
このテクニックは、JavascriptとCSS 3をサポートするほとんどの現代ブラウザでサポートされています.例えば、Chrome、Firefox、Safari、and IE 9+です.
原文住所:http://webdesignerwall.com/tutorials/css3-image-styles-part-2
HTML 5実践シリーズ
以前のチュートリアル「HTML 5実践--css 3画像スタイル」では、background-imageパッケージを画像に追加する方法を紹介し、box-shadowとborder-radiusを利用して画像に多様なスタイルを設定し、興味のある方は振り返って読むことができます.しかし、最近私はPhotoTouchのテーマを設計している間に問題に直面し、background-imageのサイズを調整することができず、応答式の設計にはあまり理想的ではありません.今日は問題を解決しようとします.
demoプレビューアドレス:http://webdesignerwall.com/demo/css3-image-styles-part-2/
に質問
ほとんどのブラウザでは、画像のborder-radiusと埋め込みbox-shadow効果をレンダリングするのは完璧ではありません.これは、画像にレリーフ、ハイライト、圧縮などの効果を作成できないことを意味します.
以前のソリューション
以前の解決策では,画像のパッケージにbackground−image属性を追加し,上記の問題を解決した.
background-imageの問題点
background-imageを使用する問題は、ピクチャサイズのダイナミックスケールを実現できないことです.したがって,この方式は画像のスケーリングを要求する応答式設計にはそれほど適用されない.
新しいソリューション
新しい解決策は以前と少し似ていますが、css 3の効果をピクチャマスク層:after擬似クラスに追加すると、ピクチャが完全性と収縮性を維持する利点があります.
ダイナミックエフェクトを実現する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(){
$('#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テクニック
cssテクニックは簡単で、マスクの効果が使われています.image-wrap:afterの上でborder-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;
}画像スタイル
浮き彫り、ジグザグ、圧縮、ハイライトなど、さまざまな効果は、複数の埋め込みbox-shadowsプロパティを使用することで実現できます.もちろん、beforeを使用することで、ハイライトなどの別のレイアウト効果を実現することもできます.詳細については、demoソースコードを参照してください.その後、ブラウザウィンドウのサイズを調整して、画像のサイズが変わったかどうかを確認できます.
ブラウザ互換性
このテクニックは、JavascriptとCSS 3をサポートするほとんどの現代ブラウザでサポートされています.例えば、Chrome、Firefox、Safari、and IE 9+です.
原文住所:http://webdesignerwall.com/tutorials/css3-image-styles-part-2
HTML 5実践シリーズ