どうも！LSSです！！
【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software
で試みていた装飾枠ですが、色々と応用してみました。
バクダン その１
ちなみに、このトゲの数は幅・高さに応じて変化します。
サイズによっては稀に変なスキマができてしまう事も？？
コード
<style><!--
.bakudan1{
border:30px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="%23ff4444" stroke-width="5" fill="%23ffff44"><path d="M 7 7 L 30 20,45 3,60 20,83 7,70 30,87 45,70 60,83 83,60 70,45 87,30 70,7 83,20 60,3 45,20 30 Z"/></svg>') 30 fill/30px round;
}
--></style>
<div class="bakudan1">バクダン その１<br /><br />ちなみに、このトゲの数は幅・高さに応じて変化します。<br />サイズによっては稀に変なスキマができてしまう事も？？</div>
コードをHTML内にコピー＆ペーストし、赤太字部分を書き換える事で使用できます。
バクダン その２
コード
<style><!--
.bakudan2{
border:30px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="%23ff4444" stroke-width="5" fill="%23ffff44"><path d="M 3 30 Q 25 25,30 3 Q 45 30,60 3 Q 65 25,87 30 Q 60 45,87 60 Q 65 65,60 87 Q 45 60,30 87 Q 25 65,3 60 Q 30 45,3 30 Z"/></svg>') 30 fill/30px round;
}
--></style>
<div class="bakudan2">バクダン その２<br /><br />外側はトゲトゲのまま、内側をベジェ曲線にしてみました。<br />うん、トゲトゲしいですねｗ</div>
コードをHTML内にコピー＆ペーストし、赤太字部分を書き換える事で使用できます。
雲型の枠 その４
circleを複数用意するのではなく、pathでAを使って描いてみました。
Aも、もうひとつ分かりにくかったですが、ちょっと分かってきたかも？
これも、この「もくもく感」が強い方を好まれる場合と弱い方を好まれる場合があるようで、調整できるようなツールを作ろうかな、とか考えたり。
コード
<style><!--
.mokumoku4{
border:35px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewbox="0 0 120 120" stroke="%23888888" stroke-width="4" fill="%23eeeeee"><path d="M 33 60 A 27 27 180 1 1 60 33 A 27 27 270 1 1 87 60 A 27 27 0 1 1 60 87 A 27 27 90 1 1 27 60"></path></svg>') 35 fill/35px round;
padding:10px;
}
--></style>
<div class="mokumoku4">雲型の枠 その４<br /><br />circleを複数用意するのではなく、pathでAを使って描いてみました。<br />Aも、もうひとつ分かりにくかったですが、ちょっと分かってきたかも？<br />これも、この「もくもく感」が強い方を好まれる場合と弱い方を好まれる場合があるようで、調整できるようなツールを作ろうかな、とか考えたり。</div>
コードをHTML内にコピー＆ペーストし、赤太字部分を書き換える事で使用できます。
その他の調整について
「バクダン その１」のコードを例にとって説明します。
コード
<style><!--
.bakudan1{
border:30px solid transparent;
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="%23ff4444" stroke-width="5" fill="%23ffff44"><path d="M 7 7 L 30 20,45 3,60 20,83 7,70 30,87 45,70 60,83 83,60 70,45 87,30 70,7 83,20 60,3 45,20 30 Z"/></svg>') 30 fill/30px round;
}
--></style>
<div class="bakudan1">バクダン その１<br /><br />ちなみに、このトゲの数は幅・高さに応じて変化します。<br />サイズによっては稀に変なスキマができてしまう事も？？</div>
stroke="%23ff4444"と書かれているところが「フチどりの色」を指定しています。
「%23」は「#」を置き換えたもので、この場合「#ff4444」の色となり、こういう色を指定している事になります。
※なお、stroke="none"とすると、「フチどり無し」にする事ができます。
fill="%23ffff44"は枠の中の色を指定しています。
あとstroke-width="5"ですが、これが「フチどりの太さ」を指定しているところで、例えば「stroke-width="1"」にすると細くなります。
これらの項目は「バクダン その１」「〃 その２」「雲型の枠 その４」のいずれも同様に、それぞれ変更が効きます。
あとがき
他に、「display:inline-block;」や「width:300px;」などの指定を入れてサイズ調整するという手もあります。
border-image に 「round」を指定している事で「辺の部分は繰り返しつつ、うまく収まるように自動調整される」事で、幅・高さによってトゲトゲやモクモクの数が変化するのが面白いところ^^
あとは…もうちょっとカッコよく作れるセンスが欲しいですｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
