Little Strange Software

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

トップ > HTMLなど > 【CSSお絵描き】サイコロの目を描いてみよう

【CSSお絵描き】サイコロの目を描いてみよう

HTMLなど

　どうも！LSSです！！

 

CSSのbackground-image:radilgradientを駆使して、コードでサイコロの６つの目を描いてみます。

こういうのは一度作っておくと、色々使いまわせそうですね^^

 

 

１の目

 

 

コード

<style>
.sai1{
width:150px;
height:150px;
border-radius:5px;
border:1px solid black;
background-color:#ffffff;
background-image:
radial-gradient(circle at 50% 50%,#ff0000ff 19%,#ff000000 20%);
}
</style>
<div class="sai1"> </div>

 

１の目はカンタンですね。

 

width:150px;
height:150px;
border-radius:5px;
border:1px solid black;
background-color:#ffffff;

までは目とは関係のない設定（幅・高さ150px、5pxサイズの角丸、1pxの黒い枠線、枠内の背景色は#ffffffの白をベースに）を記述しており、以下他の目でもこの部分は全く同じものを使います。

 

background-image:
radial-gradient(circle at 50% 50%,#ff0000ff 19%,#ff000000 20%);

１の目は位置はど真ん中（at 50% 50%←初期値もそうなので実は書かなくてもいいｗ）、#ff0000（赤）の不透過度ffの色が中央から19%まで、そして不透過度00（完全な透明）が20%以上の部分にかかる事で、サイズ19%の赤丸を描いています。

 

この場合の「19%」というのが、枠のサイズに対する19%ではなくて、中心から見て「もっとも遠い角」までの距離の19%になる、という事をよく忘れます^^;。
３の目あたりでその影響を受ける事に^^;;;

 

 

２の目

 

 

コード

<style>
.sai2{
width:150px;
height:150px;
border-radius:5px;
border:1px solid black;
background-color:#ffffff;
background-image:
radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11%);
}
</style>
<div class="sai2"> </div>

 

radial-gradientを２つ、カンマ区切りで並べて、ひとつめは「75% 25%（要素の左上から右に要素幅の75%、下に要素高さの25%）の位置を中心とした黒い円」と、「25% 75%の位置を中心とした黒い円」を描いています。

１の目の時と同様、円の外側を完全な透明色にしているため、片方がもう一方を覆い隠す事なく２つの円が表示されています^^

 

 

３の目

 

 

コード

<style>
.sai3{
width:150px;
height:150px;
border-radius:5px;
border:1px solid black;
background-color:#ffffff;
background-image:
radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 50% 50%,#000000ff 15%,#00000000 16%)
,radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11%);
}
</style>

 

そして３の目です。

２の目の時の２つの円に加えて「50% 50%」を中心とした円を付け足せばＯＫ…と思っていたら、円のサイズが変わってしまいました^^;

で、サイズを同じぐらいのものにするために、他は10%で指定しているところをそこだけ15%にしてあわせています。

 

 

４の目

 

 

コード

<style>
.sai4{
width:150px;
height:150px;
border-radius:5px;
border:1px solid black;
background-color:#ffffff;
background-image:
radial-gradient(circle at 25% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 75% 75%,#000000ff 10%,#00000000 11%);
}
</style>
<div class="sai4"> </div>

 

３の目に比べて、４の目はカンタンでしたね。

２の目で使った「75% 25%」「25% 75%」に加えて「25% 25%」と「75% 75%」をコピペしただけです。

 

 

５の目

 

 

コード

<style>
.sai5{
width:150px;
height:150px;
border-radius:5px;
border:1px solid black;
background-color:#ffffff;
background-image:
radial-gradient(circle at 25% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 50% 50%,#000000ff 15%,#00000000 16%)
,radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 75% 75%,#000000ff 10%,#00000000 11%);
}
</style>
<div class="sai5"> </div>

 

ここまでくると、５の目もカンタンに、「４の目に３の目の中心部分をコピペするだけ」で済みました^^

 

 

６の目

 

 

コード

<style>
.sai6{
width:150px;
height:150px;
border-radius:5px;
border:1px solid black;
background-color:#ffffff;
background-image:
radial-gradient(circle at 25% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 25% 50%,#000000ff 12%,#00000000 13%)
,radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 75% 50%,#000000ff 12%,#00000000 13%)
,radial-gradient(circle at 75% 75%,#000000ff 10%,#00000000 11%);
}
</style>
<div class="sai6"> </div>

 

いよいよラスト、６の目です。

これもまた、４の目を基準に、左右それぞれ中心に配置するだけ…なのですが、ここでもやはり「もっとも遠い角までの距離」が３の目の場合とも違ってくるので、再度サイズ調整が必要となりました。

 

 

書き方は何通りか考えましたが…

background-positionやbackground-sizeを使う方法もありますが、今回は手軽そうな方法を選択しました^^

配置も事前には複雑な事も考えましたが、もうシンプルに25%単位で。

普通にそれっぽく見えてますよね？ｗ

 

この間、

little-strange.hatenablog.com

を作った時にようやく、「radial-gradientのグラデーションの大きさを指定する%は親要素サイズが対象ではない」と知ったのに既に忘れかけていましたｗ

 

%指定じゃなくpxで指定すれば、今回のように調整しなくても済んだのですが、chromeではそれでちゃんと表示されてもiPhoneで狂う、という落とし穴があったりします。

 

ともあれ、これでサイコロが完成しました！

背景色は別途、「background-color:#ffffff;」で指定しているので、ここを変更するだけで色付きサイコロやスケルトンサイコロにする事もできます^^

 

 

早速、サイコロを転がしてみよう！

 

 
 
 
 
 
 

 

 

little-strange.hatenablog.com

のサイコロに、今回作った目を当ててみました！

 

コード

<style>
@keyframes kaiten{
0%,10%{transform:rotateX(10deg) rotateY(10deg) rotateZ(0deg);}
15%,25%{transform:rotateX(10deg) rotateY(-80deg) rotateZ(0deg);}
30%,40%{transform:rotateX(-100deg) rotateY(0deg) rotateZ(-10deg);}
45%,55%{transform:rotateX(100deg) rotateY(0deg) rotateZ(10deg);}
60%,70%{transform:rotateX(10deg) rotateY(-260deg) rotateZ(0deg);}
75%,85%{transform:rotateX(10deg) rotateY(170deg) rotateZ(0deg);}
90%{transform:rotateX(370deg) rotateY(170deg) rotateZ(0deg);}
95%{transform:rotateX(370deg) rotateY(-190deg) rotateZ(0deg);}
100%{transform:rotateX(10deg) rotateY(10deg) rotateZ(360deg);}
}
.cb01{
position:relative;
transform-style:preserve-3d;
width:150px;
height:150px;
left:75px;
animation:kaiten 20s linear infinite;
}
.cb01 div{
position:absolute;
box-sizing:border-box;
width:100%;
height:100%;
border-radius:5px;
border:3px solid #ddddddc0;
background-color:#ffffff;
}
.cbs1{
background-image:
radial-gradient(circle at 50% 50%,#ff0000ff 19%,#ff000000 20%);
transform:translateZ(75px);
}
.cbs2{
background-image:
radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11%);
transform:rotateY(90deg) translateZ(75px);
}
.cbs3{
background-image:
radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 50% 50%,#000000ff 15%,#00000000 16%)
,radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11%);
transform:rotateX(90deg) translateZ(75px);
}
.cbs4{
background-image:
radial-gradient(circle at 25% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 75% 75%,#000000ff 10%,#00000000 11%);
transform:rotateX(-90deg) translateZ(75px);
}
.cbs5{
background-image:
radial-gradient(circle at 25% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 50% 50%,#000000ff 15%,#00000000 16%)
,radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 75% 75%,#000000ff 10%,#00000000 11%);
transform:rotateY(-90deg) translateZ(75px);
}
.cbs6{
background-image:
radial-gradient(circle at 25% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 25% 50%,#000000ff 12%,#00000000 13%)
,radial-gradient(circle at 25% 75%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 75% 25%,#000000ff 10%,#00000000 11%)
,radial-gradient(circle at 75% 50%,#000000ff 12%,#00000000 13%)
,radial-gradient(circle at 75% 75%,#000000ff 10%,#00000000 11%);
transform:rotateY(180deg) translateZ(75px);
}
</style>
<div class="cb01">
<div class="cbs1"> </div>
<div class="cbs2"> </div>
<div class="cbs3"> </div>
<div class="cbs4"> </div>
<div class="cbs5"> </div>
<div class="cbs6"> </div>
</div>

 

 

色付きスケルトンダイス

 

 
 
 
 
 
 

 

 

コード中の、

.cb01 div{
position:absolute;
box-sizing:border-box;
width:100%;
height:100%;
border-radius:5px;
border:3px solid #ddddddc0;
background-color:#ffffff;
}

の#ffffffを#ccffccddに変えるだけで、オシャレな（？）色付きスケルトンダイスに変身！！

この場合、#ccffccが色コードで、ddが不透過度になります。

 

 

 

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

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