私たちのデザイナーは、.psd（Photoshop）でウェブデザインを提供したいと考えています。ページマークアップとスタイルを作成するときには、通常、私たちが利用できるツールに賛成してデザインを妥協する必要があります。確かに後で、ページを実装する人のスキルに依存しますが、次の例では、デザインを実装するための正しいCSSテクニックを研究し、到達するための一般的なアプローチは何ですか？css経由でPhotoshopから効果を得るための一般的なアプローチを決定するにはどうすればよいですか？
問題の例は以下である：
これは、基本的には[T]（テキスト）の要素である：Photoshopで 、テキストベースのログインボタンは、最終的な結果として、このようになりますエフェクト（Fx）が適用されます。効果は次のように設定されているように見える色のオーバーレイである：それは見えます正確にどのようにある
：この効果がないと
、PSDでのログインページには、次のようになりますブラウザのページに表示されます。最終的な.psdデザインとまったく同じに見えるようにするには、正しいCSSテクニックの例を探すためにどのようにアプローチしなければなりませんか？
指定された.cssクラスを持つ<button>要素としてログインリンクを実装しました。
.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で次のような外観得られます：このような通常：私はbackgoundブレンドモードと一緒に行く試みた
を私はこの問題は、おそらくに関連していることを実感します私たちがウェブフォントテクニックを使用しており、ブラウザのスタイリングの影響を受けていないという事実は、同じようにテキストがPhotoshopで影響を受けますが、私は上記の問題にどのようにアプローチするかについてのヒントを得ています。ありがとうございました。
この質問は広すぎる、意見に基づくかの議論が必要となるので、オフになっていれますかスタックオーバフローの-topic。具体的な、解決可能な、プログラミングの問題がある場合は、詳細を記入してください。 –
私は@Paulie_Dに同意しますが、 CSS3はテキストシャドウをサポートしています。部分的な不透明度を持つ白いテキストシャドウを作成するだけです。 –