ヤンガン発売まで暇なので?、ニワカ勉強の内容をまとめておきます。
忘れっぽい自分のための備忘録ということで、せっかく来て下さった方に無慈悲なスルー推奨です。

あちこちに影をつけてみた

CSSで影をつけると言えば box-shadow ですが、弊ブログでは filter: drop-shadow というプロパティを主に使っています。
両者の違いを、背景が透過した透華画像を使って比較してみましょう。
分かりやすくするために、少しきつめに設定します。
※InternetExplorerでは表示されません

透華画像 透華画像

左が filter: drop-shadow、右が box-shadow です。
filter: drop-shadow が画像の透過部分を反映しているのに対し、box-shadow は画像領域を一つの box として認識し、画像そのものではなくその領域に対して影をつけていることが見て取れます。背景自体は透過しているのですが。
filter: drop-shadow
box-shadow
filter: drop-shadow は文字も図形のように認識し、文字に沿った影をつけます。 box-shadow ではこのような影はつけられず、文字に影をつけるには text-shadow という別のプロパティを指定する必要があります。
filter: drop-shadow は、透過画像にも文字にも、画面上に面積を持ってさえいれば、どんな要素にもその形に合わせて影をつけてくれる、便利なプロパティなのです。
弊ブログのスタイルシートは、こんな感じです。
/*★★★★★★★★  drop-shadow ★★★★★★★★*/
#main, #sidebar, #main img, #sidemenu1 img, #blog-footer p, #calendarplugin-2232723 table, 
.kage, .koma, .ancoro, .banner img, .to-pagetop img, .recent-article-image img, .plugin-weather img {
    -webkit-filter: drop-shadow(3px 3px 5px RosyBrown);
    -ms-filter: progid:
      DXImageTransform.Microsoft.Shadow(
        color="RosyBrown",
        direction=315,
        strength=3,
        enabled=true
      );
    filter: drop-shadow(3px 3px 5px RosyBrown);
    overflow: visible;
}
ごちゃごちゃ書いてありますが、キモは
filter: drop-shadow(3px 3px 5px RosyBrown);の部分。
要素の3px右、3px下に、半径5pxのぼかした影を入れる。なお色はRosyBrownで。
という意味になります。
要素というのは #main, #sidebar,…と羅列してある部分がそうです。
#main とは、"main"というID(ラベル)のついた要素。このブログだと、この記事が書いてある、真ん中の大きなカラム全体です。HTMLファイルには<div id="main">と書いてあり、div要素であることがわかります。よって、div#main と書いても同じです。
#main img という要素名も見えます。これは、"main"というIDの要素内に置かれた img要素(画像)すべて、という意味になります。スタイルシートで一括指定してあるので、NSがここに画像を貼ると、あらかじめデザインしておいた影が自動的につくことになります。
.kage は特に要素の種類を指定していないクラス名。どこかにピンポイントで影をつけたい場合、<div class="kage"></div>や<span class="kage"></span>などで括ってやると、そこにだけ影がつきます。

ウェブ系のサイト巡りをしていると、、今はフラットデザインが主流で、ゴテゴテと手の込んだ装飾はダサい、CSS3は要らない子、といった言葉を見かけることがあります。
ソフトウェアで言えばウィルスバスタークラウドとか、クリップスタジオみたいに、シンプルで洒落たデザインが多いのも事実。海外サイトなんかとくに。
しかしNSはもう少しこんな感じで遊びたいんだなぁ…