WEBの勉強～HTML5/CSS3/～
こんにちは、メグルです。
今日はCSS3をやるそうです。
参考サイト
<body>
<div class="hako"></div>
</body>
</html>
.hako {
width: 200px;
height: 200px;
background-color: #8B0079;
position: absolute;
top: 30%;
left: 40%;
box-shadow: 2px 2px 2px #aaa;
border-radius: 20px;
border: 2px solid #000;
}
#000000
赤緑青
0~9 abcdef →１６進数
border-radius: 20px;
border: 2px solid #000; を追加すると、
後は、一つの角だけを指定して角丸にもできる
border-radius: 20px 30px 50px 70px;
border: 2px solid teal;
.hako {
width: 200px;
height: 100px;
background-color: #8B0079;
position: absolute;
top: 30%;
left: 40%;
box-shadow: 2px 2px 2px #aaa;
border-radius: 30px 0 0 30px;
border: 2px solid teal;
}
透かす
<div class="pic"><img src="../img/nozomi.png"></div>
.pic {
position: absolute;
top: 30%;
left: 40%;
opacity: 0.5;
}
<div class="hako">あっち</div>
<div class="hako2">こっち</div>
.hako {
text-align: center;
line-height: 60px;
width: 200px;
height: 60px;
background-color: #fff;
position: absolute;
top: 30%;
left: 40%;
font-size: 30px;
box-shadow: 2px 2px 2px #aaa;
border-radius: 30px 0 0 30px;
border: 2px solid teal;
}
.hako2 {
text-align: center;
line-height: 60px;
width: 200px;
height: 60px;
background-color:rgba(0, 128,128,0.5);
position: absolute;
top: 30%;
left: 62%;
font-size: 30px;
box-shadow: 2px 2px 2px #aaa;
border-radius: 0 30px 30px 0;
border: 2px solid teal;
}
次にグラデーション
<div class="hako3">そっち</div>
.hako3 {
position: absolute;
top: 300px;
left:300px;
border: 2px solid #eee;
background: linear-gradient(white,gray);
width: 200px;
height: 200px;
color: #fff;
}
参考サイト
自分でグラデーションを作成するのは大変なので参考サイトなどを上手く使う
検索→CSS3 グラデーション ジェネレーター
Ultimate CSS Gradient Generator - ColorZilla.com
css3 ホバーした時に画像が回転
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ | コリス
