Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS小ネタ】波線マーカーを背景に応用してみました

 どうも!LSSです!!

 

 ちょっとふざけて、こんなのを作ってみました 。

お前のものは俺のもの
俺のものも俺のもの

<div style="background-color: orange; width: 300px; height: 200px; padding: 2.5em 0.5em; color: white; font-size: 24px; font-weight: bold; text-align: center; background-image: linear-gradient(135deg,transparent 30%,black 30%,black 50%,black 70%,transparent 70%), linear-gradient(225deg,transparent 30%,black 30%,black 50%,black 70%,transparent 70%); background-size: 90px 60px; background-position: 0px 60%,45px 60%; background-repeat: repeat-x;">お前のものは俺のもの<br />俺のものも俺のもの</div>

 

…という冗談はさておき。

 

 

もしかしたら、個性的な背景のボックスが作れるんじゃないかな?

と思って、作ってみたのがこちら!↓

波線マーカーを背景に
応用してみたのです

 

 

コード

<div style="
background-color: #f9aea5;
border-radius: 25px;
box-shadow: 5px 5px 5px #888888;
border: 2px solid #eeeeee;
padding: 1em 1em;
color: black;
font-size: 24px;
font-weight: bold;
text-align: center;
background-image:
linear-gradient(135deg,transparent 30%,#fcf5f7 50%,transparent 70%),
linear-gradient(225deg,transparent 30%,#fcf5f7 50%,transparent 70%);
background-size: 30px 15px;
background-position: 0px 60%,15px 60%;
background-repeat: repeat;
">波線マーカーを背景に<br />応用してみたのです</div>

 

 

背景色の指定箇所

<div style="
background-color: #f9aea5;
border-radius: 25px;
box-shadow: 5px 5px 5px #888888;
border: 2px solid #eeeeee;
padding: 1em 1em;
color: black;
font-size: 24px;
font-weight: bold;
text-align: center;
background-image:
linear-gradient(135deg,transparent 30%,#fcf5f7 50%,transparent 70%),
linear-gradient(225deg,transparent 30%,#fcf5f7 50%,transparent 70%);
background-size: 30px 15px;
background-position: 0px 60%,15px 60%;
background-repeat: repeat;
">波線マーカーを背景に<br />応用してみたのです</div>

 

#f9aea5を下地に、#fcf5f7の色の波が入っています。

 

 

その他

中の文字について指定しているのは、

color: black;
font-size: 24px;
font-weight: bold;
text-align: center;

の4行です。
上から、「文字色」「文字サイズ」「太字」「中央寄せ」の指定ですね。

 

波型についての指定は、

background-image:
linear-gradient(135deg,transparent 30%,#fcf5f7 50%,transparent 70%),
linear-gradient(225deg,transparent 30%,#fcf5f7 50%,transparent 70%);
background-size: 30px 15px;
background-position: 0px 60%,15px 60%;
background-repeat: repeat;

の6行です。

 

あと、ボックスの形について指定しているのが、

border-radius: 25px;
box-shadow: 5px 5px 5px #888888;
border: 2px solid #eeeeee;

の3行で、上から「25pxの角丸」「右下に灰色の影を落とす」「2px幅の薄い灰色の枠線」を指定しています。

  

 

波線を背景にしたら、独特な効果になるかな?

と思い、試してみたのが今回の記事です。

「縦リピートしない横一本の波線」の場合…どうしてもあのキャラを連想してしまい、冒頭のおふざけから始まりましたwww

 

縦リピートもして、グラデぼかしも入った状態なら、背景として使えるんじゃないかな?と真面目に作ってみたのが後のものとなります。

 

作ってて気づいたんですが、色々調整してみても「完全なギザギザ線」にもならないんですね、この方法^^;

例えば、最初のやつで、background-sizeの高さを増やしてみると(60px→90px)、

お前のものは俺のもの
俺のものも俺のもの

なんかこんなカタチになってしまいます。

この不自然な出っ張りは、background-sizeの高さを削る事でなくせるので、まぁいっかw

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^