html canvas 阅读,HTML5/Canvas倾斜设备来阅读秘密信息

CSS

语言：

CSSSCSS

确定

/*IMPORTS*/

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:400,400i,500|Lobster:400|Source+Code+Pro:400";

/*MAIN*/

html,

body {

margin: 0px;

padding: 0px;

}

body {

padding: 45px;

}

* {

box-sizing: border-box;

font-family: 'Roboto';

font-weight: 400;

}

/*HEADERS AND TEXT*/

h1,

h2,

h3 {

margin: 10px 0px 10px 0px;

font-family: 'Open Sans';

font-weight: 300;

}

h1 {

font-weight: 400;

font-family: 'Lobster';

font-size: 45px;

letter-spacing: 3px;

color: crimson;

border-bottom: 1px dashed crimson;

}

h2 {

font-size: 30px;

letter-spacing: 2px;

}

h3 {

font-size: 25px;

letter-spacing: 1px;

}

p {

color: dimgrey;

}

code {

font-family: 'Source Code Pro';

color: black;

background: #ededed;

padding: 0px 5px 0px 5px;

}

pre {

padding: 5px;

overflow: auto;

background: #ededed;

}

pre code {

padding: 0px;

}

/*INPUT METHODS*/

button,

.btn {

padding: 15px;

margin: 10px 10px 10px 0;

border: 0px solid dimgrey;

background: dimgrey;

color: whitesmoke;

outline: none;

transition: all 0.25s, transform 0.1s;

}

button:hover,

.btn:hover {

background: crimson;

color: whitesmoke;

}

button:active,

.btn:active {

background: crimson;

transform: scale(0.8);

}

input[type='text'],

input[type='number'],

select {

padding: 15px;

margin: 10px 10px 10px 0px;

border: 0px solid dimgrey;

background: dimgrey;

color: whitesmoke;

outline: none;

transition: all 0.25s;

}

input[type='text']:hover,

input[type='number']:hover,

select:hover {

background: grey;

}

input[type='text']:focus,

input[type='number']:focus,

select:focus {

background: crimson;

color: whitesmoke;

}

input[type='text']:focus::-webkit-input-placeholder,

input[type='number']:focus::-webkit-input-placeholder,

select:focus::-webkit-input-placeholder {

color: whitesmoke;

}

input[type='text']:focus::-moz-placeholder,

input[type='number']:focus::-moz-placeholder,

select:focus::-moz-placeholder {

color: whitesmoke;

}

input[type='text']:focus:-ms-input-placeholder,

input[type='number']:focus:-ms-input-placeholder,

select:focus:-ms-input-placeholder {

color: whitesmoke;

}

input[type='text']:focus:-moz-placeholder,

input[type='number']:focus:-moz-placeholder,

select:focus:-moz-placeholder {

color: whitesmoke;

}

a {

color: crimson;

text-decoration: none;

font-weight: 500;

}

a:hover {

border-bottom: 1px solid crimson;

border-top: 1px solid crimson;

}

/*MISC*/

.inline {

display: inline-block;

}

.block {

display: block;

}

.hidden {

display: none;

}

/*SCROLLBAR*/

::-webkit-scrollbar {

width: 8px;

height: 8px;

}

::-webkit-scrollbar-button {

width: 0px;

height: 0px;

}

::-webkit-scrollbar-thumb {

background: crimson;

border-radius: 0px;

}

::-webkit-scrollbar-thumb:hover {

background: #d31339;

}

::-webkit-scrollbar-thumb:active {

box-shadow: inset 0px 0px 5px #67091c;

}

::-webkit-scrollbar-track {

background: lightgrey;

border: 0px none darkgrey;

border-radius: 0px;

box-shadow: inset 0px 0px 5px dimgrey;

}

::-webkit-scrollbar-track:hover {

background: lightgrey;

}

::-webkit-scrollbar-track:active {

box-shadow: inset 0px 0px 8px dimgrey;

}

::-webkit-scrollbar-corner {

background: transparent;

}

/*MEDIA*/

@media only screen and (max-width: 720px) {

body {

padding: 15px;

}

}

canvas#tilt {

width: 100%;

min-width: 200px;

max-width: 500px;

}

.col-wrapper .col2 {

width: 50%;

overflow: auto;

float: left;

}

.col-wrapper .col2:nth-child(even) {

padding-left: 1em;

}

@media only screen and (max-width: 720px) {

.col-wrapper .col2 {

width: 100%;

display: block;

box-sizing: border-box;

clear: both;

}

.col-wrapper .col2:nth-child(even) {

padding-left: 0;

}

}