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

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

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

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

疑似要素の使用(Lessバージョン)

チケットレス

.ordinary-mixins-ticket-horizo​​ntal(@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-horizo​​ntal(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-horizo​​ntal(@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-horizo​​ntal-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-horizo​​ntal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizo​​ntal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
。子供 {
  行の高さ: 200px;
}

アップグレードスタイル3(縮小版)

.mixins-ticket-horizo​​ntal-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-horizo​​ntal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizo​​ntal-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 インデックスケースの説明を使用する

推薦する

MySQL 8の新機能におけるグローバルパラメータの永続性の詳細な説明

目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....

HTML における Div と table の違い (あらゆる側面から詳細に説明)

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...

Linux での vi (vim) の新しい使い方のまとめ

私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...

MySQLデータベースの使用仕様の概要

導入: MySQL データベースの仕様に関しては、皆さんも何らかのドキュメントを読んだことがあると思...

MySQLに挿入する前にデータが存在するかどうかを確認する方法

ビジネスシナリオ: 訪問者の訪問状況を記録する必要があるが、繰り返し記録することはできない挿入する前...

MySQL マスタースレーブ構成の学習ノート

● 新しいプロジェクトのセキュリティを確保するためにクラウド データを購入する予定でした。 Alib...

mysql 複数テーブル接続削除関数の削除

単一のテーブルを削除する: tableName から columnName = value を削除し...

必見の JavaScript 面接質問 10 選のまとめ (おすすめ)

1.これは1. 誰が誰に電話をかけますか?例: 関数foo(){ console.log(&quo...

Docker コンテナで ASP.NET Core を実行する手順

最近は学ぶべき知識が多すぎて、どれを先に学べばいいのかわかりません。このブログはもともとxamari...

ReactのPropsの簡単な比較

目次クラスコンポーネントのプロパティ比較浅い同等の浅い比較機能コンポーネントの簡単な比較先週面接に行...

Centos8で静的IPを設定する方法の詳細な説明

CentOS 8をインストールした後、ネットワークを再起動すると次のエラーが表示されますエラーメッセ...

jQuery は呼吸カルーセルを実装します

この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有しま...

MySql のスロークエリ分析とスロークエリログの開き方の詳細説明

最近はMySQLのパフォーマンス最適化についても研究しているので、今日の投稿は勉強ノートとしても使え...

Nginx リクエスト制限の設定方法

Nginx は、多くの優れた機能を備えた強力で高性能な Web およびリバース プロキシ サーバーで...

JavaScript の知識: コンストラクタも関数である

目次1. コンストラクタの定義と呼び出し2. 新しいキーワードの目的3. コンストラクタの問題: メ...