CSSを使用して斜めの画像を作成します

キーテイクアウト

• CSSを使用して斜めの画像を作成するための4つの異なる手法があり、それぞれがさまざまなレベルのブラウザーサポートを提供しています。すべての方法は、画像上に黒と白の境界線をオーバーレイし、それらを不透明に混ぜるという同じ原則に基づいています。
最初の手法は、画像上で生成されたコンテンツを使用し、オペラでのみ機能します。 2番目の手法では、ラッパー要素で生成されたコンテンツを使用して、より広いブラウザーサポートを提供します。 3番目の方法は、境界の代わりに影を利用し、Firefox 3.5以降でのみサポートされています。 4番目のアプローチは、最もクロスブラウザー互換性がありますが、より多くのHTML変更が必要です。
• beveled画像は、深さとリアリズムの感覚を追加することにより、ウェブデザインの視覚的な魅力を高めることができます。この効果は、画像または要素の境界特性を操作することで実現できます。 Box-ShadowやBorder-Imageなどの追加のCSS3プロパティを使用して、より複雑で現実的なベベル効果を作成できます。
最近、画像に斜めの効果を追加するためのシンプルなCSS
• メソッドが必要でした。通常の境界（左下の

）で通常の初期の感覚を作成するのは簡単ですが、私は実際に画像の一部のように見える効果の後でした。 1つのブラウザ、IE6に戻るすべてで機能する最も堅牢なもの手法1：画像で生成されたコンテンツを使用する（デモ）

• プロ：ウルトラクリーンテクニックは追加のマークアップを必要としません
• cons：画像の上に。次に、オーバーレイ要素に境界線を追加し、RGBA
を使用して各境界色の色を定義します。上部と左の境界はRGBA（255,255,255,0.4）で、40％の不透明度を持つ白です。底部と右の境界線はRGBA（0,0,0,0.4）で、黒は40％不透明です。 。しかし、私たちはオペラにのみ取り組んでいるので、寸法を明示的に定義する必要があるのではなく、ボックスサイズと100％の寸法を使用する自由があります（注：これらのすべての例のコンテンツプロパティの値は、ユニコードの非壊れた空間です。 （デモ）

img.beveled{    position:relative;}img.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    box-sizing:border-box;    width:100%;    height:100%;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

長所：サポートされているブラウザのより広い範囲

<img src="/static/imghwm/default1.png" data-src="stormtroopers.jpg" class="lazy" alt="A legion of Lego Stormtroopers, standing in formation.">

Cons：追加のマークアップと明示的な寸法が必要です

2番目のテクニックは本質的に同じですが、この時間は、レッパーの生成コンテンツを使用してオーバーレイ要素を作成します。この手法では、ラッパー要素と生成されたコンテンツの明示的な寸法の定義を開始する必要があります（生成されたコンテンツでボックスサイズのベンダー固有のバージョンを使用できますが、ラッパーの寸法を定義する必要があります。

長所：最も視覚的に魅力的なテクニック

• cons：Firefox 3.5以降でのみ動作します

3番目の手法は、2番目の手法からの転換です。ここでは、RGBAを使用する代わりに、-MOZ-Box-Shadow：Insetを使用してbevering効果を作成します。 Box Shadow EffectsにはAlpha （すべての点で同じ不透明度ではなく）があるため、全体的な効果ははるかにきれいで丸みがあります。また、スプレッド半径パラメーターを微妙に使用してコーナーのシャープネスをブレンドできます。この効果は、Firefox 3.5以降でのみサポートされています。 SafariはBox-Shadowを実装していますが（Webkit-Box-Shadowとして）、挿入図のサポートはありません ：

img.beveled{    position:relative;}img.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    box-sizing:border-box;    width:100%;    height:100%;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

とにかくウェブキット版を追加できたと思いますが、それは将来の実装がどのようなものであるかを知ることができないのでリスクになります。寸法

<img src="/static/imghwm/default1.png" data-src="stormtroopers.jpg" class="lazy" alt="A legion of Lego Stormtroopers, standing in formation.">

4番目と最終的な手法は、最もクロスブラウザー互換性がありますが、最もHTML

の変更も必要です。それは本質的に2番目の手法と同じですが、2つの重要な違いがあります。まず、生成されたコンテンツではなく、2番目の物理を使用します。第二に、それはRGBA

ではなく、通常のヘックス
• 境界色の色を使用し、その後、要素全体を不透明度とブレンドします。インターネットエクスプローラーでさえ、これを処理できます。
• さらなる開発

カラフルな境界線を使用してジェルのような効果を得ることでこれをさらに進めることができます。一緒に遊ぶのは確かにとても楽しかったです！ CSSを使用して斜めの画像を作成することについてのよくある質問（FAQ） CSSの面白された画像とは？

span.beveled{    position:relative;    width:200px;    height:200px;    display:block;}span.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    width:190px;    height:190px;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

    <img src="/static/imghwm/default1.png" data-src="stormtroopers.jpg" class="lazy" alt="A legion of Lego Stormtroopers, standing in formation.">

CSSの斜めの画像は、3次元のエッジを画像または要素に錯覚させる視覚効果です。この効果は、画像または要素の境界特性を操作することによって達成されます。ベベル効果は、Webデザインに深さとリアリズムの感覚を追加し、ユーザーにとってより視覚的に魅力的なものになります。

CSSを使用してbevered画像を作成するにはどうすればよいですか？

CSSを使用してbevered画像を作成するには、画像の境界特性を操作することが含まれます。ボーダースタイルのプロパティを使用して、ボーダーのスタイルを「ソリッド」、「ダブル」、「点線」、「破線」、「溝」、「リッジ」、「挿入図」に設定できます。 「グルーブ」、「リッジ」、「挿入図」、および「冒頭」スタイルは、魅惑的な効果を生み出すことができます。また、境界線と境界線の特性を使用して、それぞれ境界のサイズと色を調整することもできます。

CSS3を使用して斜めの画像を作成できますか？

はい、CSS3を使用してbeveled画像を作成できます。 CSS3は、より複雑で現実的なベベル効果を作成するために使用できる新しいプロパティと値を導入します。たとえば、Box-Shadowプロパティを使用して境界線に影を追加して、より顕著なBevel Effectを作成できます。また、Border-Imageプロパティを使用して境界線に画像を適用して、テクスチャのあるベベル効果を作成することもできます。

CSSのコンテンツボックスのベベルエフェクトの作成は、包まれた画像を作成することに似ています。ボーダースタイル、境界線、境界線の特性を使用して、ベベル効果を作成できます。また、Box-Shadowプロパティを使用して境界線に影を追加して、ベベル効果を高めることもできます。さらに、Border-Radiusプロパティを使用してコンテンツボックスの角を丸くし、より微妙で洗練されたベベル効果を作成できます。国境スタイルのプロパティを使用して、ボーダーのスタイルを設定できます。 「グルーブ」、「リッジ」、「挿入図」、および「冒頭」スタイルは、魅惑的な効果を生み出すことができます。また、境界線と境界線の特性を使用して、境界線のサイズと色を調整することもできます。さらに、Box-Shadowプロパティを使用して境界線に影を追加して、Bevel Effectを強化します。

CSS3にベベル効果を作成するには、新しいプロパティと値を使用する方法が含まれます。 Box-Shadowプロパティを使用して、境界線に影を追加して、より顕著なベベル効果を作成できます。また、Border-Imageプロパティを使用して境界線に画像を適用して、テクスチャのあるベベル効果を作成することもできます。さらに、ボーダーラジウスプロパティを使用して要素の角を丸くし、より微妙で洗練されたベベル効果を作成できます。境界特性を操作することにより、画像に3次元のエッジの幻想を与えるベベル効果を作成できます。境界スタイル、境界線、境界線の特性を使用して、ベベル効果を作成できます。 「グルーブ」、「リッジ」、「挿入図」、「アウトセット」スタイルは、beveled効果を作成できます。

CSS3のコンテンツボックスのベベル効果を作成できますか？ CSS3は、より複雑で現実的なベベル効果を作成するために使用できる新しいプロパティと値を導入します。たとえば、Box-Shadowプロパティを使用して境界に影を追加して、Bevel Effectを強化できます。また、Border-Imageプロパティを使用して境界線に画像を適用して、テクスチャのあるベベル効果を作成することもできます。

CSSでテクスチャのベベル効果を作成するにはどうすればよいですか？

CSSでテクスチャのベベル効果を作成するには、Border-Imageプロパティの使用が含まれます。このプロパティを使用すると、要素の境界に画像を適用できます。テクスチャのある画像を選択することにより、テクスチャのベベル効果を作成できます。また、ボーダーイメージスライスプロパティを使用して、画像の境界画像に分割される方法を指定することもできます。

すべてのブラウザーにCSSを使用してbevered画像を作成できますか？

したがって、複数のブラウザでCSSコードをテストして、ベベル効果が意図したとおりに表示されるようにすることが重要です。ベンダープレフィックスを使用して、異なるブラウザとの互換性を確保することもできます。

以上がCSSを使用して斜めの画像を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。