Difference between revisions of "Team:SVCE Chennai/CSS"
Abrahamrkj (Talk | contribs) (Blanked the page) |
Abrahamrkj (Talk | contribs) |
||
Line 1: | Line 1: | ||
+ | body { | ||
+ | font-family: monospace; | ||
+ | font-size: 18px; | ||
+ | background: #111; | ||
+ | color: #666; | ||
+ | margin: 0; | ||
+ | } | ||
+ | img { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | input[type=checkbox] { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | label { | ||
+ | display: inline-block; | ||
+ | margin-right: 1em; | ||
+ | padding: 0.4em 0; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | button { | ||
+ | border: 10px solid #00FFAA; | ||
+ | font-family: monospace; | ||
+ | position: absolute; | ||
+ | line-height: 60px; | ||
+ | text-align: right; | ||
+ | padding: 0 1.2em; | ||
+ | background: #444; | ||
+ | font-size: 24px; | ||
+ | cursor: pointer; | ||
+ | display: block; | ||
+ | outline: none; | ||
+ | height: 80px; | ||
+ | width: 80%; | ||
+ | top: 260px; | ||
+ | margin: 0; | ||
+ | left: 10%; | ||
+ | } | ||
+ | |||
+ | button:hover { | ||
+ | background: #00FFAA; | ||
+ | } | ||
+ | |||
+ | input[type=checkbox] + label:before { | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | background: #444; | ||
+ | margin-right: 8px; | ||
+ | content: ""; | ||
+ | height: 16px; | ||
+ | width: 16px; | ||
+ | top: 1px; | ||
+ | } | ||
+ | |||
+ | input[type=checkbox]:checked + label:before { | ||
+ | background: #00FFAA; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | position: relative; | ||
+ | max-width: 600px; | ||
+ | margin: 0 auto; | ||
+ | padding: 5%; | ||
+ | } | ||
+ | |||
+ | .scene { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .fill { | ||
+ | position: absolute; | ||
+ | bottom: 5%; | ||
+ | right: 5%; | ||
+ | left: 5%; | ||
+ | top: 5%; | ||
+ | } | ||
+ | |||
+ | .expand-width { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .border { | ||
+ | border: 2px dashed #00FFAA; | ||
+ | } | ||
+ | |||
+ | .aspect { | ||
+ | opacity: 0.2; | ||
+ | } | ||
+ | |||
+ | .layer:nth-child(1) { | ||
+ | opacity: 0.15; | ||
+ | } | ||
+ | .layer:nth-child(1) button { | ||
+ | -webkit-transform: rotate(150deg); | ||
+ | } | ||
+ | |||
+ | .layer:nth-child(2) { | ||
+ | opacity: 0.30; | ||
+ | } | ||
+ | .layer:nth-child(2) button { | ||
+ | -webkit-transform: rotate(120deg); | ||
+ | } | ||
+ | |||
+ | .layer:nth-child(3) { | ||
+ | opacity: 0.45; | ||
+ | } | ||
+ | .layer:nth-child(3) button { | ||
+ | -webkit-transform: rotate(90deg); | ||
+ | } | ||
+ | |||
+ | .layer:nth-child(4) { | ||
+ | opacity: 0.60; | ||
+ | } | ||
+ | .layer:nth-child(4) button { | ||
+ | -webkit-transform: rotate(60deg); | ||
+ | } | ||
+ | |||
+ | .layer:nth-child(5) { | ||
+ | opacity: 0.75; | ||
+ | } | ||
+ | .layer:nth-child(5) button { | ||
+ | -webkit-transform: rotate(30deg); | ||
+ | } | ||
+ | |||
+ | .layer:nth-child(6) { | ||
+ | opacity: 0.90; | ||
+ | } | ||
+ | .layer:nth-child(6) button { | ||
+ | } |
Revision as of 20:43, 8 September 2015
body {
font-family: monospace; font-size: 18px; background: #111; color: #666; margin: 0;
}
img {
display: block; width: 100%;
}
input[type=checkbox] {
display: none;
}
label {
display: inline-block; margin-right: 1em; padding: 0.4em 0; cursor: pointer;
}
button {
border: 10px solid #00FFAA; font-family: monospace; position: absolute; line-height: 60px; text-align: right; padding: 0 1.2em; background: #444; font-size: 24px; cursor: pointer; display: block; outline: none; height: 80px; width: 80%; top: 260px; margin: 0; left: 10%;
}
button:hover {
background: #00FFAA;
}
input[type=checkbox] + label:before {
display: inline-block; position: relative; background: #444; margin-right: 8px; content: ""; height: 16px; width: 16px; top: 1px;
}
input[type=checkbox]:checked + label:before {
background: #00FFAA;
}
.container {
position: relative; max-width: 600px; margin: 0 auto; padding: 5%;
}
.scene {
padding: 0; margin: 0;
}
.fill {
position: absolute; bottom: 5%; right: 5%; left: 5%; top: 5%;
}
.expand-width {
width: 100%;
}
.border {
border: 2px dashed #00FFAA;
}
.aspect {
opacity: 0.2;
}
.layer:nth-child(1) {
opacity: 0.15;
} .layer:nth-child(1) button {
-webkit-transform: rotate(150deg);
}
.layer:nth-child(2) {
opacity: 0.30;
} .layer:nth-child(2) button {
-webkit-transform: rotate(120deg);
}
.layer:nth-child(3) {
opacity: 0.45;
} .layer:nth-child(3) button {
-webkit-transform: rotate(90deg);
}
.layer:nth-child(4) {
opacity: 0.60;
} .layer:nth-child(4) button {
-webkit-transform: rotate(60deg);
}
.layer:nth-child(5) {
opacity: 0.75;
} .layer:nth-child(5) button {
-webkit-transform: rotate(30deg);
}
.layer:nth-child(6) {
opacity: 0.90;
} .layer:nth-child(6) button { }