テキストの装飾に立体や白抜きの表現を追加しました。
これに合わせて、ロゴ・見出し・ボタンの装飾雛形を一部修正・追加しました。「装飾」ボタンからぜひお試しください。
ここでは、新しい表現の紹介と、技術者向け解説として立体文字・白抜き文字をCSSのtext-shadowだけで表現する方法を説明します。

No.1は白抜き＆立体効果です。さらに立体部分を白抜きにしたのがNo.3です。
No.3の例のように暗めの背景色でも判読性が良好です。
枠線の太さが文字サイズに比例するため、小さな文字には向きません。

白枠＆立体効果です。小さな文字でも判読性があり、使い勝手良好です。
白枠の太いNo.4は、暗めの背景色によく合います。

No.1と同じく白抜き＆立体効果です。立体部分を大きくしてポップな印象です。No.6は立体部分が逆になっています。
明るめの色によく合います。No.6の例のように、明るめの背景色の上に重ねるのもオススメです。
文字色、背景色、文字サイズなどで判読性が低下する場合がありますのでご注意ください。

シンプルな白抜き効果です。No.7が細め、No.8はやや太めの枠です。
No.8の例のように画像が背景でも判読性を確保できます。
約140％以上のある程度大き目の文字サイズで使うことをオススメします。

白枠の外側にさらに枠を重ねたタイプです。No.9が細め、No.10が太めの枠です。
こちらもある程度大きな文字サイズ向けです。
例のようにアイコンに使うと、アイコンがまるで別デザインのように見えます。
主張が強く、同色系の背景にも負けません。

装飾の雛形で使用される色は、デザインで選んだ色から自動で算出・設定されます。例えば、赤を使っていると赤系の雛形が表示されます。
雛形はそのまま使うのはもちろんですが、色を変えたり、ゴシックを明朝に変えたり、と様々デザインを簡単に変更してご利用いただけます。

ブロックの装飾機能の使い方をおさらいします。既にバリバリご利用中の方も、「ワンポイント」はぜひお目通し下さい。

ページの中身の編集画面で、ブロックにマウスを当てます。
「装飾」ボタンをクリックするか、ブロックを右クリックして装飾を開始すると、装飾用ウィンドウが表示されます。

はじめに表示される「パパッと装飾」では、雛形や使用中の装飾一覧が表示され、選択肢をクリックすると装飾が適用されます。
雛形や使用中の装飾をそのまま利用する場合は、装飾ウィンドウ下部の「OK」をクリックしてください。

「パパッと装飾」以外のタブでは、各装飾項目を詳細に設定できます。
「パパッと装飾」から雛形を選択し、色など一部を変更することで、簡単に自分だけの装飾が作れます。

テキストタブの中に、今回紹介している立体文字や白抜き文字を作る「立体・枠」効果があります。クリックすると適用されます。戻す場合は、同じグループの「影・凹凸」の右にある「なし」を選択してください。

最後に、各ブロックとも装飾終了後は、下部の「OK」をクリックすることをお忘れなく。
装飾を破棄する場合は「キャンセル」ボタンをクリックしてください。

ここで紹介している立体文字や白抜き文字はtext-shadowで表現しています。text-shadowは
text-shadow:(x方向のズレ量) (y方向のズレ量) (ぼかし量) (色);
の4つのパラメーターで構成されます。

通常は、
text-shadow: 2px -2px 5px #000000;
のように利用しますが、サイズが可変の文字で利用する場合には「px」の代わりに、文字サイズに比例する単位「em」を利用し、
text-shadow: 0.08em -0.08em 0.2em #000000;
のようにするのがオススメです。

このようにpxを使った場合、文字サイズ16pxで作成したshadowは、文字サイズ48pxでは相対的に控えめになります（その効果が欲しい場合はpxでOKです）。
異なる文字サイズで、shadowを同じように表現したい場合はemの出番です。
emは基準となるpx=1emとして計算します。ここでは16px=1emなので、1px=0.0625em≒0.06emとしています。
文字サイズ48px＝3倍になると、shadowも3倍になります。

text-shadowはカンマ区切りで複数指定できます。
立体効果を表現する場合は、ぼかし量が0の影を重ねます。例えば、
text-shadow:
0.02em 0.02em 0 #ff0000,
0.04em 0.04em 0 #ff0000,
0.06em 0.06em 0 #ff0000,
0.08em 0.08em 0 #ff0000,
0.10em 0.10em 0 #ff0000,
0.12em 0.12em 0 #ff0000,
0.14em 0.14em 0 #ff0000,
0.16em 0.16em 0 #ff0000;
のようにすると

xy方向のズレを上下左右にして、
text-shadow:
0.02em 0 0 #ff0000,
0 0.02em 0 #ff0000,
-0.02em 0 0 #ff0000,
0 -0.02em 0 #ff0000;
のようにすると

中身の文字色を白にすれば、

上で紹介したNo.1～10を、実際のソースで紹介します。
メインカラー全て#123456としていますので置換してご利用ください。

text-shadow:0.02em 0.02em 0 #123456, -0.02em 0.02em 0 #123456, 0.02em -0.02em 0 #123456, -0.02em -0.02em 0 #123456, 0.04em 0.04em 0 #123456, 0.06em 0.06em 0 #123456, 0.08em 0.08em 0.04em rgba(0, 0, 0, 0.3);
color:#ffffff !important;
-ms-filter:"DropShadow(color=#123456,offx=2,offy=2)";

text-shadow:0.04em 0.04em 0 #ffffff, -0.04em 0.04em 0 #ffffff, 0.04em -0.04em 0 #ffffff, -0.04em -0.04em 0 #ffffff, 0.08em 0.08em 0 #123456, 0.1em 0.1em 0.04em rgba(0, 0, 0, 0.3);

text-shadow:0.02em 0.02em 0 #123456, -0.02em 0.02em 0 #123456, 0.02em -0.02em 0 #123456, -0.02em -0.02em 0 #123456, 0.04em 0.04em 0 #ffffff, 0.06em 0.06em 0 #123456, 0.08em 0.08em 0.04em rgba(0, 0, 0, 0.3);
color:#ffffff !important;
-ms-filter:"DropShadow(color=#123456,offx=2,offy=2)";

text-shadow:0.04em 0.04em 0 #ffffff, -0.04em 0.04em 0 #ffffff, 0.04em -0.04em 0 #ffffff, -0.04em -0.04em 0 #ffffff, 0.08em 0.08em 0 #ffffff, 0.1em 0.1em 0 #123456, 0.12em 0.12em 0.04em rgba(0, 0, 0, 0.3);

text-shadow:0.02em 0.02em 0 #123456, -0.02em 0.02em 0 #123456, 0.02em -0.02em 0 #123456, -0.02em -0.02em 0 #123456, 0.03em 0.03em 0 #123456, 0.04em 0.04em 0 #123456, 0.05em 0.05em 0 #123456, 0.06em 0.06em 0 #123456, 0.07em 0.07em 0 #123456, 0.08em 0.08em 0 #123456, 0.09em 0.09em 0 #123456, 0.1em 0.1em 0 #123456, 0.11em 0.11em 0 #123456, 0.12em 0.12em 0 #123456, 0.13em 0.13em 0 #123456, 0.14em 0.14em 0 #123456, 0.15em 0.15em 0 #123456, * 0.16em 0.16em 0;
color:#ffffff !important;
-ms-filter:"DropShadow(color=#123456,offx=2,offy=2)";

text-shadow:0.02em 0.02em 0 #123456, -0.02em 0.02em 0 #123456, 0.02em -0.02em 0 #123456, -0.02em -0.02em 0 #123456, -0.03em -0.03em 0 #123456, -0.04em -0.04em 0 #123456, -0.05em -0.05em 0 #123456, -0.06em -0.06em 0 #123456, -0.07em -0.07em 0 #123456, -0.08em -0.08em 0 #123456, -0.09em -0.09em 0 #123456, -0.1em -0.1em 0 #123456, -0.11em -0.11em 0 #123456, -0.12em -0.12em 0 #123456, -0.13em -0.13em 0 #123456, -0.14em -0.14em 0 #123456, -0.15em -0.15em 0 #123456, * -0.16em -0.16em 0;
color:#ffffff !important;
-ms-filter:"DropShadow(color=#123456,offx=2,offy=2)";

text-shadow:0.02em 0.02em 0 #123456, -0.02em 0.02em 0 #123456, 0.02em -0.02em 0 #123456, -0.02em -0.02em 0 #123456, 0.04em 0.04em 0.04em rgba(0, 0, 0, 0.3);
color:#ffffff !important;
-ms-filter:"DropShadow(color=#123456,offx=2,offy=2)";

text-shadow:0.02em 0.02em 0 #123456, -0.02em 0.02em 0 #123456, 0.02em -0.02em 0 #123456, -0.02em -0.02em 0 #123456, 0.04em 0.04em 0 #123456, -0.04em 0.04em 0 #123456, 0.04em -0.04em 0 #123456, -0.04em -0.04em 0 #123456, 0.05em 0 0 #123456, 0 0.05em 0 #123456, -0.05em 0 0 #123456, 0 -0.05em 0 #123456, 0.06em 0.06em 0.04em rgba(0, 0, 0, 0.3);
color:#ffffff !important;
-ms-filter:"DropShadow(color=#123456,offx=2,offy=2)";

text-shadow:0.02em 0.02em 0 #ffffff, -0.02em 0.02em 0 #ffffff, 0.02em -0.02em 0 #ffffff, -0.02em -0.02em 0 #ffffff, 0.04em 0.04em 0 #123456, -0.04em 0.04em 0 #123456, 0.04em -0.04em 0 #123456, -0.04em -0.04em 0 #123456, 0.04em 0 0 #123456, 0 0.04em 0 #123456, -0.04em 0 0 #123456, 0 -0.04em 0 #123456, 0.06em 0.06em 0.04em rgba(0, 0, 0, 0.3);

text-shadow:0.02em 0.02em 0 #ffffff, -0.02em 0.02em 0 #ffffff, 0.02em -0.02em 0 #ffffff, -0.02em -0.02em 0 #ffffff, 0.04em 0.04em 0 #ffffff, -0.04em 0.04em 0 #ffffff, 0.04em -0.04em 0 #ffffff, -0.04em -0.04em 0 #ffffff, 0.06em 0.06em 0 #123456, -0.06em 0.06em 0 #123456, 0.06em -0.06em 0 #123456, -0.06em -0.06em 0 #123456, 0.07em 0 0 #123456, 0 0.07em 0 #123456, -0.07em 0 0 #123456, 0 -0.07em 0 #123456, 0.08em 0.08em 0.04em rgba(0, 0, 0, 0.3);

text-shadowはIE8やIE9では見ることができません。
白背景に白抜き文字を使った場合などでは、IE8・IE9で文字がまったく見れなくなります。これを回避するためにms-filterを使い、
-ms-filter:"DropShadow(color=#123456,offx=2,offy=2)";
としています。
DropShadowもスペース区切りで複数指定が可能で、例えば
-ms-filter:"DropShadow(color=#123456,offx=1,offy=0) DropShadow(color=#123456,offx=0,offy=1) DropShadow(color=#123456,offx=-1,offy=0) DropShadow(color=#123456,offx=0,offy=-1)";
のようにして枠線を表現することは可能です。しかし、あまり見た目が良くないことと、ここでは「判読できなくなることを回避」するのが目的なので、シンプルに同一のDropShadowで補うことにしました。

webkit環境では、
webkit-text-stroke: 0.06em #ff0000;
のようにして枠線を簡単に表現できます。
残念ながら2015年12月4日現在では、IEなどwebkit以外のブラウザは未対応のため、この方法を利用することはお勧めしません。将来の一般化が待たれます。