当サイトのナビゲーション部分やサイドバーのタイトル部分はステッチ風にしています(え?見えない?)。もうちょっと細かい指定をすると本当に縫っているように見えるのですが、コードが膨大になってしまいます。そこでちょっといんちきステッチ風にしているこのサイトのcssをご紹介します。 スポンサーリンク box-shadowで簡単かわいいステッチ風デザイン そう、何を隠そうbox-shadowで3px程度はみ出しているだけなのですwナビ部分を見ていただくとわかると思うのですが気背景との境界線がぼやけているのがわかるかと思います。 こんな感じになります。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がお送りしましたー! Recommendこの記事もおすすめです!Please Share!! ツイートする シェアする はてブする この記事のタイトルとURLをコピーする 記事タイトル女性向けサイトに!CSSで簡単にステッチっぽいデザインにする方法 記事URLhttps://shufulife.com/stitch/ お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。 この記事が気に入ったらいいね!しよう 最新情報をお届けします最新記事をお知らせします Facebookで フォローする Twitterで フォローする WordPress 公開日:2014/9/14 更新日:2017/10/25