diff --git a/humane-themes/bigbox.css b/humane-themes/bigbox.css new file mode 100644 index 0000000..c87e679 --- /dev/null +++ b/humane-themes/bigbox.css @@ -0,0 +1,92 @@ +@import 'http://fonts.googleapis.com/css?family=Ubuntu&v2'; + +/* recommended base settings */ +html, body { height: 100%; } +.humane { + filter : progid:DXImageTransform.Microsoft.alpha(opacity=100); + -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=100)"; + position : fixed; + _position : absolute; /* ie6 */ + -moz-transition : all .3s ease-out; /* .3s transition */ + -webkit-transition : all .3s ease-out; + -o-transition : all .3s ease-out; + -ms-transition : all .3s ease-out; + transition : all .3s ease-out; + z-index : -1; +} +.humane.humane-show { z-index: 100000; } +/* ie hover state, recommended */ +.humane:hover { + filter : progid:DXImageTransform.Microsoft.alpha(opacity=60); + -ms-filter : "progid:DXImageTransform.Microsoft.alpha(opacity=60)"; +} +/* standards hover state, recommended */ +div.humane.humane-show:hover { + opacity: 0.6; + -webkit-transform : scale(0.8); + -moz-transform : scale(0.8); + -o-transform : scale(0.8); + -ms-transform : scale(0.8); + transform : scale(0.8); +} + +/* custom settings */ +.humane { + font-family : Ubuntu, Verdana, sans-serif; + font-size : 35px; + letter-spacing : -1px; + top : 25%; + left : 25%; + opacity : 0; + width : 50%; + min-height : 40px; + color : #fff; + padding : 30px; + text-align : center; + background-color : rgb(0,0,0); + background-color : rgba(0,0,0,0.8); + background-image : -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.8))); + background-image : -webkit-linear-gradient( top, rgba(0,0,0,1), rgba(0,0,0,0.8)); + background-image : -moz-linear-gradient( top, rgba(0,0,0,1), rgba(0,0,0,0.8)); + background-image : -ms-linear-gradient( top, rgba(0,0,0,1), rgba(0,0,0,0.8)); + background-image : -o-linear-gradient( top, rgba(0,0,0,1), rgba(0,0,0,0.8)); + background-image : linear-gradient( top, rgba(0,0,0,1), rgba(0,0,0,0.8));; + -moz-border-radius : 15px; + -webkit-border-radius : 15px; + -o-border-radius : 15px; + border-radius : 5px; + text-shadow : 0 -1px 1px #ddd; + -moz-box-shadow : 0 15px 15px -15px #000; + -webkit-box-shadow : 0 15px 15px -15px #000; + box-shadow : 0 15px 15px -15px #000; + -webkit-transform : scale(0.1); + -moz-transform : scale(0.1); + -o-transform : scale(0.1); + -ms-transform : scale(0.1); + transform : scale(0.1); +} + +/* custom animation for css transition supported browsers */ +.humane.humane-show { + opacity: 1; + -webkit-transform : scale(1); + -moz-transform : scale(1); + -o-transform : scale(1); + -ms-transform : scale(1); + transform : scale(1); +} + +/* other customizations */ +.humane p { + margin : 1em; + display : inline; +} +.humane ul { + list-style : none; + margin : 0; + padding : 0; +} +.humane .error { + color : red; + text-shadow : 0 -1px 1px #f11; +} diff --git a/index.html b/index.html index a1a2ff1..37b4a4b 100644 --- a/index.html +++ b/index.html @@ -47,6 +47,7 @@