女性向けサイトに！CSSで簡単にステッチっぽいデザインにする方法

当サイトのナビゲーション部分やサイドバーのタイトル部分はステッチ風にしています（え？見えない？）。もうちょっと細かい指定をすると本当に縫っているように見えるのですが、コードが膨大になってしまいます。そこでちょっといんちきステッチ風にしているこのサイトのcssをご紹介します。

box-shadowで簡単かわいいステッチ風デザイン

そう、何を隠そうbox-shadowで3px程度はみ出しているだけなのですｗナビ部分を見ていただくとわかると思うのですが気背景との境界線がぼやけているのがわかるかと思います。

cssへの記述

.demo-box {
background:#f48881;
color:#fff;
border-top: 2px dashed #ffffff;
border-bottom: 2px dashed #ffffff;
padding:5px; 
box-shadow: 0 0 3px 3px #f48881;
}

HTMLは

<div class="demo-box"><p>あいうえお。</p></div>

周りがぼやけていないヴァージョン

.demo-box2 {
width:80%;
height:200px;
position:relative;
background:#f48881;
color:#fff;
}
.demo-box2:before{
content: '';
z-index: 1;
position: absolute;
border: 2px dashed #ffffff;
top: 7px;
bottom: 7px;
left: 7px;
right: 7px;
-moz-box-shadow: 0 0 0 3px #f48881;
-webkit-box-shadow: 0 0 0 3px #f48881;
box-shadow: 0 0 0 3px #f48881;
}

丁寧にサイトを作りたかったらこちらがいいですね。

ちょっとそれますが、

こんな感じでコードの紹介とかを載せるエントリーではこちらでご紹介した方法が超便利です。ちょっとしたstyleならこのページのhead内に直接記述できます。

まとめ

サイトとかはなるべくかわいいのがいいなと子供の寝てる好き等に勉強しているのですが、どうも性格が雑なのがサイトにも表れてしまっているようです。あと一歩がんばれないんですよ。

しかし100日チャレンジは今のところがんばっております。現在11日目！！それではちゅんこ@shufulifeがお送りしましたー！