締切済み

斜線背景にドロップシャドウをきれいに敷く方法

  • 困ってます
  • 質問No.4171187
  • 閲覧数430
  • ありがとう数0
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 80% (42/52)

以前どこかのサイトで見たのですが、
斜線の背景にドロップシャドウがきれいに重なっているサイトがありました。
/→斜線
[●●●●]→コンテンツ・ドロップシャドウ

//[●●●●]//
//[●●●●]//
//[●●●●]//
//[●●●●]//
//[●●●●]//

試しにコンテンツ部にドロップシャドウ+斜線を含めたものをスライスし、
repeat-yでやってみましたが、やはり背景の斜線とズレがでて斜線が汚くなってしまいます。

これはどういう方法でやっているのでしょうか?
コンテンツ部をPNGで透過しているのかとも思って調べたのですが、いまいちやり方がわかりません。

わかる方いらっしゃいましたら、お願いいたします。
ちなみにphotoshopcs3です。

回答 (全1件)

  • 回答No.1

アルファpngを使わない場合(多くのブラウザに対応させたい時)は質問者さんのやられているようにすれば良いと思いますが、コンテンツ部分のwidthを固定幅にしないとズレてくるので難しいですね。
あとはbackground-positionでcenter topを指定したほうが良いと思います。

アルファpngの場合はphotoshop上で背景を不可視にして新しいレイヤーに影をグラデーションツールなどでつくり、適宜サイズを変更してpngの24bitで保存してください。
そのまま背景画像にしてしまえばphotoshopのレイヤーのように不透明度を反映した表示になるはずです。
感謝経済、優待交換9月20日スタート
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ