派手な画像の装飾：シングルエレメントマジック

この記事では、

タグとCSSのみを使用して、創造的な画像装飾技術を探ります。 余分なマークアップ、div、または擬似要素を忘れてください。単一の要素で驚くべき結果を達成します。 これは、CSSの力を示すシリーズの最初のものです。 img

シリーズ：

シングルエレメントマジック -

この記事
• マスクと高度なホバー効果
• アウトラインと複雑なアニメーション

スタイリングの可能性：

追加の要素がなければ、スタイリングのオプションは、

、

、およびborderに制限されています。 興味深いことに、box-shadowは画像の後ろに隠されていますが、outlineおよび/またはbackgroundを使用して画像の周りにスペースを作成し、そのスペース内で背景を描画することで、それを活用できます。 これは、印象的な効果のためにグラデーションを使用するための扉を開きます。 backgroundpadding例1：グラデーションフレームborder

この例では、円錐形の勾配、パディング、およびアウトラインを使用して、視覚的に魅力的なフレームを作成します。 透明な境界線とパディングは、グラデーションの>>>プロパティと協力して、目的のフレーム効果を実現します。 ネガティブ

は、きれいな正方形の形状を作成します

background-originbackground-clip例2：コーナーのみのフレームoutline-offset

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

この例では、各コーナーに1つのコニック勾配を使用しています。 ホバーでは、これらの勾配が拡張して完全なフレームを作成します。 勾配は、色の間にハードストップを利用して鋭いエッジを作成し、CSS変数はコードの読みやすさを高めます。

高度なテクニックとアニメーション：

この記事では、グラデーション操作、

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}
img:hover {
  background-size: 51% 51%;
}

、および洗練されたホバーアニメーションを使用して、より複雑な例を調査します。 これらの例は、さまざまな形状と効果を作成する際の勾配の汎用性を示しています。 CSS変数と内部変数（アンダースコアが付いている）を使用すると、コードの組織と保守性が向上します。

結論：

この記事では、CSSと勾配の驚くべき力を示して、単一のタグを使用して視覚的に印象的な画像装飾を作成します。 このシリーズは、より高度なテクニック、マスク、ホバーエフェクト、複雑なアニメーションを探索し続けています。 リンクされた記事のさらなる調査は、基礎となるCSSの原則をより深く理解することを提供します。

以上が派手な画像の装飾：シングルエレメントマジックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。