当社のデザイナーは、.psd (Photoshop) で Web デザインを提供することを好みます。ページのマークアップとスタイルを作成するときは、通常、利用可能なツールを優先してデザインを妥協する必要があります。確かに後者はページを実装する人のスキルに依存しますが、次の例を考えると、デザインを実装するための正しい CSS 手法を調査して到達するための一般的なアプローチは何ですか?
問題の例は次のとおりです。Photoshop では、テキストベースのログイン ボタンは最終結果として次のようになります。
これは基本的に、エフェクト (Fx) が適用された [T] (テキスト) 要素です。効果は、次のように設定されているように見えるカラー オーバーレイです。
この効果がない場合、PSD のログイン ページは次のようになります。
これはまさに、ブラウザ上のページでどのように見えるかです. 最終的な .psd デザインとまったく同じに見えるようにする場合、正しい css 手法の例を探すにはどうすればよいでしょうか?
<button>特定の .css クラスを持つ要素としてログイン リンクを実装しました。私は backgound-blend-mode: normal を次のように試してみました:
.login-box .login-button {
width: 100%;
height: 100%;
margin-left: 12.4vmax;
margin-top: 0.7vmax;
background: #5f6f8f;
border: 0;
outline: 0;
font-family: "OpenSansRegular";
color: rgb(57, 68, 98);
font-size: 0.9vmax;
font-weight: 700;
background-color: #5f6f8f;
background-blend-mode: normal;
}
ただし、Chrome では次のように表示されます。
この問題はおそらく Web フォント技術を使用しているという事実に関連しており、Photoshop でテキストが影響を受けるのと同じように、ブラウザーでのスタイリングの影響を受けていないという事実に関連していることを認識していますが、上記にアプローチする方法についてのヒントをいただければ幸いです。 -記述された問題。ありがとうございました。