【CSS+SVG】ヘリンボーン模様の背景
どうも！LSSです！！
で、CSSにSVGを織り込むという手法で、背景を描くコードを作成しました。
そのコメント欄に、
とのコメントをいただき、ヘリボーンについて調べてみると、いつも通ってる歩道で見かけるような模様でした。
さじ様、いつもありがとうございます^^
※英語の読み方次第で、ヘリングボーンだったり ヘリンボーンだったり ヘリボーンだったりしますが、以下「ヘリンボーン」と呼ぶ事にします。
ヘリンボーン模様の背景
コード
<style><!--
.rengah{
padding:0.6em;
background-color:#dddddd;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80" viewbox="0 0 80 80" stroke="none" stroke-width="0"><defs><linearGradient id="rggrd" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23ffdddd" /><stop offset="100%" stop-color="%23f8eeee" /></linearGradient><rect id="rgy" x="0" y="0" width="37" height="17" rx="3" ry="3" fill="url(%23rggrd)"></rect><rect id="rgt" x="0" y="0" width="17" height="37" rx="3" ry="3" fill="url(%23rggrd)"></rect></defs><use xlink:href="%23rgy" x="-20" y="0"/><use xlink:href="%23rgt" x="20" y="-20"/><use xlink:href="%23rgt" x="40" y="0"/><use xlink:href="%23rgy" x="60" y="0"/><use xlink:href="%23rgy" x="0" y="20"/><use xlink:href="%23rgt" x="60" y="20"/><use xlink:href="%23rgt" x="0" y="40"/><use xlink:href="%23rgy" x="20" y="40"/><use xlink:href="%23rgt" x="20" y="60"/><use xlink:href="%23rgy" x="40" y="60"/></svg>');
background-size:80px 80px;
}
--></style>
<div class="rengah">中に入れる文章</div>
改変しやすい部分をコード中で赤文字にしています
background-color:#dddddd;
これが「目地」の部分の色を指定している部分になります。
stop-color="%23ffdddd"
stop-color="%23f8eeee"
タイルの「グラデーション色」を指定している部分で、「左上」の色と「右下」の色を指定しています。
色コードの「#」を「%23」に置き換えて指定する必要があります。
width="37" height="17"
width="17" height="37"
横向きのタイル、縦向きのタイルのサイズを指定しています。
40×20のスペースに収まるサイズで指定します。
<div class="rengah">中に入れる文章</div>
ヘリンボーン模様の背景のボックスの中に記述する文章を書きます。
中で改行する時は<br/>タグを使用します。
※はてなブログの「編集 見たまま」画面ではシフトキーを押しながらエンターキーで改行できます^^
CSS+SVGでも、defsやuseが使えますね^^
# を %23 に書き換えないといけない、という点に気をつければ、だいぶ自由に使えるみたいです^^
と、今回それとは別に、
「use xlink:href」を使用する場合は、SVGタグ内に
xmlns:xlink="http://www.w3.org/1999/xlink"
を記載しないといけない、というところにちょっと引っ掛かりました^^;
xmlns、やっぱ省略しちゃいけないんだなぁ…。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
レンガの組み方でヘリボーンってのもあるんですけど、以前の彩綾型みたいに組まれた模様で面白いかもです。
%23にしなくちゃいけません、って決まりなんですか？誰が決めたんでしょうね（笑）