今回のお題は,
サンプル1 CSS3: Lamp with switch
見える要素がない<body>要素の記述
今回,<body>
要素には,type
属性が"checkbox"の<input>
要素class
属性"check")visibility
プロパティをhidden
にして隠す<label>
要素のfor
属性に<input>
要素のid
属性値<script>
要素で-prefix-freeを読み込んである
コード1 <body>要素には見える要素がない
<head>要素
<style>
.check {
visibility: hidden;
}
</style>
<script src="lib/prefixfree.min.js"></script>
<body>要素
<div class="container">
<input type="checkbox" id="status" name="check" class="check" />
<label for="status" class="button"><div><!--button--></div></label>
<div class="lamp">
<div class="light"><!--light--></div>
</div>
</div>
消えている電灯を静的に表現する
まず,<div>
要素class
属性"lamp")background-image
プロパティには,linear-gradient()
関数を3つ定めた。ところが,background-size
プロパティ)background-position
)
body {
background: #2f323c;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
}
.lamp {
position: relative;
margin: -19px auto;
width: 0.7rem;
height: 10rem;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
background-repeat: no-repeat;
background-size: 0.15rem 8rem,
0.4rem 0.8rem,
0.7rem 2rem;
background-position: 50% 0,
0.19rem 8rem,
0 8.8rem;
}
消えている電灯は<div>
要素class
属性"lamp")::before
擬似要素で加えるbox-shadow
プロパティで内側inset
)
.lamp::before {
content: '';
position: absolute;
left: -1.65rem;
bottom: -4rem;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: rgba(255,255, 255, 0.03);
box-shadow: inset 2px -2px 10px rgba(255, 255, 255, 0.07);
}
電極の細長い部分は,<div>
要素class
属性"light")::before
擬似要素で加えた
.light {
position: absolute;
top: 10.05rem;
left: 0.25rem;
height: 1.5rem;
border-right: 0.2rem solid rgba(255, 255, 255, 0.05);
}
.light::before {
position: absolute;
box-sizing: border-box;
content: '';
top: 1.5rem;
left: -0.35rem;
width: 0.9rem;
height: 0.9rem;
border-radius: 50%;
border: 0.2rem solid rgba(255, 255, 255, 0.05);
}
コード2 消えている電灯の静的なスタイル
body {
background: #2f323c;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
}
.lamp {
position: relative;
margin: -19px auto;
width: 0.7rem;
height: 10rem;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
background-repeat: no-repeat;
background-size: 0.15rem 8rem,
0.4rem 0.8rem,
0.7rem 2rem;
background-position: 50% 0,
0.19rem 8rem,
0 8.8rem;
}
.lamp::before {
content: '';
position: absolute;
left: -1.65rem;
bottom: -4rem;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: rgba(255,255, 255, 0.03);
box-shadow: inset 2px -2px 10px rgba(255, 255, 255, 0.07);
}
.light {
position: absolute;
top: 10.05rem;
left: 0.25rem;
height: 1.5rem;
border-right: 0.2rem solid rgba(255, 255, 255, 0.05);
}
.light::before {
position: absolute;
box-sizing: border-box;
content: '';
top: 1.5rem;
left: -0.35rem;
width: 0.9rem;
height: 0.9rem;
border-radius: 50%;
border: 0.2rem solid rgba(255, 255, 255, 0.05);
}
.check {
visibility: hidden;
}