- 締切済み
斜線背景にドロップシャドウをきれいに敷く方法
以前どこかのサイトで見たのですが、 斜線の背景にドロップシャドウがきれいに重なっているサイトがありました。 /→斜線 [●●●●]→コンテンツ・ドロップシャドウ //[●●●●]// //[●●●●]// //[●●●●]// //[●●●●]// //[●●●●]// 試しにコンテンツ部にドロップシャドウ＋斜線を含めたものをスライスし、 repeat-yでやってみましたが、やはり背景の斜線とズレがでて斜線が汚くなってしまいます。 これはどういう方法でやっているのでしょうか？ コンテンツ部をPNGで透過しているのかとも思って調べたのですが、いまいちやり方がわかりません。 わかる方いらっしゃいましたら、お願いいたします。 ちなみにphotoshopcs3です。
- sister69
- お礼率80% (42/52)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
アルファpngを使わない場合(多くのブラウザに対応させたい時)は質問者さんのやられているようにすれば良いと思いますが、コンテンツ部分のwidthを固定幅にしないとズレてくるので難しいですね。 あとはbackground-positionでcenter topを指定したほうが良いと思います。 アルファpngの場合はphotoshop上で背景を不可視にして新しいレイヤーに影をグラデーションツールなどでつくり、適宜サイズを変更してpngの24bitで保存してください。 そのまま背景画像にしてしまえばphotoshopのレイヤーのように不透明度を反映した表示になるはずです。
関連するQ&A
- ボックスの両側にドロップシャドウ
下記サイトのように、ボックスの両側にドロップシャドウをするにはどうしたらいいのでしょうか。 最初はシャドウを作ってy方向にリピートさせてあるのかなと思ったのですが、背景画像を見てみるとあらかじめドロップシャドウは作られていて、画像作成後にドロップシャドウを含めてスライスしてありました。 ドロップシャドウは一度では片側しかできないと思うのですが・・・。 illustrator,photoshopともにCS2です。 よろしくお願いいたします。 http://www.eprintonline.com.au/printing-products-services
- ベストアンサー
- グラフィックソフト
- ドロップシャドウの画像分割について
ドロップシャドウの画像分割について 質問させて頂きます。 中のコンテンツによってサイズが変わらないボックスに、ドロップシャドウをつける場合 １：一枚の背景 ２：「上部、縦シャドウ（繰り返し）、下部」（または横）と分化する ３：CSSのみでドロップシャドウを表示する という選択肢があるとおもいますが、３は実際のサイトでは見たことがなく さまざまなサイトでボックスの「背景を表示」してみると１と２が混在していました。 ボックスのサイズが変わるのであれば、画像を分割する必要があると思いますが 画像の転送量を減らすほかに、メリットやデメリットがあるのでしょうか？ また、CSSのみで表示することは実用に耐えられるものでしょうか？ わかり辛い質問で申し訳ありませんが、助言を頂ければ幸いです。
- ベストアンサー
- HTML
- photoshop7.0でレイヤースタイル「ドロップシャドウ」にした画
photoshop7.0でレイヤースタイル「ドロップシャドウ」にした画像で透過gifを作ろうとしているのですが、「Webで保存」、「gif」、「透明部分にチェック」をしているのですが、微妙に透過にはなるのですが、がたがたで完璧な透過という形になりません。 色々Googleで調べたりしてるのですが、「アンチエイリアスがオンしてるから」とか書いてたり、では完全には無理とか書いてあったりよくわかりません。 PNG-24で保存するとうまくいくのですが・・。 教えて下さい。 画像のようになります。
- ベストアンサー
- グラフィックソフト
- illustratorで、グループを解除するとドロップシャドウも消えた！
illustrator10を使用しています。macOSは、10.3.9です。 たまたま他人の作ったグラフィックデータを修正することになったのですが、 ふたつの丸をグループ化したものにドロップシャドウがついていました。 その、ドロップシャドウだけ消したかったのですが、別になっていなかったので、あきらめてたところ、グループ化を解除しただけで、ドロップシャドウは消え、ついでに透過の設定までなくなってしまいました。 グラフィックはあまり専門ではないので、ここまでイラストレーターを使いこなせてません。 どの様な設定になっていたのか、教えてもらえないでしょうか。 また、フィルターと効果の使い勝手の違いは（ドロップシャドウぐらいしか使いませんが）別のシャドウを作ってくれるかくれないか～ぐらいにしか理解できてません。 効果でいったんつけられたドロップシャドウも解除することが可能なんでしょうか。 adobeのサイトを見てみたのですが、探し方が悪いのか、ヒントになるものに出会えませんでした。 どなたか教えてもらえませんか。 宜しくお願いします。
- ベストアンサー
- Mac
- Fireworksで8bitの透過PNGの書出し
Fireworksで、8bitの透過PNGの書き出しをしたいのですが、 透過させたくない白い部分まで透過してしまい、うまくいきません。 かなりのFireworks初心者で、きれいに書き出す方法をネットで調べてみたのですが、 分からず困っております。 作業詳細 ---------------- 最終的に欲しいデータ ： Fireworks形式のPNG（8bit） 作業環境：Windows XP、Fireworks CS3、Photoshop CS3 作業手順： (1)Photoshopにて複数の画像を作成 ドロップシャドウなどを適用している透過画像もあるので、 「Webおよびデバイス用に保存」でPNG-24で書き出します。 (2)作成した画像をFireworksで、ある決まったテンプレート（PNG）にレイアウトします。 (3)書き出し設定 「最適化」WindowにてPNG 8 を選択。 (3)「書き出し」からスライスの書き出しを行います。 ---------------- すると、PNG32では問題なく書き出せるのですが、 PNG 8 の場合は、透過させたくない白い部分まで色が抜けて透過してしまいました。 試しにPNG24で書き出そうとしたところ、今度は透過させたい部分まで透過されなくなり、 スライスの範囲通りに四角い形になってしまいました。 PhotoshopのPNG8ではドロップシャドウの部分などがきれいに透過されないことと、 最終的にFireworkのテンプレートも必要なので、 Photoshopだけで作業は完結できません。 説明が下手で恐縮ですが、 8bitの透過PNG（Fireworks）の書き出し方をお教えいただけますでしょうか。 よろしくお願いいたします。
- 締切済み
- グラフィックソフト
- 【jquery】スクロールで背景画像もついてくる
よろしくお願いいたします。 jqueryを使って背景画像をスクロールと一緒についてくるようにしたいのですが、 思い通りにいかず、質問させていただきたいと思います。 やりたいと思っていることは、 まず背景画像1（1.jpg）をbodyにbackgroundに設定して、 その上に<div></div>タグで背景画像2（2.png：透過画像）をbackgroundに設定し、 背景画像2だけスクロールと一緒についてくるようにしたいと思っています。 現状のソースは以下になっています。 【html head内】 <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#haikei').css('background-position', '50%'+ parseInt( y / 3 ) + 'px'); }); }); </script> 【html body内】 <div id="haikei"> <div id="wrapper"> <div id="header"> ～略～ </div> <div id="contents"> ～略～ </div> </div> </div> 【CSS内】 #bg01 { background: url(2.png) top center repeat-y; } 今の状態だと、動き自体は思い通りに動いてくれるのですが、 背景画像を表示させたい位置がありまして、 <div id="header"></div>内には2.pngを表示させず、 <div id="contents"></div>の部分から2.pngを表示させて スクロールについてくるようにしたいと思っています。 下記のように、 <div id="wrapper"> <div id="header"> ～略～ </div> <div id="haikei"> <div id="contents"> ～略～ </div> </div> </div> と、<div id="haikei"></div>の位置を変えてみましたが、 これだとスクロールしたときに、<div id="header"></div>の下から 画像が途中からはみ出てくる？ような感じで、きれいにスクロールされません。 さらにCSSのrepeat-yをno-repeatに変えて試してみましたが、 その場合画像がページの一番下まで動いてくれません。 （途中までしか画像がついてきてくれない感じです） 方法としては、2.pngの表示開始位置を<div id="header"></div>より下に位置指定すれば うまくいくのかなと思ったのですが、書き方がわからず。。。 なにかうまくいく書き方はないでしょうか・・？ もしくは上記の方法以外でも、実現できそうなやり方や、 参考になりそうなサイトがあればお教えいただきたいと思っています。 ちなみに、私が参考にさせていただいたサイト様はこちらです。 http://www.webopixel.net/javascript/350.html わかりにくい点がありましたら、補足いたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSSの設定でわからない箇所があります。
CSSの設定でわからない箇所があります。 ベタ塗りの背景画像と本文エリアのページ両端をドロップシャドウ効果で 縦にリピートするライン画像の背景を使用したいのですが、 途中でドロップシャドウの線が止まってしまいます。 <body> <div id="wrapper"> <div id="header"></div> <div id="main"></div> <div id="footer"></div> </div> </body> のように指定して、 body { background-image: url(img/back.gif); background-repeat: repeat; } と #wrapper { width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-image: url(img/shadow.png); background-repeat: repeat-y; } のように設定しました。 そうすると、footerエリアは#wrapper内なので、 指定したドロップシャドウのラインの背景がブラウザ画面を拡大すると切れてしまいます。 ブラウザのサイズ、拡大縮小に関係なく、ページ最下部までドロップシャドウの背景を伸ばしたいです。 ＊back.gif＝（ベタ塗り背景）。shadow.png＝（ドロップシャドウ効果のライン）です。 それら背景をブラウザのサイズ関係なく最下層まで切れずに表示させたいです。（高さが50pixでも1000pixでも表示させたいです。） ＊ページは中央配置、横幅は固定、縦は各ページで成り行きにしたいです。 ＊現在背景は、ベタ塗りの背景画像と、ドロップシャドウ効果のラインの背景画像の２種を使用しています。設定方法、CSSの適用場所は選びません。 以上、ご教授下さい。 宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
- テーブルの背景画像のみ透明化
http://css-happylife.com/archives/2007/0106_1500.php 上記サイトのように、背景画像のみを透過させたいと考えています。 例えば、 body{ background-image : url(./background.png); } table{ filter:Alpha(opacity=70,finishOpacity=70,style=3); } とした場合は、テーブル内の全てのコンテンツが透過されてしまいます。 透過されているテーブルの上に透過されていないテーブルを重ねて表示させる方法もネット上に掲載されていましたが、その場合、上記サイトのように動的にテーブルサイズが変わる場合は、実装が難しいように感じます。 しかし上記サイトでは背景のみが透過されているようです。 スタイルシートを見てみましたが、自分の知識では解析できませんでした。 実現方法を教えていただけると大変助かります。
- ベストアンサー
- HTML
- 影付き(透過)ロゴタイトルの表示ないし背景との同調について
影付き(透過)ロゴタイトルの表示ないし背景との同調について 只今HPを作成しているのですが、今回背景にボーダーを使い、その上にタイトルロゴを表示させようと思っています。デザイン的にそのロゴに影を付け、初めは.gifで透過保存させようと思ったのですが、荒々しい風に出来てしまいました。pngでは美しく出来たのですが、pngはネットブラウザ環境によっては表示されないと聞いたのであまり使いたくなくて・・・。 そこで今度はそのロゴにあらかじめボーダー画像を加えて、cssで上手に背景と溶け込ませて表示させようと思ったのですが、上手に表示出来ません。 ちなみにそのタイトルを表示させる部分は #wrapper{ margin:0px; padding: 0px; text-align: center; } #contents{ width: 880px; margin-left:auto; margin-right:auto; } で内包してあります。html上で簡単に書くと ・ ・ ・ <body> <div id="wrapper"> <div id="contents"> ここに画像タグ </div> </div> </body> といった感じです。 背景は横一列で固定するようにしています。 body{ font-size: 13px; line-height:160%; background-image: url(img/back.gif); background-repeat:repeat-x; background-position: 0% 0%; } こんな感じです。 CSSでこの問題を解決するか、それともgifで上手に透過画像を作るのか、はたまたpng保存で良いのか、分かりやすく解説して下さる方、宜しくお願いします。分かりにくーーい質問で申し訳ありません・・・。
- ベストアンサー
- CSS
- CSS/背景画使用時のメインコンテナ左右のデザイン
タイトルが不明瞭で申し訳ありません。 添付画像を見ていただくと分かるかと思うのですが、 背景が無地ではなく、画像を使用している場合に メインコンテナーの左右に画像のような効果を付けたい場合は 左右部分に使用する背景用画像を透過し、pngで保存して使用すれば いいのでしょうか？ 単にシャドーをつけるのではなく、こういった紙をちぎったような効果を出したいのですが…。 IEで透過は見れないなどと色んな所で見たのですが 一般的にpngの透過画像は使わない方が良いのでしょうか？ 初心者故おかしなことを言っていたらすみません…。 添付画のようなデザインにするには どのような方法があるのかご助言を頂けたら幸いでございます。 宜しくお願いします。 ※添付画のサイトは現在工事中のようで、ソースが見れませんでした。
- ベストアンサー
- HTML
