CSS を使用して 3 つのステップでショッピング モールのカード クーポンを作成する

今日は618日、主要なショッピングモールはすべてプロモーション活動を行っています。今日は、次のようにCSSを使用してショッピングモールのカードクーポンを作成します。

上記のようなショッピングモールのバウチャーのさまざまな形式についてまだ心配していますか? CSS に詳しくなく、キャンバスも難しすぎます。どうすればいいでしょうか?

CSS を使用してショッピング モールのバウチャーを作成するには、いくつの手順が必要ですか?

全部で3つのステップがあります:

• このURLを開きます（ブラウザにhttps://qishaoxuan.github.io/css_tricks/hollowOut/と入力してください）
• 必要なスタイルを見つける
• コピー＆ペースト

テストに渡したら、CSS カードを解析してみましょう。

基礎を準備しましょう

放射状グラデーション:

背景: 放射状グラデーション(位置での形状のサイズ、開始色、...、最後の色);

このようにして、中央に配置された円形の背景画像を簡単に作成できます。

.center-circle {
    幅: 100ピクセル;
    高さ: 100px;
    背景: 放射状グラデーション(50px 50pxの円、透明10px、#00adb5 0);
  }

線形グラデーション

背景: linear-gradient(方向、カラーストップ1、カラーストップ2、...);

特定のグラデーション プロセスを知る必要はありません。単純なものを記述し、グラデーション背景画像なしでグラデーション プロパティを使用するものを記述するだけです。

.線形グラデーション {
    幅: 100ピクセル;
    高さ: 100px;
    背景: 線形グラデーション(右へ、#00adb5、#00adb5);
  }

背景

backgroundには複数の画像を設定できます。 background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];これらを使用して画像,区切ります。

基礎を組み立て始める

最もシンプルなものを書く

上記の中央の円の例の左側に円を配置するだけです。

.left-circle{
  幅: 100ピクセル;
  高さ: 100px;
  位置: 相対的;
  背景: 放射状グラデーション(0.50px の円、透明 10px、#00adb5 0) 左上/100px 100% 繰り返しなし;
}

さらなる学習

backgroundはrepeat属性があることを覚えていますか?つまり、スタイルの一部を設定し、 repeatを使用するだけで済みます。画像を見てください。これは、グラデーションなしのlinear-gradientとradial-gradientの組み合わせではありませんか? 疑似クラスの助けを借りて、これを書き出すことができます。

.hollow-circles {
  幅: 300ピクセル;
  高さ: 100px;
  位置: 相対的;
  背景: #00adb5;
  下マージン: 10px;
}
.hollow-circles::after {
  コンテンツ： '';
  位置: 絶対;
  高さ: 5px;
  幅:100%;
  左: 0;
  下: -5px;
  背景画像: 線形グラデーション(右へ、#00adb5 5px、透明 5px、透明)、
  放射状グラデーション(10px の円、10px の 5px、透明 5px、#00adb5 5px);
  背景サイズ: 15px 5px;
}

もう少し複雑

非常にシンプルに見えます。前の円の別の円を描くだけではないでしょうか。ただし、両側の色が異なることを考慮する必要があるため、背景画像を 4 つ描き、各円を正方形の角に配置して、それらを組み合わせる必要があります。

.2つの円{
  幅: 300ピクセル;
  高さ: 100px;
  背景: 放射状グラデーション(右上の円、透明 10px、#00adb5 0) 左上 / 60px 51% 繰り返しなし、
    放射状グラデーション(右下の円、透明 10px、#00adb5 0) 左下 /60px 51% 繰り返しなし、
    放射状グラデーション(左上に円、透明 10px、#eeeeee 0) 右上 /240px 51% 繰り返しなし、
    放射状グラデーション(左下の円、透明 10px、#eeeeee 0) 右下 /240px 51% 繰り返しなし;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。