CSS で放射状グラデーションを使用してカード効果を実現する

数日前、同僚がポイントモールプロジェクトを受け取りました。このプロジェクトには、カードやクーポンをギフトと交換する機能が含まれていました。しばらく考えてみたのですが、いいアイデアが思いつかなかったので、自分のプロジェクトに戻りました。しかし、今後も同様のニーズに遭遇する可能性があると考え、週末にいくつかのカードとクーポンのエフェクトの実装を研究して整理しました。

一般的なカードのスタイルは次のとおりです。

疑似要素の使用（Lessバージョン）

チケットレス

.ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) {
  位置: 相対的;
  ボックスのサイズ: 境界線ボックス;
  パディング: 0 @r;
  幅: @width;
  高さ: @height;
  背景クリップ: コンテンツボックス;
  背景色: @color;

  ＆：：前に {
    位置: 絶対;
    上: 0;
    左: 0;
    コンテンツ： "";
    表示: ブロック;
    幅: @r + 1px;
    高さ: 100%;
    背景: 放射状グラデーション(@r 左端に円、@r 透明、@r カラー、@r + 1px);
  }

  ＆：：後 {
    位置: 絶対;
    上: 0;
    右: 0;
    コンテンツ： "";
    表示: ブロック;
    //ここでの @r + 1px は、特定のページ幅を拡大または縮小するときにギャップを回避するためのものです: @r + 1px;
    高さ: 100%;
    //ここでの @r + 1px はエイリアシングを防ぐためのものです。背景: radial-gradient(@r circle at right @top, transparent @r, @color @r + 1px);
  }
}

。親 {
  .ordinary-mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28);
}
。子供 {
  行の高さ: 200px;
}

アプリ

'react' から React をインポートします。
'./App.css' をインポートします。
'./ticket.less' をインポートします。

関数App() {
    戻る （
        <div className="アプリ" style={
            {
                表示: "flex",
                justifyContent: "中央",
                alignItems: "center",
                高さ: 600
            }
        }>
            <div クラス名 = {'親'}>
                <div className="child">666</div>
            </div>
        </div>
    );
}

デフォルトのアプリをエクスポートします。

アップグレードスタイル1（縮小版）

.mixins-ticket-vertical(@width, @height, @r, @left, @l-color, @r-color) {
  幅: @width;
  高さ: @height;
  // @left - 1px は、特定のパーセンテージでズームしたときに隙間ができないようにするためです // @r + 1px は、ギザギザのエッジを防ぐためです // 51% は、要素の中央に小さな空白領域ができないようにするためです background: 放射状グラデーション (左上に円、透明 @r、@l-color @r + 1px) @left - 1px 上 ~'/' 100% 51% no-repeat,
  放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) @left - 1px 下 ~'/' 100% 51% 繰り返しなし、
    放射状グラデーション(右上の円、透明@r、@r-color @r + 1px) -(@width - @left) 上部 ~'/' 100% 51% 繰り返しなし、
    放射状グラデーション(右下の円、透明@r、@r-color @r + 1px) -(@width - @left) 下部 ~'/' 100% 51% 繰り返しなし;

  フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2));
}

.mixins-ticket-vertical-two(@width, @height, @r, @left, @l-color, @r-color) {
  幅: @width;
  高さ: @height;
  // @left + 1px はズームイン時に隙間ができないようにするためです// @r + 1px はギザギザのエッジを防ぐためです// 51% は要素の中央に小さな空白領域ができないようにするためです background: 放射状グラデーション(左上に円、透明 @r、@r-color @r + 1px) 右上 ~'/' (@width - @left) 51% no-repeat,
  放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) 右下 ~'/' (@width - @left) 51% 繰り返しなし、
  放射状グラデーション(右上の円、透明@r、@r-color @r + 1px) 左上 ~'/' @left + 1px 51% 繰り返しなし、
  放射状グラデーション(右下の円、透明@r、@l-color @r + 1px) 左下 ~'/' @left + 1px 51% 繰り返しなし;

  フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2));
}

。親 {
  .mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-vertical-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
。子供 {
  行の高さ: 200px;
}

アップグレードされたスタイル 1 (Scss バージョン)

@mixin mixins-ticket-vertical($width, $height, $r, $left, $l-color, $r-color) {
  幅: $width;
  高さ: $height;
  // $left - 1px は、特定のパーセンテージでズームしたときに隙間ができないようにするためです // $r + 1px は、ギザギザのエッジを防ぐためです // 51% は、要素の中央に小さな空白領域ができないようにするためです background: 放射状グラデーション (左上の円、透明 $r、$l-color $r + 1px) $left - 1px 上 / 100% 51% no-repeat、
  放射状グラデーション(左下の円、透明 $r、$l-color $r + 1px) $left - 1px 下 / 100% 51% 繰り返しなし、
  放射状グラデーション(右上の円、透明 $r、$r色 $r + 1px) -($width - $left) 上 / 100% 51% 繰り返しなし、
  放射状グラデーション(右下の円、透明$r、$r色$r + 1px) -($width - $left) 下 / 100% 51% 繰り返しなし;

  フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2));
}

。親 {
  @include mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28, #fc3a28);
}

。子供 {
  行の高さ: 200px;
}

アップグレードスタイル2（縮小版）

.mixins-ticket-horizontal(@width, @height, @r, @top, @l-color, @r-color) {
  幅: @width;
  高さ: @height;
  背景: 放射状グラデーション(左上に円、透明@r、@l-color @r + 1px) 左 @top - 1px ~'/' 51% 100% 繰り返しなし、
  放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) 左 -(@height - @top) ~'/' 51% 100% 繰り返しなし、
  放射状グラデーション(右上の円、透明@r、@r色@r + 1px) 右@top - 1px ~'/' 51% 100% 繰り返しなし、
  放射状グラデーション(右下の円、透明@r、@r-color @r + 1px) 右 -(@height - @top) ~'/' 51% 100% 繰り返しなし;

  フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2));
}

.mixins-ticket-horizontal-two(@width, @height, @r, @top, @l-color, @r-color) {
  幅: @width;
  高さ: @height;
  背景: 放射状グラデーション(左上に円、透明@r、@r色@r + 1px) 左下 ~'/' 51% (@height - @top) 繰り返しなし、
  放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) 左上 ~'/' 51% @top + 1px 繰り返しなし、
  放射状グラデーション(右上に円、透明@r、@r色@r + 1px) 右下 ~'/' 51% (@height - @top) 繰り返しなし、
  放射状グラデーション(右下の円、透明@r、@l-color @r + 1px) 右上 ~'/' 51% @top + 1px no-repeat;

  フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2));
}

。親 {
  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
。子供 {
  行の高さ: 200px;
}

アップグレードスタイル3（縮小版）

.mixins-ticket-horizontal-line(@width, @height, @r, @top, @l-color, @r-color,@border-offset,@border-color) {
  幅: @width;
  高さ: @height;
  背景: 放射状グラデーション(左上に円、透明@r、@l-color @r + 1px) 左 @top - 1px ~'/' 51% 100% 繰り返しなし、
  放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) 左 -(@height - @top) ~'/' 51% 100% 繰り返しなし、
  放射状グラデーション(右上の円、透明@r、@r色@r + 1px) 右@top - 1px ~'/' 51% 100% 繰り返しなし、
  放射状グラデーション(右下の円、透明@r、@r-color @r + 1px) 右 -(@height - @top) ~'/' 51% 100% 繰り返しなし;
  フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2));

  ＆：：後 {
    位置: 絶対;
    左: 0;
    右: 0;
    トップ: @top;
    マージン: 自動;
    コンテンツ： '';
    幅: calc(~"100%" - 2*@r - @border-offset);
    border-top: 1px 破線 @border-color;
  }
}

。親 {
  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
。子供 {
  行の高さ: 200px;
}

アップグレードスタイル4（縮小版）

.mixins-ticket-vertical-three(@width, @height, @r, @left, @l-color, @r-color,@sm-r,@sm-offset,@sm-color) {
  幅: @width;
  高さ: @height;
  // @left - 1px は、特定のパーセンテージでズームしたときに隙間ができないようにするためです // @r + 1px は、ギザギザのエッジを防ぐためです // 51% は、要素の中央に小さな空白領域ができないようにするためです background: 放射状グラデーション (左上に円、透明 @r、@l-color @r + 1px) @left - 1px 上 ~'/' 100% 51% no-repeat,
  放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) @left - 1px 下 ~'/' 100% 51% 繰り返しなし、
    放射状グラデーション(右上の円、透明@r、@r-color @r + 1px) -(@width - @left) 上部 ~'/' 100% 51% 繰り返しなし、
    放射状グラデーション(右下の円、透明@r、@r-color @r + 1px) -(@width - @left) bottom ~'/' 100% 51% no-repeat;

  フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2));

  ＆：：後 {
    コンテンツ： '';
    位置: 絶対;
    上: 0;
    右: -@sm-r;
    幅: @sm-r;
    高さ: 100%;
    背景画像: 放射状グラデーション(円は @sm-r、透明は @sm-r、@r の色は @sm-r + 1px);
    //背景サイズ: @sm-r;
    背景サイズ: @sm-r @sm-offset;
  }
}

。親 {
  .mixins-ticket-vertical-three(200px, 200px, 10px, 150px, #fc3a28, #fc3a28,5px,20px,#fc3a28);
}

。子供 {
  行の高さ: 200px;
}

予防

// チケットなし

//背景: 放射状グラデーション(右上の円、透明 @r、@lcolor 0) -(@width - @left) top ~'/' 100% 55% no-repeat;
// 上記のコード行を次のように分解します。
//背景画像: 放射状グラデーション(右上の円、透明@r、@lcolor 0);
//背景の位置:-(@width - @left) top;
//背景サイズ:100% 55% ;
//背景繰り返し: 繰り返しなし;

/*注: 最初に 50 ピクセルの透明領域があり、次に 2 番目の領域が 0 に設定されています。これは、ここからスタイル範囲をリセットするものとして理解できます。*/
/*背景: 放射状グラデーション(右上の円、透明 50px、赤 0、#66a8ff 50%);*/

/*Chrome では、2 つの領域間の色が 0 偏差で直接遷移すると、深刻なエイリアシングが発生します */
/*背景: 放射状グラデーション(左10px、透明度50%、#F6327C 50%);*/
/*背景: 放射状グラデーション(左10px、透明度50%、#F6327C 55%);*/

/*影の効果を追加*/
/*フィルター: ドロップシャドウ(2px 2px 2px rgba(0,0,0,.2));*/

/*複数の放射状グラデーションを累積*/
/*背景： 
放射状グラデーション(50px 100px 楕円、透明 40px、黄色 41px、赤 49px、透明 50px)、
放射状グラデーション(30px 円、赤、赤 29px、透明 30px);*/

要約する

CSS で放射状グラデーションを使用してカードやクーポンの効果を実現する方法については、これで終わりです。CSS 放射状グラデーションを使用してカードやクーポンの効果を実現する方法については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: モバイルインターネット時代: レスポンシブウェブデザインが一般的なトレンドに

>>: mysql IS NULL インデックスケースの説明を使用する