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">マウスカーソルを重ねると半透明になります</div> </body> </html>
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>
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>
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>