6/18(水)授業メモ
今日は、CSS3を使ってグラデーションの設定を学びました。
★mozilla系のブラウザ用の命令
記述例 ）background:-moz-linear-gradient(top, #990, #066);
解説 ) background:-moz-linear-gradient (方向, 開始色, 終了色);
方向の種類
- top：上から下
- left：左から右
- left top：左上から右上
※ mozilla系のブラウザ には、 Mozilla Fierfox が含まれる。
★webkit系のブラウザ用の命令
記述例 ）background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
解説 ) background: -webkit-gradient(直線的, 開始位置, 終了位置, 開始色, 終了色）
※ webkit系のブラウザ とは、KHTML系レンダリングエンジン
※ webkit系のブラウザ には、GoogleChrome・ Opera・ Safari が含まれます。
例）
<!DOCTYE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 グラデーション</title>
<style>
#grad1, #grad2, #grad3, #grad4, #grad5 {
width: 300px;
height: 200px;
margin: 30px 50px;
}
#grad1 {
background: -moz-linear-gradient(top, #990, #066);
background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
}
#grad2 {
background: -moz-linear-gradient(left, #990, #066);
background: -webkit-gradient(linear, left top, right bottom, from(#990), to(#066));
}
#grad3 {
background: -moz-linear-gradient(left top, #990, #f60 50%, #066);
background: -webkit-gradient(linear, left top, right bottom, from(#990), color-stop(0.5, #f60), to(#066));
}
#grad4 {
background: -moz-linear-gradient(left top, #990, #c36 30%, #f60 50%, #000 70%, #066);
background: -webkit-gradient(linear, left top, right bottom, from(#990), color-stop(0.3, #c36), color-stop(0.5, #f60), color-stop(0.7, #000), to(#066));
}
#grad5 {
background: -moz-linear-gradient(top, rgba(60,100,50,0.5), #066);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(60,100,50,0.5)), to(#066));
}
</style>
</head>
<body>
<div id="grad1"></div>
<div id="grad2"></div>
<div id="grad3"></div>
<div id="grad4"></div>
<div id="grad5"></div>
</body>
</html>
