webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

人が作ったボタンを分解してみる

f:id:ohta-felica:20170622234259p:plain

 分解した状態。

一番下から、執拗な分析をしてみる。

f:id:ohta-felica:20170622234756p:plain

 「描画モード」は変更しても変わりはない。

「不透明度」を「75%」にするのも味付け程度。

「オフセット」に対してぼかしは2倍。

「カラー」ではなく「濃さ」にしている。ここがポイントだろう。

「100%」だと黒いシャドーになる。なんだろう?

にじんだようにシャドー。

 

f:id:ohta-felica:20170622235644p:plain

 下から2番目。微妙なグラデーション。

「ブレンドモード」は通常。

f:id:ohta-felica:20170622235825p:plain

 下から3番目。ソリッドカラー。

 

f:id:ohta-felica:20170623000030p:plain

 下から4番目。まずはグラデーション。

縦横比率95.3%

回転-13.9度

f:id:ohta-felica:20170623000343p:plain

 不透明度を「100%」にしてみる。

f:id:ohta-felica:20170623000453p:plain

 ちなみにスクリーンでダブらせるとこんな感じ。

f:id:ohta-felica:20170623000559p:plain

 「40%」にしてみるとこんな感じ。

f:id:ohta-felica:20170623000654p:plain

 

f:id:ohta-felica:20170623000734p:plain

 一番上。まずはグラデーション。

 

f:id:ohta-felica:20170623000828p:plain

 こちらは不透明度が「79%」

f:id:ohta-felica:20170623001051p:plain

 全部重ねた状態。

ソリッドカラーを変更するだけで、いろんな色のボタンが作れるのは便利ですね!

f:id:ohta-felica:20170623001211p:plain