CSS3を使って時計を描画する方法です。
まず、最初に動作はFireFoxとGoogle Chromeしか確認していません。
丸の描画
まず、最初に時計の丸を表示するために、border-radiusというスタイルを使用します。
これは、角丸を作ったりするときに使われるスタイルで、
今回は角丸が、描画するものの半分以上の大きさになるように設定し、円になるようにしました。
例)
スタイルを適用する要素のwidth、heightが200pxならborder-radiusのpxを100にします。
border-radius:100px;
線などの要素の傾き
次に、時針・分針などの斜め線の描画の方法ですが、
border-transformのrotateを使用します。
ここには、傾ける分の数値を0～360の間で指定します。
例)
適用する要素を30度傾ける場合は、border-transformのrotate(30deg)を指定します。
border-transform:rotate(30deg);
時計の円盤のグラデーション
次に、グラデーションです。
この時計のサンプルでは、右上から左下にかけてスポットライトを当てて見えるように
白→緑→黒というようにグラデーションをつけています。
グラデーションは、つける要素のbackgroundにgradientを指定します。
例)
適応する要素のbackgroundに下記のように指定します。
background:-webkit-gradient(linear,right top,left bottom,from(#FFFFFF),color-stop(0.6, green),to(#000000));
これは、Google Chrome用の書き方なので、他のブラウザは個人で調べてください。
※サンプルソースは、FireFox,GoogleChrome用の書き方で書いています。
ドロップシャドウ
最後にドロップシャドウです。
ドロップシャドウは、グラデーションと一緒に使うことで、スポットライトが
当たっているように見せています。
ドロップシャドウは、つけたい要素にbox-shadowスタイルを適用します。
box-shadow:20px 20px 100px black;
1つ目が左右、2つ目が上下、3つ目がぼかす範囲、4つ目が影の色を指定します。
例)
右上からスポットライトを当てたように影をつける場合
box-shadow:20px 20px 100px black;
のように指定することで、影がつきます。
サンプルソース
clock.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSSで時計</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
<div id="clock">
<div id="outline">
<div id="light">
</div>
<div id="center">
</div>
<div id="hour">
</div>
<div id="minute">
</div>
<div id="one" class="scale1">
</div >
<div id="two" class="scale1">
</div >
<div id="three" class="scale2">
</div >
<div id="four" class="scale1">
</div >
<div id="five" class="scale1">
</div >
<div id="six" class="scale2">
</div >
<div id="seven" class="scale1">
</div >
<div id="eight" class="scale1">
</div >
<div id="nine" class="scale2">
</div >
<div id="ten" class="scale1">
</div >
<div id="eleven" class="scale1">
</div >
<div id="twelve" class="scale2">
</div >
</div>
</div>
</body>
</html>
common.css
#clock{
margin: 10px;
position: absolute;
}
#outline{
border-radius:100px 100px 100px 100px;
-moz-border-radius:100px 100px 100px 100px;
-webkit-border-radius:100px 100px 100px 100px;
border: 2px solid #333333;
width: 200px;
height: 200px;
position: relative;
background:gradient(linear, left top, left bottom, from(#FFFFFF), to(#000000));
background:-moz-linear-gradient(right top , #FFFFFF, green 60%, #000000 155%) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, right top, left bottom, from(#FFFFFF) ,color-stop(0.6, green), to(#000000));
}
#light{
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
box-shadow: 20px 20px 100px black;
-moz-box-shadow: 20px 20px 100px black;
-webkit-box-shadow: 20px 20px 100px black;
border-radius: 100px 100px 100px 100px;
-moz-border-radius: 100px 100px 100px 100px;
-webkit-border-radius:100px 100px 100px 100px;
height: 200px;
width: 200px;
opacity: 0.5;
position: absolute;
}
#center{
border-radius:2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border: 2px solid #333333;
width: 2px;
height: 2px;
position: absolute;
left: 98px;
top: 98px;
z-index: 100;
}
#hour{
border: 2px solid blue;
width: 40px;
heigh: 2px;
transform: rotate(125deg);
-moz-transform: rotate(125deg);
-webkit-transform: rotate(125deg);
-o-transform: rotate(125deg);
left: 93px;
top: 80px;
position: absolute;
z-index: 15;
}
#minute{
border: 2px solid red;
width: 60px;
heigh: 2px;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
left: 102px;
top: 99px;
position: absolute;
z-index: 15;
}
div.scale1{
border: 2px solid black;
width: 6px;
height: 0px;
}
div.scale2{
border: 2px solid black;
width: 10px;
height: 0px;
}
#one{
position: absolute;
z-index: 15;
left: 150px;
top: 19px;
transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
}
#two{
position: absolute;
z-index: 15;
left: 182px;
top: 58px;
transform: rotate(150deg);
-moz-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
-o-transform: rotate(150deg);
}
#three{
position: absolute;
z-index: 15;
left: 186px;
top: 99px;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
#four{
position: absolute;
z-index: 15;
left: 182px;
top: 138px;
transform: rotate(210deg);
-moz-transform: rotate(210deg);
-webkit-transform: rotate(210deg);
-o-transform: rotate(210deg);
}
#five{
position: absolute;
z-index: 15;
left: 150px;
top: 178px;
transform: rotate(240deg);
-moz-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-o-transform: rotate(240deg);
}
#six{
position: absolute;
z-index: 15;
left: 94px;
top: 191px;
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
#seven{
position: absolute;
z-index: 15;
left: 41px;
top: 178px;
transform: rotate(300deg);
-moz-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
-o-transform: rotate(300deg);}
#eight{
position: absolute;
z-index: 15;
left: 8px;
top: 138px;
transform: rotate(330deg);
-moz-transform: rotate(330deg);
-webkit-transform: rotate(330deg);
-o-transform: rotate(330deg);
}
#nine{
position: absolute;
z-index: 15;
left: 0px;
top: 99px;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
#ten{
position: absolute;
z-index: 15;
left: 7px;
top: 58px;
transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#eleven{
position: absolute;
z-index: 15;
left: 40px;
top: 19px;
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#twelve{
position: absolute;
z-index: 15;
left: 94px;
top: 4px;
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);}
サンプルページ
サンプルダウンロード
ちなみに、IE9 Platform Preview版で見るとこのような感じになります。
※Platform Previewのバージョンは画像にあるダイアログに記載されています。
posted by winofsql at 15:23|
Comment(0)
|
制作
|
|
I'Agreeにチェックを入れ、Installをクリックします。
クリックするとしたの画像のようにインストールが始まります。
インストール中
インストールが完了すると、システムを再起動しますか？と聞かれるので
PCを再起動します。
これで、インストールは完了です。
1限目
テーブルに対しての作業
①DB
②列 ⇒ 行
まず、列定義→行をどうするか→データをどうするか
③データセット
④削除
⑤セルへのアクセス
○参考ページ
1限目
Java＋Swing バッチビルドキットのダウンロード
1限目
納品,納期について
VB.netでLboxGridを使ってOracleに接続
接続方法は
