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

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

[adsense]

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がお送りしましたー!

ちゅんこ

ちゅんこ

日々の生活を送る上で、「いかに手を抜くか」という不真面目なことを真面目に探求している意識低い系主婦です。東京ではない首都圏に極小ペンシルハウスを建築し、夫と娘(小1)と仲睦まじく暮らしています。好きな食べ物は舟和の芋ようかん。

こちらの記事もおすすめです

関連するキーワード

2 件のコメント

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

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

    • むーち様

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です