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

 2014/09/14

stitch1

当サイトのナビゲーション部分やサイドバーのタイトル部分はステッチ風にしています(え?見えない?)。もうちょっと細かい指定をすると本当に縫っているように見えるのですが、コードが膨大になってしまいます。そこでちょっといんちきステッチ風にしているこのサイトの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がお送りしましたー!

WordPress

Please comment!

  

2件のコメント

  • むーち 2016年1月15日 23:49

    はじめまして!
    かわいいカスタマイズ方法を教えてくださり、ありがとうございます♪
    男っぽかったサイドバーがめっちゃかわいくなりました~(*´▽`*)

    以前も検索から何度か来たことがあります。
    また来ます♪

    • ちゅんこ 2016年1月18日 12:17

      むーち様

      コメントありがとうございます。
      少しでもお役に立てたのなら幸いです・・・(´▽`)

Messege




現在トラックバックはありません。