上の画像は以下のソースから
[html]
<html>
<head>
<style type="text/css">
.rubik
{
width: 76px;
padding: 2px;
}
.con
{
border: 1px solid #000;
background-color: #000;
}
.coff
{
border: 1px solid #000;
background-color: #fff;
}
.corner
{
margin: 1px;
float: left;
width: 3px;
height: 3px;
}
.col
{
margin: 1px;
width: 18px;
height: 1px;
float: left;
}
.row
{
margin: 1px;
width: 1px;
height: 18px;
float:left;
}
.front
{
margin: 1px;
width: 18px;
height: 18px;
float:left;
}
</style>
</head>
<body>
<div class="rubik">
<div class="corner"></div>
<div class="col coff"></div>
<div class="col coff"></div>
<div class="col con"></div>
<div class="corner"></div>
<div class="row coff"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="front coff"></div>
<div class="row coff"></div>
<div class="row coff"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="row coff"></div>
<div class="row con"></div>
<div class="front coff"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="row coff"></div>
<div class="corner"></div>
<div class="col coff"></div>
<div class="col coff"></div>
<div class="col coff"></div>
<div class="corner"></div>
<br style="clear:both;"/>
</div>
</body>
</html>
[/html]
大したものではありませんが、もしルービックキューブのサイトを作るとき、これを元に手を加えたいなぁ、という方がいましたらご自由にお使いください。
ちなみにGoogle Chrome、Firefox、Operaで動作を確認しました。
Internet Explorer 6だとレイアウトが崩れるようです（IE8では未確認）。
2010年1月5日火曜日
上からルービックキューブを見た図をCSSで表現
いつもスピードキューブに naitsu さんのサイト(ここなど)を参考にしているのですが、これ画像を使わずにHTML/CSSだけで表現できるんじゃないの、ということで実装。
上の画像は以下のソースから
[html]
<html>
<head>
<style type="text/css">
.rubik
{
width: 76px;
padding: 2px;
}
.con
{
border: 1px solid #000;
background-color: #000;
}
.coff
{
border: 1px solid #000;
background-color: #fff;
}
.corner
{
margin: 1px;
float: left;
width: 3px;
height: 3px;
}
.col
{
margin: 1px;
width: 18px;
height: 1px;
float: left;
}
.row
{
margin: 1px;
width: 1px;
height: 18px;
float:left;
}
.front
{
margin: 1px;
width: 18px;
height: 18px;
float:left;
}
</style>
</head>
<body>
<div class="rubik">
<div class="corner"></div>
<div class="col coff"></div>
<div class="col coff"></div>
<div class="col con"></div>
<div class="corner"></div>
<div class="row coff"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="front coff"></div>
<div class="row coff"></div>
<div class="row coff"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="row coff"></div>
<div class="row con"></div>
<div class="front coff"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="row coff"></div>
<div class="corner"></div>
<div class="col coff"></div>
<div class="col coff"></div>
<div class="col coff"></div>
<div class="corner"></div>
<br style="clear:both;"/>
</div>
</body>
</html>
[/html]
大したものではありませんが、もしルービックキューブのサイトを作るとき、これを元に手を加えたいなぁ、という方がいましたらご自由にお使いください。
ちなみにGoogle Chrome、Firefox、Operaで動作を確認しました。
Internet Explorer 6だとレイアウトが崩れるようです（IE8では未確認）。
上の画像は以下のソースから
[html]
<html>
<head>
<style type="text/css">
.rubik
{
width: 76px;
padding: 2px;
}
.con
{
border: 1px solid #000;
background-color: #000;
}
.coff
{
border: 1px solid #000;
background-color: #fff;
}
.corner
{
margin: 1px;
float: left;
width: 3px;
height: 3px;
}
.col
{
margin: 1px;
width: 18px;
height: 1px;
float: left;
}
.row
{
margin: 1px;
width: 1px;
height: 18px;
float:left;
}
.front
{
margin: 1px;
width: 18px;
height: 18px;
float:left;
}
</style>
</head>
<body>
<div class="rubik">
<div class="corner"></div>
<div class="col coff"></div>
<div class="col coff"></div>
<div class="col con"></div>
<div class="corner"></div>
<div class="row coff"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="front coff"></div>
<div class="row coff"></div>
<div class="row coff"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="row coff"></div>
<div class="row con"></div>
<div class="front coff"></div>
<div class="front con"></div>
<div class="front con"></div>
<div class="row coff"></div>
<div class="corner"></div>
<div class="col coff"></div>
<div class="col coff"></div>
<div class="col coff"></div>
<div class="corner"></div>
<br style="clear:both;"/>
</div>
</body>
</html>
[/html]
大したものではありませんが、もしルービックキューブのサイトを作るとき、これを元に手を加えたいなぁ、という方がいましたらご自由にお使いください。
ちなみにGoogle Chrome、Firefox、Operaで動作を確認しました。
Internet Explorer 6だとレイアウトが崩れるようです（IE8では未確認）。
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿