ファンシーな画像装飾: 単一要素の魔法

タイトル通り、画像をデコレーションしていきます！ これについては他にもたくさんの記事がありますが、ここで取り上げているのは、より挑戦的なものであるため、かなり異なります。 チャレンジ？ のみを使用して画像を装飾する タグだけです。

そうです、余分なマークアップ、div、疑似要素はありません。 タグはXNUMXつだけ。

難しいですね。 しかし、この記事 (およびこの小さなシリーズを構成する他の記事) の終わりまでに、CSS が十分に強力であり、単一の要素を操作するという制限にもかかわらず、素晴らしく驚くべき結果が得られることを証明します。

最初の例から始めましょう

コードを掘り下げる前に、スタイリングの可能性を列挙しましょう 余分な要素や疑似要素はありません。 使用できます border, box-shadow, outline、そしてもちろん、 background. 画像に背景を追加するのは奇妙に見えるかもしれません。背景が画像の背後にあるため見えないからです。しかし、秘訣はスペースを作成することです。 周りに を使用した画像 padding および border 次に、そのスペース内に背景を描画します。

私が話したので、次に何が起こるか知っていると思います background、 右？ はい、 勾配! これから作成するすべての装飾は、多くのグラデーションに依存しています。 あなたが持っている場合 私についてきました しばらくの間、これはおそらくあなたにとってまったく驚くことではないと思います. 😁

最初の例に戻りましょう:

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

私たちは定義しています padding そして透明 border 変数を使用する --s その変数の XNUMX 倍に等しいスペースを画像の周りに作成します。

両方を使用する理由 padding および border どちらかの代わりに？ それらのXNUMXつだけを使用して取得できますが、デフォルトではの初期値のため、グラデーションにはこの組み合わせが必要です background-clip is border-box および background-origin 等しい padding-box.

ロジックを理解するための段階的な図を次に示します。

最初は、画像に境界線がないため、グラデーションによって XNUMX つのセグメントが作成されます。 1px 厚さの。 （私は使っている 3px この特定のデモでは、見やすいようにします。) 色付きの境界線を追加しても、グラデーションはパディング領域内で同じ結果をもたらします ( background-origin）しかし、境界の後ろで繰り返されます。 境界線の色を透明にすると、繰り返しを使用して目的のフレームを取得できます。

　 outline デモでは負のオフセットがあります。 これにより、グラデーションの上部に正方形が作成されます。 それでおしまい！ XNUMX つのグラデーションと outline. もっと多くのグラデーションを使用できたはずです! しかし、私は常にコードをできるだけシンプルに保つように努めています。 outline その方が良いです。

これは、私が使用しているグラデーションのみのソリューションです padding スペースを定義します。 結果は同じですが、構文がより複雑になります。

別のアイデアを試してみましょう。

これについては、前の例から削除した outline、および適用 clip-path 両側のグラデーションをカットします。 の clip-path value は少し冗長で紛らわしいですが、そのポイントをよりよく理解するための図を次に示します。

私はあなたが主なアイデアを得ると思います。 背景、アウトライン、クリッピング、およびいくつかのマスキングを組み合わせて、さまざまな種類の装飾を実現します。 また、いくつかのクールなホバー アニメーションを追加ボーナスとして検討する予定です! これまで見てきたことは、今後の予定の概要にすぎません。

コーナー専用フレーム

これは XNUMX つのグラデーションを使用します。 各グラデーションは XNUMX つのコーナーをカバーし、ホバー時にそれらを拡張して画像の周りに完全なフレームを作成します。 グラデーションの XNUMX つのコードを分析してみましょう。

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

に等しいサイズのグラデーションを描画します 50px 50px 左上隅に配置します（0 0）。 グラデーションの構成について、どのようにしてその結果に到達したかを示す段階的な図を次に示します。

グラデーションは XNUMX つの色の間の遷移にのみ適していると考える傾向があります。 しかし実際には、私たちは彼らと一緒にもっと多くのことができるのです! さまざまな形状を作成する場合に特に便利です。 コツは、スムーズな遷移ではなく、上の例のように、色の間にハード ストップがあることを確認することです。

#0000 25%, darkblue 0

これは基本的に次のように言っています。 25% 残りの領域を darkblue.

あなたは頭を掻いているかもしれません 0 価値。 構文を単純化するのはちょっとしたハックです。 実際には、これを使用して色間でハード ストップを作成する必要があります。

#0000 25%, darkblue 25%

その方が論理的です！ 透明色は 25% および darkblue 透明度が終了したところから開始し、ハードストップを行います。 XNUMX番目のものを 0、ブラウザが私たちのために仕事をするので、それを行うには少し効率的な方法です.

どこかに 仕様、それは言う：

もし カラーストップ or 遷移のヒント の位置がリスト内の前のカラー ストップまたはトランジション ヒントの指定された位置よりも小さい場合、その位置をその前のカラー ストップまたはトランジション ヒントの指定された最大の位置に等しくなるように設定します。

0 は常に他の値よりも小さいため、ブラウザーは常に、宣言内でその前にある最大の値に変換します。 私たちの場合、その数は 25%.

ここで、すべてのコーナーに同じロジックを適用し、次のコードで終了します。

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

すべてのグラデーションが同じ色構成を使用するため、冗長性を避けるために CSS 変数を導入しました。

ホバー効果については、グラデーションのサイズを大きくしてフレーム全体を作成するだけです。

img:hover {
  background-size: 51% 51%;
}

はい、そうです 51% 50% — これにより、小さなオーバーラップが作成され、発生する可能性のあるギャップが回避されます。

同じテクニックを使って別のアイデアを試してみましょう。

今回は XNUMX つのグラデーションのみを使用していますが、より複雑なアニメーションを使用しています。 まず、各グラデーションの位置を更新し、サイズを大きくして完全なフレームを作成します。 また、色、サイズ、厚さ、さらには画像とフレームの間のギャップをより適切に制御するために、より多くの変数を導入しました。

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b), #0000 25%, var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), #0000 25%, var(--c) 0);
  background-position:
    var(--_p, 0%) var(--_p, 0%),
    calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i, .3s));
}
img:hover {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g) / 2);
  --_i: 0s;
}

なぜ --_i および --_p 変数の名前にアンダースコアが含まれていますか? アンダースコアは、コードの最適化に使用される「内部」変数を考慮するために使用する命名規則の一部です。 それらは特別なものではありませんが、フレームを制御するために調整する変数の間で違いを作りたいです ( --b, --cなど) と、コードを短くするために使用するものです。

コードはわかりにくくてわかりにくいかもしれませんが、 XNUMX部構成のシリーズ ここで、そのようなテクニックについて詳しく説明します。 上記のコードにたどり着いた経緯を理解するために、少なくとも最初の記事を読むことを強くお勧めします。

以下は、さまざまな値をよりよく理解するための図です。

フレームリビール

ホバー時にフレーム全体を表示する別の種類のアニメーションを試してみましょう。

かっこいいでしょ？ よく見ると、マウスを離すと線が反対方向に消えて、効果がさらに派手になっていることに気付くでしょう。 で同様の効果を使用しました 前の記事.

しかし今回は、すべての要素をカバーするのではなく、 height このようなものを取得するには:

これは、フレームの上部の境界線です。 画像の両側で同じプロセスを繰り返すと、ホバー効果が得られます。

img {
  --b: 10px; /* the border thickness*/
  --g: 5px; /* the gap on hover */
  --c: #8A9B0F; 

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

ご覧のとおり、同じグラデーションを XNUMX 回適用しています。それぞれのグラデーションは、一度に片面だけをカバーするために異なる位置に設定されています。

もう一つ？ さあ行こう！

これは少しトリッキーに見えますが、実際には、XNUMX つの円錐勾配がこの種の魔法をどのように発揮しているかを理解するには、ある程度の想像力が必要です。 グラデーションの XNUMX つを説明するデモを次に示します。

疑似要素はグラデーションをシミュレートします。 最初は見えませんが、ホバーすると、最初にその位置を変更してフレームの上端を取得します。 次に、高さを増やして右端を取得します。 グラデーションの形状は、前のセクションで使用したものと似ています: XNUMX つのセグメントが XNUMX つの側面をカバーしています。

しかし、なぜグラデーションの幅を作ったのですか 200%? あなたは思うだろう 100% 十分ですよね？

100% 十分なはずですが、幅を同じに保つと、グラデーションを好きなように移動できません 100%. それは、方法に関連する別のちょっとした癖です background-position 動作します。 私はこれをカバーします 前の記事。 私も Stack Overflow に回答を投稿しました これに対処します。 私はそれがたくさんの読書であることを知っていますが、あなたの時間は本当に価値があります.

XNUMX つのグラデーションのロジックを説明したので、XNUMX 番目のグラデーションは簡単です。これはまったく同じことを行っているためですが、代わりに左端と下端をカバーしています。 いくつかの値を交換するだけで完了です。

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200%  no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

ご覧のとおり、両方のグラデーションはほぼ同じです。 サイズと位置の値を交換しているだけです。

フレームの回転

今回は、画像の周りにフレームを描画するのではなく、既存のフレームの外観を調整します.

あなたはおそらく、どうやって直線を斜めの線に変換できるのかと尋ねているでしょう. いや、それとは魔法が違う。 これは、単純なアニメーションを XNUMX つのグラデーションに組み合わせた後に得られる錯覚です。

上部のグラデーションのアニメーションがどのように作成されるかを見てみましょう:

繰り返しグラデーションの位置を更新しているだけです。 まだ派手なものはありません！ 右側についても同じことをしましょう:

トリックが見え始めていますか？ 両方のグラデーションが角で交差し、直線が斜めに変化する錯覚を生み出します。 アウトラインを削除し、オーバーフローを非表示にして見やすくしましょう。

ここで、残りのエッジをカバーするためにさらに XNUMX つのグラデーションを追加して完了です。

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

このコードを少し調整すると、別のクールなアニメーションが得られます。

この例のロジックを理解できますか? それはあなたの宿題です ！ コードは恐ろしく見えるかもしれませんが、前に見た例と同じロジックを使用しています。 各グラデーションを分離して、それがどのようにアニメーション化されるかを想像してみてください。

包み込む

XNUMX つの記事にたくさんのグラデーションがあります。

それは確かです、そして私はあなたに警告しました！ しかし、余分な要素や疑似要素を使用せずに画像を装飾することが課題である場合、残りの可能性はわずかであり、グラデーションが最も強力なオプションです。

いくつかの説明で少し迷ったとしても心配しないでください。 この課題のために再利用したいくつかの概念について、より詳細に説明している古い記事のいくつかを常にお勧めします。

このシリーズの次の記事まで、最後のデモを XNUMX つ残します。 今回、使用している radial-gradient() 別の面白いホバー効果を作成します。 コードを分析して、それがどのように機能するかを理解しましょう。 困ったらコメントで質問してね！