背景画像から文字を浮き上がらせて見易くするためのテキスト縁取りCSS

サイトのタイトルなのにマスカット粒の影と重なって文字が読み難い

白い縁を付けてみたら見易くはなったけど、なんか・・・浮き過ぎじゃん？

#site-title h1 {
    color: #663366;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 2.5rem;
    line-height: 1.4;
    text-shadow: 2px  2px 3px RGB(255, 255, 255),
            -2px  2px 3px RGB(255, 255, 255),
             2px -2px 3px RGB(255, 255, 255),
            -2px -2px 3px RGB(255, 255, 255);
}

マスカットの色の淡いのにしてみよう

#site-title h1 {
    color: #663366;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 2.5rem;
    line-height: 1.4;
    text-shadow: 2px  2px 3px RGB(222, 250, 222),
            -2px  2px 3px RGB(222, 250, 222),
             2px -2px 3px RGB(222, 250, 222),
            -2px -2px 3px RGB(222, 250, 222);
}

いんじゃん♪

サイト・ディスクリプションにはなんかチカチカするのでうっすら影を付けてみた

#site-description {
    font-family: "メイリオ", "Meiryo", sans-serif;
    text-shadow: 3px 3px 6px #888;
    padding: 30px;
}