マスキングテープ風デザインCSS　ガーリーデザインのサイトやブログに

f:id:syofuso:20170114211330j:plain
以前「stripe」というはてなブログテーマを作ったのですが、その時に使ったストライプ背景のCSS（グラデーション）を応用してマスキングテープ風デザインやドット柄、チェック柄背景パターンのCSSをご紹介します。
ブログ記事は白背景に文字が続くと、特に長文では読む方は単調に感じてしまいます。
ガーリーなデザインでブログ記事にアクセントを入れ、記事にメリハリを付けましょう。
ブログだけでなく、女性向けのサイトデザインにも使えると思います。
class名は適当に作ったのでお好きなものに変えて下さい。

おすすめポイント

女性向けサイトのデザインに
ブログ記事のアクセントにコピペで使えます

↑このボックスのデザインはあざらしっく.net – Webデザイン、コーディングの素人が楽しくネットで生きてるサイトさんのブログを見て、「かわいい！」と一目惚れし、色・デザインを参考にさせていただきました。CSSのコードは末尾の参考記事を元に自作しています。

ストライプ背景CSS
ドット柄背景CSS
マステ風見出し付きデザインCSS
マステ風見出し付きデザインCSS②
ちぎったメモ+マスキングテープ風デザインCSS

ストライプ背景CSS

ストライプ背景パターン

HTML

<div class="stripe-pattern">ストライプ背景パターン</div>

CSS

.stripe-pattern {
  position: relative;
  background: repeating-linear-gradient(-45deg, rgba(139,198,202,.3), rgba(139,198,202,.3) 10px, #fff 0, #fff 20px);
  padding: 1em;
  color: #65513f;
}

ドット柄背景CSS

ドットパターン

HTML

<div class="dot-pattern">ドットパターン</div>

CSS

.dot-pattern{
  background: #DBD0E4;
  background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  padding: 1em;
  color: #593869;
}

マステ風見出し付きデザインCSS

マステ風というよりセロテープ風ですが…。

マステ風見出し

テキスト

HTML

<div class="maste">
<span class="tape">マステ風見出し</span>
<p>テキスト</p>
</div>

CSS

.maste {
  position: relative;
  background-color: #fff;
  background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%,  rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%);
  background-size: 40px 40px;
  padding: 1em;
}
.tape{
  position: absolute;
  top: -0.75em;
  background-color: rgba(255,255,255,.4);
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,0.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(-3deg);
}
.maste p {
  color: #65513f;
  padding: 15px 10px 10px 10px;
}

マステ風見出し付きデザインCSS②

もういっちょマステ風見出し。

マステ風見出し②

テキスト

HTML

<div class="maste-box">
<span class="maste-tape">マステ風見出し②</span>
<p>テキスト</p>
</div>

CSS

.maste-box {
  position: relative;
  background-color: #fff;
  background: repeating-linear-gradient(-45deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);
  padding: 1em;
}
.maste-tape{
  position: absolute;
  top: -0.75em;
  background-color: rgba(100,100,100,.3);
  border-left:4px solid #8BC6CA;
  padding: 0.25em 2em;
  color: #454545;
  transform: rotate(-3deg);
}
.maste-box p {
  color: #454545;
  padding: 15px 10px 10px 10px;
}

ちぎったメモ+マスキングテープ風デザインCSS

テキスト

HTML

<div class="memo">
<span class="masking-tape">
</span><p>テキスト</p>
</div>

CSS

.memo {
  position: relative;
  background: #F8F0D7;
  border-left:4px dotted rgba(0,0,0,.1);
  border-right:4px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 1em;
  color: #65513f;
  width: 300px;
}
.masking-tape{
  position: absolute;
  top: -1em;
  left: 26%;
  width:100px;
  height:30px;
  background-image: linear-gradient(-45deg, rgba(227,155,140,.4) 25%, transparent 25%, transparent 50%, rgba(227,155,140,.4) 50%, rgba(227,155,140,.4) 75%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(-4deg); 
}
.memo p {
  color: #65513f;
  padding: 10px;
}