CSS で中空効果を実装するサンプルコード

CSS で中空効果を実装するサンプルコード

効果原理

主にCSSグラデーションを使用して、切り取りを必要としない背景のくり抜きを実現します。

クーポンスタイル

.mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) {
    幅: @width;
    高さ: @height;
    背景:
              放射状グラデーション(右上の円、透明@r、@lcolor 0) -(@width - @left) 上部 ~'/' 100% 51% 繰り返しなし、
              放射状グラデーション(右下の円、透明@r、@lcolor 0) -(@width - @left) 下 ~'/' 100% 51% 繰り返しなし、
              放射状グラデーション(左上の円、透明@r、@rcolor 0) @left 0 ~'/' 100% 51% 繰り返しなし、
              放射状グラデーション(左下の円、透明@r、@rcolor 0) @left bottom ~'/' 100% 51% no-repeat;
} 

.mixinsTicket1(@width, @height, @r, @top, @color) {
   幅: @width;
   高さ: @height;
   背景:
               放射状グラデーション(左下の円、透明@r、@color 0) 左 (@top - @height) ~'/' 51% 100% 繰り返しなし、
               放射状グラデーション(左上の円、透明@r、@color 0) 左 @top ~'/' 51% 100% 繰り返しなし、
               放射状グラデーション(右下の円、透明@r、@color 0) 右 (@top - @height) ~'/' 51% 100% 繰り返しなし、
               放射状グラデーション(右上の円、透明@r、@color 0) 右 @top ~'/' 51% 100% 繰り返しなし;
   &::後{
     コンテンツ: '';
     表示: ブロック;
     位置: 絶対;
     幅: calc(100% - 2 * @r);
     左: @r;
     トップ: @top;
     border-top: 1px 破線 #fff;
     変換: translateY(.5);
   }
}

カットアウェイ効果

ps: 鋸歯状波はデバイスのディスプレイに関連しています

.mixinFlag(@width, @height, @bg) の場合(default()) {
    幅: @width;
    高さ: @height;
    背景:
              線形グラデーション(45度、透明 sqrt(pow(@width/2, 2)/2)、@bg 0) 右、
              linear-gradient(-45度、透明、sqrt(pow(@width/2, 2)/2)、@bg 0) 左;
    背景サイズ: 50% 100%;
    背景繰り返し: 繰り返しなし;
 }
 .mixinFlag(@width, @height, @bg) の場合(@width > @height) {
    幅: @width;
    高さ: @height;
    背景:
              linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左上、
              linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左下;
    背景サイズ: 100% 50%;
    背景繰り返し: 繰り返しなし;
} 

.mixinsMark(@width, @height, @bg) {
    幅: @width;
    高さ: @height;
    背景:
              linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左下、
              linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左上;
    背景サイズ: 100% 50%;
    背景繰り返し: 繰り返しなし;
}

追記:上記の効果は4方向で達成できます。他の方向のコードは掲載されていませんが、原理は同じです。

チェック柄

css {
    幅: 510ピクセル;
    高さ: 128px;
    背景: #FFF;
    背景画像: 線形グラデーション(rgba(182, 128, 102, .8) 8px, 透明 0),
                      線形グラデーション(90度、rgba(182, 128, 102, .8) 8px、透明0);
    背景サイズ: 8px 14px、14px 8px;
}

集中

。マスク {
  位置: 固定;
  上: 0;
  左: 0;
  zインデックス: 100;
  幅:100vw;
  高さ:100vh;
  背景:
  放射状グラデーション(50% に最も近い側 278rpx、透明 140rpx、rgba(0, 0, 0, .12) 180rpx、rgba(0, 0, 0, .22) 200rpx、rgba(0,0,0,.3) 220rpx、rgba(0,0,0, .4)) 繰り返しなし;
}

要約する

各グラデーション レイヤーは背景画像として扱うことができます。つまり、各グラデーション レイヤーの位置、サイズ、繰り返しを指定できます。 PS を使用したことがある学生は、レイヤーの概念を知っているはずです。背景レイヤーの積み重ねの原理も同様です (もちろん、グラデーションも背景画像として使用できます)。グラデーションのサイズ、くり抜く場所、表示する場所、タイル化するかどうかを制御することで、ほとんどのシーンで基本的な効果を実現できます。もちろん、カット画像の方が高速ですが、カット画像ではすべてのシーンに適応できない場合があります。

背景が書かれる順序をマスターすると、望む効果を頭の中で思い描くのに役立ちます。


コードをコピー
コードは次のとおりです。
背景: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip

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

<<:  よく知られているブラウザのDOCTYPEモード選択メカニズム

>>:  MySQL で sum 関数を使用する例のチュートリアル

推薦する

mysql5.7.19 解凍版の詳細なインストール チュートリアル (純粋なクラックされた中国語版 SQLYog を使用)

Mysql5.7.19バージョンは今年リリースされた新しいバージョンです。最近のMySQLのバージ...

Mac 向け MySQL 5.7.17 のインストールと設定のチュートリアル

1. MySQLをダウンロードする公式サイトのダウンロードページをクリックすると次のページに入ります...

Vueモバイル端末が指のスライド効果を実現

この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...

Node.jsを理解するのはとても簡単です

目次Node.js の公式紹介Node.jsのコア開発言語ウェブ上の JavaScript と No...

Vue でカスタムパスのエイリアスを設定する方法

Vue でカスタム パス エイリアスを設定する方法日常の開発では、モジュールやコンポーネントをインポ...

MySQL パフォーマンスの最適化: インデックスを効率的かつ正しく使用する方法

実践こそが真実をテストする唯一の方法です。この記事では、インデックスの全体的な使用法についてのみ説明...

MySQL マルチテーブル結合入門チュートリアル

接続は、実際の外部キー(人工的に作成された 2 つのテーブル間の対応関係を指します。対照的に、FOR...

Vueはカウンターのシンプルな生成を実装します

この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです...

nginx の場所に複数の Proxy_pass メソッドがある

1. まず、nginxの位置情報に関する関連知識を確認しましょう1) 位置マッチング手順: ~ #波...

Vue は携帯電話の認証コードによるログインを実装します

この記事では、携帯電話認証コードログインを実装するためのVueの具体的なコードを参考までに共有します...

uniappとvueの違いの詳細な説明

目次1. シンプルなページの例2.uni-appはvueコンポーネントとミニプログラムネイティブコン...

MySQL sql99構文の内部結合と非等価結合の詳細な説明

#事例: 従業員の給与水準を照会する 選択 給与、等級 から 従業員 参加する ジョブグレード g ...

手の動きをリアルタイムで監視するための Handtrack.js ライブラリ (推奨)

【はじめに】: Handtrack.jsは、ブラウザ上で直接リアルタイムの手の動きの追跡と検出を実...

純粋な CSS で中空効果を実現するためのサンプルコード

私は最近、空洞化効果について研究しました。背景クリップ: テキスト背景はテキストの前景色にクリップさ...

ファイルをアップロードするときに enctype フィールドを使用する理由は何ですか?

FORM 要素の enctype 属性は、フォーム データがサーバーに送信されるときに使用されるエン...