CSSマスクを使用してスイッチUIを作成する方法
画像処理において, マスキング あなたがすることができますテクニックです 画像を隠す 他のと。マスクは画像の一部を作るのに使われます シースルー. マスキングプロパティを使用してCSSを使用してマスキングを実行できます。.
今日の記事では、2つのPNG画像とCSSマスキング技術を使用してマスクされた画像を作成し、ユーザーが画像の2つの状態を処理できるようにします（日 そして 夜）スイッチUIを使用して.
一部のブラウザ互換性の問題のため、すべてのブラウザですべてのマスキングプロパティがサポートされているわけではありません（2016年6月現在）。 マスクを追加するための2つの手法, 1つはWebkitベースのブラウザ用、もう1つはFirefox用です。この3ステップのチュートリアルの最初の2つのステップはすべてのブラウザで同じですが、3番目のステップには違いがあります。.
ステップ1。基本的なスイッチを作成して下さい
典型的なスイッチには2つの状態があります。 唯一 有効 一度に、あなたは使用することができます 2つのラジオボタングループ スイッチの動作コンポーネントを作成します。各ラジオボタンをそれぞれの親要素の左右の端に配置します。.
ラジオボタングループは、各ラジオボタンに同じ名前を付けて作成します。 名 属性。ラジオボタングループ内, ラジオボタンが1つだけ 一度に確認できます.
次のHTMLとCSSから始めます。
HTML
CSS
以下のCSSでは、絶対位置指定を使用して、画面上のラジオボタンを目的の場所に正確に配置しました。.
#outerWrapper 幅：450ピクセル;高さ：90ピクセル。パディング：10px。マージン：100px auto 0 auto。ボーダー半径：55ピクセル。 box-shadow：0 0 10ピクセル6ピクセル#EAEBED;背景：#fff; #innerWrapper 高さ：100％;ボーダー半径：45ピクセル。オーバーフロー：隠れています。位置：相対; .radio 幅：90ピクセル;身長：100％。位置：絶対マージン：0。不透明度：0。 #rightRadio right：0; .radio：not（：checked）cursor：pointer;
追加しました 不透明度：0 に支配する .無線 するためのクラス ラジオボタンを隠す. 以下のコードブロックの最後の規則, カーソル：ポインタ。 チェックされていないラジオボタンのポインタカーソルを表示します。これにより、ユーザーはスイッチの状態を切り替えるためにクリックするボタンを確認できます。.
ステップ2：スイッチにスキンを追加する
このステップでは、2つ追加します。 私はMinh Killy Leのドリブルショットにインスパイアされた "Day"と "Night"をスイッチの2つの状態として使っています。. HTML CSS の pointer-events CSSプロパティを使用すると、グラフィック要素を配置できる状況を設定できます。 マウスイベントのターゲット. 上記のコードの代替として、2 Chromeと他のWebkitベースのブラウザの場合は、 一般に、2種類のマスキングがあります。 輝度 そして アルファ. Chrome（バージョン51.0.2704.103、Win10以降）では、現在アルファ版しか動作していないようです. CSSでは, これがCSSです マスクを追加します Webkitブラウザで背景画像を作成する方法 CSS 私は使った 夜の肌のために、私は透明な円を作りました、そして私は容器の残りの部分を不透明にしました。デイスキンでは、私は反対をしました。 Webkitブラウザではまだサポートされていませんが、私は あなたが上で見ることができるように、円の境界は非常に滑らかではありません。に 荒い縁を隠す, 追加する HTML CSS の が だから、の代わりに 上のSVG画像は、 白い長方形 そして 黒丸. これを追加してください。 黒い四角形 そして 白丸 Webkitバージョンで使用したHTMLへのマスクとして. HTML のCSSコードを置き換える（または組み合わせる） 2つの異なるマスク画像（CSSグラデーションとSVG）、2つの異なるマスクタイプ（アルファと輝度）、そしてWebkitとFirefoxの両方のサポートがあります。. CSS
#daySkin 背景画像：URL（ 'day.png'）; #nightSkin background-image：url（ 'night.png'）;スキン幅：100％。身長：100％。ポインタイベント：なし。位置：絶対マージン：0。
ポインタイベント：なし。 スイッチのクリックイベントが可能になるように、ルールがスキンに追加されます。 それらを通過する, そして ラジオボタンにたどり着く.
ステップ３ａ。マスクを追加（Webkit版）
マスク画像 この記事の執筆時点では、CSSプロパティは -ウェブキット Webkitブラウザのプレフィックス。の マスク画像 プロパティはあなたをすることができます 画像を指定 使用する として マスク.アルファ そして 輝度 の値は マスク型 財産.#nightSkin 背景画像：URL（ 'night.png'）;マスクタイプ：アルファ。 / *残りの部分が不透明な透明な円* / -webkit-mask-image：放射状グラデーション（45px 45pxの円、rgba（0,0,0,0）45px、rgba（0,0,0,1）45px） ; / *スキンが選択されたとき* / #leftRadio：チェックされた〜＃nightSkin マスクタイプ：アルファ; / *残りの部分が透明な不透明な円* / -webkit-mask-image：放射状グラデーション（405px 45pxの円、rgba（0,0,0,1）45px、rgba（0,0,0,0）45px） ;
-ウェブキットマスク画像 初期マスク画像を作成するためのプロパティ。その値は 放射状グラデーション（） 定義済みの形状、放射状グラデーション、およびグラデーションの中心から画像を作成するために使用されるCSS関数.放射状グラデーション（） 機能し、残りの部分を透明にします.マスク型 将来の参照のためにCSSへのプロパティ.
#switchBtnOutline width：90px;身長：100％。ボーダー半径：45ピクセル。ボックスシャドウ：0 0 2ピクセル2ピクセルグレー挿入図、0 0 10ピクセルグレー。ポインタイベント：なし。位置：絶対マージン：0。 * / #leftRadio：checked〜＃switchBtnOutline right：0; / *曜日のスキンが選択されたときに#switchBtnOutlineを右端に配置します。
ステップ３ｂ。マスクを追加する（Firefox版）
マスク画像 CSSプロパティは実際には 速記プロパティ, そしてそれは速記属性の一部です マスク これにより、マスクとしても使用する画像を指定できます。しながら マスク画像 Firefoxではまだサポートされていません, マスク です.マスク プロパティは、で作成された画像を受け入れる必要があります。 放射状グラデーション（） 値としてのCSS関数は、ちょうど マスク画像 プロパティは行いました、Firefoxではまだサポートされていません.放射状グラデーション（） image、マスクタイプとしてSVGイメージをマスクタイプとして使用しましょう。 輝度.
#nightSkin Webkit版では以下のコードを使用しました。そして、あなたは終わりました.#nightSkin 背景画像：URL（ 'night.png'）;マスクタイプ：輝度。マスク：url（#leftSwitchMask）; #leftRadio：チェック〜＃nightSkin マスクタイプ：輝度;マスク：url（#rightSwitchMask）;
デモをチェックする
