どうも!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
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^