ファンシーな画像装飾: マスクと高度なホバー効果

この 2 部構成のシリーズの第 XNUMX 部へようこそ! 余分な要素や疑似要素なしで画像を装飾しています。 私はあなたがすでに消化するのに時間がかかったと思います 第1部 素晴らしい視覚効果を作成するために、多くのグラデーションを引き続き使用するためです。 CSSも紹介します。 mask より複雑な装飾とホバー効果のためのプロパティ。

一緒に取り組んでいる最初の例に目を向けましょう…

郵便切手

信じられないかもしれませんが、郵便切手の CSS 効果を作成するのに必要なのは、XNUMX つのグラデーションとフィルターだけです。

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

私たちが見たように 前の記事、最初のステップは、画像の周りにスペースを作ることです padding 背景のグラデーションを描画して、そこに表示できます。 次に、の組み合わせを使用します radial-gradient() および linear-gradient() 画像の周りの円をカットします。

以下は、グラデーションがどのように構成されているかを示す段階的な図です。

ここでは、 round XNUMX 番目のステップの値。 画像の幅や高さに関係なく、グラデーションのサイズがすべての側面で完全に整列するように調整されるため、トリックにとって非常に重要です。

仕様: 画像は、背景の配置領域内に収まる回数だけ繰り返されます。 整数回に収まらない場合は、収まるように再スケーリングされます。

丸みを帯びたフレーム

円を使った別の画像装飾を見てみましょう…

この例では、 radial-gradient()、しかし、今回はサークルを作成しました 周りに カットアウト効果の代わりに画像。 私も使用していることに注意してください round 再び値。 ここで最も難しいのは、フレームと画像の間の透明なギャップです。ここで CSS に手を伸ばします。 mask プロパティ：

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

マスキングにより、画像の領域を表示できます—おかげで linear-gradient() そこに — だけでなく 20px その両側の周り — おかげで conic-gradient()を選択します。 20px 変数に他なりません --s フレームのサイズを定義します。 つまり、ギャップを隠す必要があります。

私の意味は次のとおりです：

線形グラデーションは背景の青い部分で、円錐グラデーションは背景の赤い部分です。 両方のグラデーションの間の透明な部分は、内側の透明な境界線の錯覚を作成するために要素から切り取ったものです。

内側の透明な境界線

この場合、フレームを作成するのではなく、別の方法を試します。 透明な内側の境界線を作成します 内部 私たちのイメージ。 おそらく、実際のシナリオではそれほど役に立ちませんが、CSS マスクを使用することをお勧めします。

前の例と同様に、次の XNUMX つのグラデーションに依存します。 linear-gradient() 内側の部分、および conic-gradient() 外側部分用。 透明な境界線効果を作成するために、それらの間にスペースを残します。

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

この例の円錐勾配は、前の例とは構文が異なることに気付いたかもしれません。 どちらも同じ形を作るはずなのに、なぜ違うのでしょうか? これは、異なる構文を使用して同じ結果に到達できるためです。 最初は戸惑うかもしれませんが、これは優れた機能です。 見つける義務はない 　 特定の形状を達成するためのソリューション。 数多くの可能性の中から、自分に合った解決策を XNUMX つだけ見つける必要があります。

グラデーションを使用して外側の正方形を作成する XNUMX つの方法を次に示します。

これを実現する方法は他にもありますが、要点はわかります。

Best™ アプローチはありません。 個人的には、コードが最小で最適化されたものを見つけようとしています。 私にとっては、勾配が少なく、計算が少なく、繰り返し値が少ないソリューションが最も適しています。 より詳細な構文を選択することがあります。これは、変数を変更したり変更したりする柔軟性が高いからです。 それには経験と練習が伴います。 グラデーションを操作すればするほど、どの構文をいつ使用するかがわかります。

内側の透明な境界線に戻り、ホバー効果を掘り下げましょう。 気付かなかった場合は、透明な境界線を移動するクールなホバー効果があります。 font-size 騙す。 アイデアは、定義することです --d の値を持つ変数 1em. この変数は、エッジから境界線までの距離を制御します。 次のように変換できます。

--_d: calc(var(--d) + var(--s) * 1em)

…次の更新された CSS を提供します。

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

　 font-size 最初は等しい 0 、それで 1em も等しい 0 および --_d に等しい --d. ただし、ホバーすると、 font-size によって定義された値に等しい --o ボーダーのオフセットを設定する変数。 これにより、 --_d 変数、境界線をオフセットで移動します。 次に、別の変数を追加します。 --s、境界線が内側に移動するか外側に移動するかを決定する記号を制御します。

　 font-size 他の方法ではアニメートできないプロパティをアニメートしたい場合、トリックは非常に便利です。 で定義されたカスタム プロパティ @property これは解決できますが、 それのサポート 私がこれを書いている時点ではまだ不足しています。

フレームリビール

このシリーズの最初の部分で、次の公開アニメーションを作成しました。

同じアイデアを採用できますが、無地の境界線の代わりに、次のようなグラデーションを使用します。

両方のコードを比較すると、次の変更に気付くでしょう。

1. 最初の例と同じグラデーション構成を使用しました mask 財産。 グラデーションを background プロパティを mask プロパティ。
2. 追加しました repeating-linear-gradient() グラデーションの境界線を作成します。

それでおしまい！ すでに見たのと同じコードのほとんどを再利用し、非常に小さな調整を加えて、ホバー効果を備えた別のクールな画像装飾を手に入れました。

/* Solid color border */

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

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

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    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,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

別のフレーム アニメーションを試してみましょう。 これは少しトリッキーです。 三段アニメーション:

アニメーションの最初のステップは、下端を大きくすることです。 このために、 background-size の linear-gradient():

なぜ上端も追加するのか不思議に思われるかもしれません。 XNUMX番目のステップで必要です。 私は常に自分が書いたコードを最適化しようとしているので、XNUMX つのグラデーションを使用して上部と下部の両方をカバーしていますが、上部のグラデーションは隠され、後で mask.

XNUMX 番目のステップでは、XNUMX 番目のグラデーションを追加して、左端と右端を表示します。 しかし、今回は、 background-position:

すでに XNUMX つのグラデーションで素晴らしい効果が得られているので、ここで終了できますが、限界を押し上げるためにここにいるので、XNUMX 番目のステップを達成するためにマスクのタッチを追加しましょう。

秘訣は、下と側面が表示されるまで上端を非表示にしてから、更新することです。 mask-size （または mask-position) 上部を表示します。 前に述べたように、同じ効果を得るために多くのグラデーション構成を見つけることができます。

使用するグラデーションの図を次に示します。

幅が等しいXNUMXつの円錐グラデーションを使用しています 200%. 両方のグラデーションが領域を覆い、上部のみが覆われていません (その部分は後で見えなくなります)。 ホバーすると、両方のグラデーションをスライドしてその部分をカバーします。

これは、何が起こっているのかをよりよく理解できるように、グラデーションの XNUMX つをより適切に示したものです。

これを mask プロパティと完了です！ 完全なコードは次のとおりです。

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

コードを最適化するためにいくつかの変数も導入しましたが、今はこれに慣れているはずです。

XNUMX ステップ アニメーションはどうでしょうか。 はい、可能です！

宿題なので説明不要！ この記事で学んだことをすべて利用して、コードを分析し、コードが何をしているのかを明確にしてみてください。 ロジックは、前のすべての例に似ています。 重要なのは、各グラデーションを分離して、アニメーションの各ステップを理解することです。 読みやすくするために、コードは最適化されていません。 私は持っています 最適化されたバージョン 興味がある場合は、自分でコードを最適化し、私のバージョンと比較して追加の練習をすることもできます。

包み込む

これで、この 2 部構成のシリーズのパート XNUMX で、 エレメント。 これで、グラデーションとマスクを組み合わせて、追加の要素や疑似要素に手を伸ばすことなく、すばらしい視覚効果やアニメーションを作成する方法をうまく理解できました。 はい、シングル タグで十分！

このシリーズには、あと XNUMX つの記事があります。 それまでは、私が使用するクールなホバー効果のあるボーナスデモがあります mask 壊れたイメージを組み立てます。