76 lines
1.3 KiB
CSS
76 lines
1.3 KiB
CSS
|
body{
|
||
|
|
margin:0;
|
||
|
|
text-align:center;
|
||
|
|
font-family: Verdana;
|
||
|
|
background:#f5f5f5;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
width:90%;
|
||
|
|
margin:0 auto;
|
||
|
|
}
|
||
|
|
input[type="radio"] {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
width:23%;
|
||
|
|
float:left;
|
||
|
|
text-align:center;
|
||
|
|
background:#ffffff;
|
||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||
|
|
color:#222222;
|
||
|
|
padding:0.5%;
|
||
|
|
margin:0.5%;
|
||
|
|
margin-bottom:30px;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
input[type="radio"][id="blue"]:checked + label {
|
||
|
|
background:#6666ff;
|
||
|
|
}
|
||
|
|
input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
|
||
|
|
width:0;
|
||
|
|
height:0;
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
input[type="radio"][id="red"]:checked + label {
|
||
|
|
background:#ff4466;
|
||
|
|
}
|
||
|
|
input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
|
||
|
|
width:0;
|
||
|
|
height:0;
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
input[type="radio"][id="green"]:checked + label {
|
||
|
|
background:#66dd99;
|
||
|
|
}
|
||
|
|
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
|
||
|
|
width:0;
|
||
|
|
height:0;
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tile {
|
||
|
|
width:23%;
|
||
|
|
height:100px;
|
||
|
|
float:left;
|
||
|
|
transition:all 1s;
|
||
|
|
margin:0.5%;
|
||
|
|
padding:0.5%;
|
||
|
|
}
|
||
|
|
.green {
|
||
|
|
background:#66dd99;
|
||
|
|
}
|
||
|
|
.blue {
|
||
|
|
background:#6666ff;
|
||
|
|
}
|
||
|
|
.red {
|
||
|
|
background:#ff4466;
|
||
|
|
}
|