TopCSS > 2006年1月
2006年1月30日

CSSで画像に影をつける(ドロップシャドウ)

January 30,2006 11:52 PM
Tag:[, , ]
Permalink

CSSを利用して画像に影をつける(ドロップシャドウ)カスタマイズです。ご質問を頂いたのでこちらのエントリーで紹介致します。下のスクリーンショットはドロップシャドウ完成例です。

CSSで画像に影をつける

仕組みは、ドロップシャドウ用の画像を、img タグを括る別のタグの背景画像として指定し、img タグの画像をずらして表示することでドロップシャドウの効果を出すようになっています。

参考にさせて頂いたのは下記のサイトです。ありがとうございました。

最初の1976design.com等で図を用いて解説されているので、仕組みがお分かりになるのではないでしょうか。

1.画像のHTML記述方法

下記のように img 要素を span 要素で括り、class 属性 "shadow" を付与します。span 要素の代わりに div 要素でも構いませんが、インライン要素の方が色々と都合がいいかも?と思い、ここでは span 要素で括ってみました。p 要素でもOKです。

<span class="shadow"><img src="hogehoge.jpg" alt="hogehoge" /></span>

2.ドロップシャドウ用背景画像のダウンロード

当サイトでは用意しておりませんのでPOCHIKING*画像に自動的に影をつけてテキストを回り込ませるからダウンロードしてください。ダウンロードしたら任意のディレクトリ(FC2ブログは固定ですね)へアップロードしてください。

3.スタイルシートの追加

スタイルシートに下記の設定を追加します。色々な方法があるようですので他のサイトの内容もお試しください。

.shadow {
    background: url(背景画像のパス) right bottom;
    float: left; /* 回り込み制御 */
}
 
.shadow img {
    position: relative;
    left: -5px; /* 画像を左へ移動 */
    top: -5px; /* 画像を上へ移動 */
    padding: 5px; /* 画像枠 */
    background: #ffffe0; /* paddingを設定した場合の背景色 */
    border: 1px solid #999999; /* 画像の枠線 */
}

背景画像のパスは、2項でアップロードしたドロップシャドウ用背景画像のパスまたはURLを指定してください。

表示については Windows 2000/XP+IE/Firefox/Operaで確認しております。なお画像枠のpaddingについて、当サイトではIEでは正常に表示されておりませんので予めご了承ください(試験サイトで作ったサンプルでは等しく表示されましたので、CSSの別の設定と干渉しているかもしれません)。IEで画像枠を表示する場合は標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するを参照ください。

4.その他

いろいろ試していて気がついた点をいくつか。

  • div で括るときは img タグの間に改行がない方が良いみたいです。
  • やや上・左よりになるので、位置補正のため下記のように magrin プロパティを .shadow セレクタに設定すると良いでしょう。値は試しながら修正してください。
.shadow {
    margin: 10px 0 0 5px;
    background: url(背景画像のパス) right bottom;
    float: left; /* 回り込み制御 */
}

2006.03.15 追記
IEで画像枠を表示する場合の記述を追加しました。

Comments [36] | Trackbacks [10]
2006年1月20日

背景画像を固定する

January 20,2006 11:52 PM
Tag:[, ]
Permalink

背景画像が固定されているサイトを時々みかけるのですが、ご質問を頂いたので本エントリーにてカスタマイズ方法をご紹介致します。今回は順を追ってサンプルも作ってみました。

1.背景を固定する

CSSの body 要素に背景画像を指定し、背景画像の指定に対して下記のように青色のプロパティ background-attachment プロパティを追加します。このプロパティの値が fixed の場合、画像が固定表示されます。

body {
    background-image: url(hogehoge.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}

公開テンプレートの場合、この設定を styles-site.css の一番下に追加してください(場所はどこでも大丈夫だと思います)。画像の配置位置は background-position プロパティで指定します。上のリストでは「右下」を指定していますが、プロパティの値は

水平方向:左:left/中央:center/右:right
垂直方向:上:top/中:center/下:bottom

のいずれかお好きなものを指定してください("%"指定等、他の設定方法についてはここでは割愛します)。

また上のサンプルでは background-repeat プロパティで画像を繰り返し表示しない設定になっています。水平方向に繰り返し表示する場合は background-repeat プロパティに repeat-x を、垂直方向に繰り返し表示する場合は repeat-y を指定してください。

公開テンプレートに設定したサンプル(リキッドレイアウト固定レイアウト

2.他の背景に隠れないようにする

上記のサンプルでお分かりの通り、画像の上に表示される各オブジェクトに対し背景色を指定していると部分的に隠れてしまいます。固定レイアウトは画像の影も形もありません。これは日付やエントリー部分、固定レイアウトの場合は全体に背景色として「白」を指定しているため、画像が隠れてしまう訳です。

画像を隠さないようにするためには、該当のセレクタ(.entry)の background プロパティ(下記赤色)

.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
      :
     (略)
      :
}

を削除してください。
固定3カラムや固定2カラムの場合は、さらに下記の赤色部分を削除してください。

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}
        :
.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

公開テンプレートに設定したサンプル(リキッドレイアウト固定レイアウト

3.画像を透過する

2項の設定でかなり画像の露出度が向上しましたが、日付やサイドメニュータイトルといった background を指定しているものについては隠れてしまっているのがお分かりになると思います。そこでさらに透過指定を行うことで、画像を日付やサイドメニュータイトルの下からうっすらと表示させることができます。

下記の filter プロパティおよび opacity プロパティ(青色部分)の追加で透過することができます(方法は他にも色々あると思いますがとりあえず)。

3カラムリキッドレイアウトの場合

body {
     :
    (略)
     :
    filter: Alpha(opacity=80);
    opacity:0.8;
}
 
.layout-three-column-liquid #links-left{
     :
    (略)
     :
    filter: Alpha(opacity=80);
    opacity:0.8;
}
.layout-three-column-liquid #links-right{
     :
    (略)
     :
    filter: Alpha(opacity=80);
    opacity:0.8;
}

3カラム固定レイアウトの場合

body {
     :
    (略)
     :
    filter: Alpha(opacity=80);
    opacity:0.8;
}
 
.layout-three-column #links-left,
.layout-three-column #links-right {
     :
    (略)
     :
    filter: Alpha(opacity=80);
    opacity:0.8;
}

プロパティ値にある「80」 や「0.8」が透明度を表しますのでお好きな比率に調整してください。また2カラムの場合は設定するセレクタが異なります(layout-two-column や layout-two-column-liquid-left 等)ので、ご注意ください。
なお半透明にする詳細については、背景を半透明にするを参照ください。

公開テンプレートに設定したサンプル(リキッドレイアウト固定レイアウト

画像は Suggestive Contour Gallery より拝借しました。
これぞまさしく、

Comments [8] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3