私はバックエンドの開発者ですが、私のデザイン スキルは明らかに非常に弱いものです。私がとても気に入っている CSS の背景効果があります。それを実現する方法について、一般的なアイデアを誰か教えてもらえないでしょうか? sourcebits.comやyoutube.comなどのサイトを見ると、背景は灰色に見え、高品質の文房具のシートのような質感になっています。彼らはどのようにこの効果を達成していますか?
ありがとう。
私はバックエンドの開発者ですが、私のデザイン スキルは明らかに非常に弱いものです。私がとても気に入っている CSS の背景効果があります。それを実現する方法について、一般的なアイデアを誰か教えてもらえないでしょうか? sourcebits.comやyoutube.comなどのサイトを見ると、背景は灰色に見え、高品質の文房具のシートのような質感になっています。彼らはどのようにこの効果を達成していますか?
ありがとう。
SourceBits で使用される CSS:
body {
background: #8D9698 url('../images/body-by-bg.jpg') repeat fixed 0 0;
}
SourceBits 背景リンク: http://www.sourcebits.com/images/body-by-bg.jpg
YouTube で使用される CSS:
body {
background: no-repeat url(//s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png) 0 0;
background-color: #EBEBEB;
background-repeat: repeat;
}
YouTube 背景リンク: http://s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png
彼らはタイル張りの小さなグラフィックを使用している可能性があります。通常、この小さなグラフィックは 10x10 ピクセル以下で、背景色 (YouTube の場合はグレー) と、背景色よりわずかに暗いいくつかのドットが含まれています。タイル状にすると、影の効果が生まれます。
おっと、@Anneは私が終わる前に答えを得ました! 彼女はまた、あなたが必要とする正確なコードを含んでいます. しかし、ええ、これでコードがわかり、答えの「理由」がわかりました:)
あなたの質問に対する答えではありませんが、これはフロントエンドのコーディングをしているときに大いに役立つかもしれません: Chrome のデバッガ ツールを使ってみたことはありますか? それともファイアーバグ?これにより、HTML とそれに適用されている CSS スタイル定義を確認できます。ソースを表示するよりもはるかに高速です。背景、フォント フェースなど、特定の要素に適用される CSS ルールが表示されるため、特にフロントエンドがあなたの出身地ではない場合に役立ちます。
彼らは写真を使用します。各コーナーとサイドに1つ必要です