I am starting to like the idea of writing my CSS as object oriented as possible. On a site I am working on , I included the styling for three different button colors, complete with hover state, with a grand total of 5 CSS styles and no images used.
This is the first site I have worked on with the goal of making the stylesheet as object oriented as possible. I am really liking the modularity, the consistent styling it will enforce down the road, and that it will keep my stylesheet from growing too large.
display: inline-block;
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5); box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.button:hover {
opacity: 0.85;
-moz-box-shadow: 0 0 1px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.5); box-shadow: 0 0 1px rgba(0,0,0,0.5);
}
.button.orange {
background: #d6661b;
background: -moz-linear-gradient(top, #d6661b 48%, #d65500 50%, #db5a04 57%, #dd681a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(48%,#d6661b), color-stop(50%,#d65500), color-stop(57%,#db5a04), color-stop(100%,#dd681a));
background: -webkit-linear-gradient(top, #d6661b 48%,#d65500 50%,#db5a04 57%,#dd681a 100%);
background: -o-linear-gradient(top, #d6661b 48%,#d65500 50%,#db5a04 57%,#dd681a 100%);
background: -ms-linear-gradient(top, #d6661b 48%,#d65500 50%,#db5a04 57%,#dd681a 100%);
background: linear-gradient(top, #d6661b 48%,#d65500 50%,#db5a04 57%,#dd681a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d6661b’, endColorstr=’#dd681a’,GradientType=0 );
}
.button.green { background: #2b8c7f;
background: -moz-linear-gradient(top, #2b8c7f 48%, #008977 50%, #0b8978 57%, #1f897d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(48%,#2b8c7f), color-stop(50%,#008977), color-stop(57%,#0b8978), color-stop(100%,#1f897d));
background: -webkit-linear-gradient(top, #2b8c7f 48%,#008977 50%,#0b8978 57%,#1f897d 100%);
background: -o-linear-gradient(top, #2b8c7f 48%,#008977 50%,#0b8978 57%,#1f897d 100%);
background: -ms-linear-gradient(top, #2b8c7f 48%,#008977 50%,#0b8978 57%,#1f897d 100%);
background: linear-gradient(top, #2b8c7f 48%,#008977 50%,#0b8978 57%,#1f897d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#2b8c7f’, endColorstr=’#1f897d’,GradientType=0 );
}
.button.yellow {
background: #db9627;
background: -moz-linear-gradient(top, #db9627 48%, #dd8e04 50%, #dd900b 57%, #dd9416 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(48%,#db9627), color-stop(50%,#dd8e04), color-stop(57%,#dd900b), color-stop(100%,#dd9416));
background: -webkit-linear-gradient(top, #db9627 48%,#dd8e04 50%,#dd900b 57%,#dd9416 100%);
background: -o-linear-gradient(top, #db9627 48%,#dd8e04 50%,#dd900b 57%,#dd9416 100%);
background: -ms-linear-gradient(top, #db9627 48%,#dd8e04 50%,#dd900b 57%,#dd9416 100%);
background: linear-gradient(top, #db9627 48%,#dd8e04 50%,#dd900b 57%,#dd9416 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#db9627′, endColorstr=’#dd9416′,GradientType=0 );
}
No comments yet.