From 6f4192d9b011369cbf6ff0bb5ed17d85a4b30401 Mon Sep 17 00:00:00 2001 From: Hugo Baeta Date: Wed, 15 Aug 2012 13:45:04 -0700 Subject: [PATCH] updated the styles for the buttons, switching from using background css gradients to using box-shadow techniques --- style.css | 36 ++++++++++++++---------------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/style.css b/style.css index 4a31f35a..4f8e62ea 100644 --- a/style.css +++ b/style.css @@ -225,36 +225,27 @@ input[type="submit"] { border: 1px solid #ccc; border-color: #ccc #ccc #bbb #ccc; border-radius: 3px; - background: #fafafa; /* Old browsers */ - background: -moz-linear-gradient(top, #fafafa 60%, #e6e6e6 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#fafafa), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* IE10+ */ - background: linear-gradient(top, #fafafa 60%,#e6e6e6 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */ - box-shadow: inset 0 2px 1px #fff; + background: #e6e6e6; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05); color: rgba(0,0,0,.8); cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ font-size: 12px; font-size: 1.4rem; - padding: 1.12em 1.5em .88em; - text-shadow: 0 1px 0 rgba(255,255,255,.5); + line-height: 1; + padding: 1.12em 1.5em 1em; + text-shadow: 0 1px 0 rgba(255,255,255,.8); } button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { - background: #f5f5f5; /* Old browsers */ - background: -moz-linear-gradient(top, #f5f5f5 60%, #dcdcdc 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#f5f5f5), color-stop(100%,#dcdcdc)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* IE10+ */ - background: linear-gradient(top, #f5f5f5 60%,#dcdcdc 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dcdcdc',GradientType=0 ); /* IE6-9 */ - border-color: #bbb #bbb #aaa #bbb; + border-color: #ccc #bbb #aaa #bbb; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02); } button:focus, html input[type="button"]:focus, @@ -265,8 +256,9 @@ html input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb #bbb; - box-shadow: inset 0 2px 3px rgba(0,0,0,.15); - box-shadow: inset 0 2px 2px rgba(0,0,0,.15); + -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15); + -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15); + box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15); } input[type="checkbox"], input[type="radio"] {