Skip to content

some updates #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

some updates #2

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6c73c7c
formatting cleanup
nyov Apr 23, 2014
6874e77
javascript simplification
nyov Apr 23, 2014
ec48636
fix un-focus and firefox animation
nyov Apr 23, 2014
a248988
update gradient animation for better browser support
nyov Apr 23, 2014
6348a01
update keyframe animation for better browser support
nyov Apr 29, 2014
f660666
condense some styles
nyov Apr 30, 2014
a222ed6
fix opera animation
nyov Apr 30, 2014
3a77817
update readme
nyov Apr 30, 2014
a14eaf4
squash gradient to more resemble 'dragonfish'
nyov Apr 30, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix opera animation 
reorder styles for better legibility
  • Loading branch information
@nyov
nyov committed Apr 30, 2014
commit a222ed61c433bda2cba58a5a73f0fffc9ac8f2a2
150 changes: 80 additions & 70 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,79 @@
font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
}

/* Regular Form Styles */
form {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100%;
width: 100%;

/** http://www.colorzilla.com/gradient-editor/#242424+0,090909+100 **/
background: #212121; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #242424 0%, #090909 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#242424), color-stop(100%,#090909)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #242424 0%,#090909 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #242424 0%,#090909 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #242424 0%,#090909 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #242424 0%,#090909 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#090909',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
form label {
display: block;
padding: 10px 10px 5px 15px;
font-size: 11px;
color: #777;
}
form input {
display: block;
margin: 5px 10px 10px 15px;
background: #111;
-moz-box-shadow: 0px 0px 4px #000 inset;
-webkit-box-shadow: 0px 0px 4px #000 inset;
box-shadow: 0px 0px 4px #000 inset;
padding: 5px;
color: #444;
}
form input:not([type="submit"]) {
outline: 1px solid #333;
border: 1px solid #000;
width: 85%;
font-size: 16px;
}
form input:not([type="submit"]):focus {
outline: 1px solid #555;
color: #fff;
}
input[type="submit"] {
color: #999;
padding: 5px 10px;
float: right;
margin: 40px 0 0 0;
border: 1px solid #000;
font-weight: lighter;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

/** http://www.colorzilla.com/gradient-editor/#222222+0,111111+100 **/
background: #222222; /* Old browsers */
background: -moz-linear-gradient(45deg, #222222 0%, #111111 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#222222), color-stop(100%,#111111)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #222222 0%,#111111 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #222222 0%,#111111 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #222222 0%,#111111 100%); /* IE10+ */
background: linear-gradient(45deg, #222222 0%,#111111 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#111111',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

-moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
-webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) inset;
text-shadow: 0 1px 1px #000;
}

/*** GLOWFORM ***/

/* inactive state */
.rain,
.border {
Expand Down Expand Up @@ -150,80 +223,17 @@
-o-animation: colors 20s linear infinite;
animation: colors 20s linear infinite;
/* Add "Highlight" Texture to the Animation */
/* background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
*/
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
}

/* Regular Form Styles */
form {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100%;
width: 100%;

/** http://www.colorzilla.com/gradient-editor/#242424+0,090909+100 **/
background: #212121; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #242424 0%, #090909 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#242424), color-stop(100%,#090909)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #242424 0%,#090909 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #242424 0%,#090909 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #242424 0%,#090909 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #242424 0%,#090909 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#090909',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
form label {
display: block;
padding: 10px 10px 5px 15px;
font-size: 11px;
color: #777;
}
form input {
display: block;
margin: 5px 10px 10px 15px;
background: #111;
-moz-box-shadow: 0px 0px 4px #000 inset;
-webkit-box-shadow: 0px 0px 4px #000 inset;
box-shadow: 0px 0px 4px #000 inset;
padding: 5px;
color: #444;
@supports (-o-transition: transform) {
/* opera 12 doesn't play with the animation (v2) + transition (v1) combo,
set a fixed background color (use animation only) */
.rain.focus, .rain.focus .border {
background: #39f;
}
}
form input:not([type="submit"]) {
outline: 1px solid #333;
border: 1px solid #000;
width: 85%;
font-size: 16px;
}
form input:not([type="submit"]):focus {
outline: 1px solid #555;
color: #fff;
}
input[type="submit"] {
color: #999;
padding: 5px 10px;
float: right;
margin: 40px 0 0 0;
border: 1px solid #000;
font-weight: lighter;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

/** http://www.colorzilla.com/gradient-editor/#222222+0,111111+100 **/
background: #222222; /* Old browsers */
background: -moz-linear-gradient(45deg, #222222 0%, #111111 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#222222), color-stop(100%,#111111)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #222222 0%,#111111 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #222222 0%,#111111 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #222222 0%,#111111 100%); /* IE10+ */
background: linear-gradient(45deg, #222222 0%,#111111 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#111111',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

-moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
-webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) inset;
text-shadow: 0 1px 1px #000;
}
</style>
</head>
<body id="home">
Expand Down