【CSS】うろこ模様の背景【小ネタ】
どうも！LSSです！！
なんとなく「作れるかな？」と思いつきでやってみました。
CSSで「うろこ」のような模様を、背景画像用に描画してみたものとなります。
需要があるかどうかは知らないｗ
うろこ模様の背景
うろこ模様の背景
コード
<div style="
width: 300px;
height: 400px;
border: 1px solid black;
padding: 0.5em;
font-size: 30px;
background-image:
radial-gradient(circle 25px at 0px 0px,transparent 50%,#ddddff 100%,transparent 100%)
,radial-gradient(circle 25px at 50px 0px,transparent 50%,#ddddff 100%,transparent 100%)
,radial-gradient(circle 25px at 25px 0px,transparent 50%,#ddddff 100%,transparent 100%);
background-size: 50px 50px;
background-position: 0px 0px,0px 0px,0px 25px;
">
うろこ模様の背景
</div>
赤文字部分が、うろこ模様を作っている部分となります。
解説
縦横50pxの枠（background-size: 50px 50px;）に、radial-gradientで３つ円弧を描き、それを重ねて表示しています。
まず、ひとつめのradial-gradientはこんな感じ。
左上（at 0px 0px）を中心にした、半径25ピクセルの円弧（circle 25px）です。
ひとつめだけのサンプルコード
<div style="width: 50px; height: 50px; border: 1px solid black;
background-image: radial-gradient(circle 25px at 0px 0px,transparent 50%,#ddddff 100%,transparent 100%);
background-size: 50px 50px;
background-position: 0px 0px;
"> </div>
ふたつめはこう。
右上（at 50px 0px）を中心にした、半径25ピクセルの円弧（circle 25px）です。
ふたつめだけのサンプルコード
<div style="width: 50px; height: 50px; border: 1px solid black;
background-image: radial-gradient(circle 25px at 50px 0px,transparent 50%,#ddddff 100%,transparent 100%);
background-size: 50px 50px;
background-position: 0px 0px;
"> </div>
最後、みっつめはこう。
横座標は中心、縦座標は上辺（at 25px 0px）を中心とした、半径25ピクセルの円弧（circle 25px）です。
ただし、みっつめだけは、background-position: 0px 25px;で表示開始位置を「下に25ピクセル」ずらしています。
みっつめだけのサンプルコード
<div style="width: 50px; height: 50px; border: 1px solid black;
background-image: radial-gradient(circle 25px at 25px 0px,transparent 50%,#ddddff 100%,transparent 100%);
background-size: 50px 50px;
background-position: 0px 25px;
"> </div>
で、その３つを重ねるのに
background-image:
radial-gradient(circle 25px at 0px 0px,transparent 50%,#ddddff 100%,transparent 100%)
,radial-gradient(circle 25px at 50px 0px,transparent 50%,#ddddff 100%,transparent 100%)
,radial-gradient(circle 25px at 25px 0px,transparent 50%,#ddddff 100%,transparent 100%);
カンマ区切りで、３つの radial-gradient を続けて書き、background-imageプロパティに設定しています。
また、みっつめだけは表示開始位置をずらしているので、
background-position: 0px 0px,0px 0px,0px 25px;
こちらも、カンマ区切りで３つのradial-gradientそれぞれの開始位置を指定しています。
あとがき
なんとなく思いつきで挑戦してみましたが、とりあえず出来ましたね^^
同じように「横半分ずらして、縦は交互に並ぶ」タイプの模様「レンガ模様」も、作れるのかもです。
なお、コード中で「25px」「50px」となっているところを軒並み、書き換える事でうろこの大きさを変える事ができます。
例えば25pxを15pxに、50pxを30pxにすると、
うろこ模様の背景
<div style="width: 300px; height: 400px; border: 1px solid black; padding: 0.5em; font-size: 30px;
background-image:
radial-gradient(circle 15px at 0px 0px,transparent 50%,#ddddff 100%,transparent 100%)
,radial-gradient(circle 15px at 30px 0px,transparent 50%,#ddddff 100%,transparent 100%)
,radial-gradient(circle 15px at 15px 0px,transparent 50%,#ddddff 100%,transparent 100%);
background-size: 30px 30px;
background-position: 0px 0px,0px 0px,0px 15px;
">うろこ模様の背景</div>
こうなります。
これ以上、小さくすると、うろこなんだか斜めチェック柄なんだか分からなくなりますがｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
追記！
iPhoneでは見られないようなので、ちょっとだけコードを書き換えました。
うろこ模様の背景
<div style="width: 300px; height: 400px; border: 1px solid black; padding: 0.5em; font-size: 30px;
background-image:
radial-gradient(circle 25px at 0% 0%,#ddddff00 50%,#ddddff 99%,transparent 100%)
,radial-gradient(circle 25px at 100% 0%,#ddddff00 50%,#ddddff 99%,transparent 100%)
,radial-gradient(circle 25px at 50% 0%,#ddddff00 50%,#ddddff 99%,transparent 100%);
background-size: 50px 50px; background-position: 0px 0px,0px 0px,0px 25px;">うろこ模様の背景</div>
赤文字部分が修正箇所になります。
はたしてこれで見られるようになるのか…自分では確認できませんがｗ
