css3のメモです。
1.ボックスを角丸にする
#kadomaru{
width:500px;
height:100px;
margin:50px;
padding:5px;
border:7px solid #000;
-moz-border-bottom-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-radius: 5px;/*半径*/
}
2.背景を透過させる
#touka{
width:444px;
height:148px;
margin:50px;
background:url(/img/bg.gif) repeat 0 0;
border:1px solid #777777;
}
#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8,#box9,#box10,#box11{
float:left;
width:50px;
height:50px;
padding:12px;
background:#333333;
color:#ffffff;
}
#box1{
opacity:1;/*透明度0*/
}
#box2{
opacity:.9;/*透明度10%*/
}
/*---省略---*/
#box9{
opacity:.2;/*透明度80%*/
}
#box10{
opacity:.1;/*透明度90%*/
}
#box11{
opacity:0;/*透明度100%*/
}
3.hover時にテキストにシャドウ
a{
font-size:20px;
padding:10px;
color:#000000;
font-weight:bold;
text-decoration:none;
}
a:hover{
text-shadow:#ff0006 1px 1px 1px;
}
4.画像を回転させる
img{
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
}
■こういう記事もありました。
http://jp.techcrunch.com/archives/20100207sketchpad-in-html5-why-flash-is-no-longer-relavent/
もう意味がわかりません・・・
