9.3.1 opacityプロパティ

[作成] opacity.html
[フォルダ] webpage/ch09

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>opacityプロパティ</title>
		<style>
			.opacity {
				background-color: #0080c0;
				height: 100px;
			}
			.opacity:hover {
				opacity: 0.6;
			}
		</style>
	</head>
	<body>
		<div class="opacity"><p>マウスカーソルを重ねると半透明になります</p></div>
	</body>
</html>

9.3.2 border-radiusプロパティ

[作成] radius.html
[フォルダ] webpage/ch09

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>border-radiusプロパティ</title>
		<style>
			.radius {
				background-color: #fdc72f;
				height: 100px;
				width: 400px;
				padding: 20px;
				border-radius: 50px;
			}
			.img-radius {
				background-image: url(../img/koneko02.jpg);
				width: 140px;
				height: 140px;
				border-radius: 70px;
			}
		</style>
	</head>
	<body>
		<div class="radius">四隅を半径50pxで丸くしています</div>
		<p>画像も丸くできます</p>
		<div class="img-radius"></div>
	</body>
</html>

9.3.3 box-shadowプロパティ

[作成] shadow.html
[フォルダ] webpage/ch09

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>box-shadowプロパティ</title>
		<style>
			.shadow {
				background-color: #fff;
				border: 1px solid #ddd;
				padding: 8px;
				width: 400px;
				height: 242px;
				box-shadow: 5px 5px 5px #ddd;
			}
		</style>
	</head>
	<body>
		<div class="shadow">
			<img src="../img/img03.jpg" alt="猫" width="400px">
		</div>
	</body>
</html>

9.3.4 animationプロパティ

[作成] animation.html
[フォルダ] webpage/ch09

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>animationプロパティ</title>
		<style>
			.img-slide {
				width: 980px;
				margin:50px auto;
				position: relative;
			}
			.img-slide img {
				position: absolute;
				background-color: #fff;
				box-shadow: 5px 5px 5px #ddd;
				border: 1px solid #ddd;
				padding: 8px;
			}
			.img1 {
				-webkit-animation: slide 16s ease 0s infinite normal
			}
			.img2 {
				-webkit-animation: slide 16s ease -4s infinite normal
			}
			.img3 {
				-webkit-animation: slide 16s ease -8s infinite normal
			}
			.img4 {
				-webkit-animation: slide 16s ease -12s infinite normal
			}
			@-webkit-keyframes slide {
				0% { top: 20px; left: 200px; width: 480px; z-index: 4; }
				20% { top: 20px; left: 200px; width: 480px; z-index: 4; }
				25% { top: 50px; left: 480px; width: 400px; z-index: 3; }
				45% { top: 50px; left: 480px; width: 400px; z-index: 3; }
				50% { top: 50px; left: 200px; width: 400px; z-index: 1; }
				70% { top: 50px; left: 200px; width: 400px; z-index: 1; }
				75% { top: 50px; left: 0px; width: 400px; z-index: 3; }
				95% { top: 50px; left: 0px; width: 400px; z-index: 3; }
				100% { top: 20px; left: 200px; width: 480px; z-index: 4; }
			}
		</style>
	</head>
	<body>
		<div class="img-slide">
			<img src="../img/koneko01.jpg" alt="" class="img1">
			<img src="../img/koinu01.jpg" alt="" class="img2">
			<img src="../img/img04.jpg" alt="" class="img3">
			<img src="../img/img03.jpg" alt="" class="img4">
		</div>
	</body>
</html>