記事の画像にシャドウ(影)を付けて浮いたようなイメージにしてみました|TNX !! @saita_ryouhei


Kamera - 1891
Photo by melquiades1898

ブログの見た目だけでもなんとかしようと記事のクオリティーを棚に上げている ひろま(@hiroma20)です。

ブログに載せる写真や画像の淵にシャドウ(影)を付けて、浮いているような見た目にするスペシャルなワザを導入してみます。


いままではDropShadowInというアプリを使って加工していました。

ブログに入れる画像の枠にカンタンに「影」が付けられるMacアプリ「DropShadowIn for Mac」

非常に使い勝手が良くって導入以来ずっと使っているのですが、大量に画像を入れる場合、けっこう面倒くさく感じてまいりました。

もやもやしていた時にグッドタイミングでこんな記事を目にしたのです。

画像に影(シャドウ)をつけるようCSS修正 | stryhの日記 ~stryh/changelog
どうもCSS大臣です( ー`дー´)キリッ(@hiro45jpさん命名) タイトルの通りです。 以前はSkitch使ってシャドウをつけ、WordPressにアップしてました。 最近、それまでは …

Twitterでいつも構ってくれているCSS大臣こと、@saita_ryouheiさんが自作されたものです。すげー。

仕組みはまったく分かってないんですが下記のコードをCSSにコピペで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;
}

▼こんな風に「テーマの編集>>style.css」で一番下に貼付けます

スクリーンショット 2012 05 02 23 50 40 2

とりあえずうまくいってることを願います。



☟こちらの記事もあわせてどうぞ

記事が参考になったりおもしろかったら
いいね!してね( ´ ▽ ` )ノ

Twitterでマツオユキを

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA