stryhのchangelog

画像に影(シャドウ)をつけるようCSS修正

6835624429 52f47ff2cd m
どうもCSS大臣です( ー`дー´)キリッ(@hiro45jpさん命名)

タイトルの通りです。
以前はSkitch使ってシャドウをつけ、WordPressにアップしてました。
最近、それまでは苦では無かったのですがさすがに面倒になってきたのでCSSに定義してclass属性で指定するようにしました。

シャドウの付け方は以前、@hiro45jpさんのAppHTMLの角丸&シャドウでやっていたので楽チンでした( ›◡ु‹ )

角丸&シャドウ修正エントリー

@hiro45jp謹製Bookmarkletをちょっちカスタマイズ | stryhの日記 ~stryh/changelog
AppHTML角丸&シャドウ修正エントリー。
今動いているAppHTMLにも採用されています!


CSS

ブラウザー、WPTouch共にこの設定でOKです。
数値はお好きな数値にしてもらっても大丈夫です。

.shadowimg {
    box-shadow: 0 6px 25px 8px #999999;
    -moz-box-shadow: 0 6px 25px 8px #999999;
    -webkit-box-shadow: 0 6px 25px 8px #999999;
    margin: 15px 35px 40px;
}

HTMLの書き方

既にclass属性がある場合

Html書き方
既にimgタグにclass属性がある場合は追記する形で書きます。

class属性がない場合

Html書き方2
class属性が無い場合は「class=”shadowimg”」をimgタグに追記してください。

実際の表示

ブラウザー

CSS shadow1

iPhone

CSS shadow2

ブラウザー、iPhone共にシャドウが付いてますね。

Make a draft by DraftPad
Final adjustment by MarsEdit

URL :
TRACKBACK URL :

Comments & Trackbacks

  • コメント ( 0 )
  • トラックバック ( 2 )

No commented yet.

  1. […] は当然死にましたが(笑) ◆ 画像に影(シャドウ)をつけるようCSS修正http://stryh.com/2012/04/22/%E7%94%BB%E5%83%8F%E3%81%AB%E5%…(via stryhの日記 ~stryh/changelog ) [7] blogger ◆ WordPressで記事のツイート […]

Leave a reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Return Top