CSS

Created Tuesday 10 December 2013

  1. Scrollbars:
    1. http://css-tricks.com/custom-scrollbars-in-webkit/
    2. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/
    3. https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance?redirectlocale=en-US&redirectslug=CSS%2F-moz-appearance
    4. http://codemug.com/html/custom-scrollbars-using-css/
      1. IE (within element selectors):
        1. scrollbar-base-color:#C0C0C0;
        2. scrollbar-3dlight-color:#C0C0C0;
        3. scrollbar-highlight-color:#C0C0C0;
        4. scrollbar-track-color:#EBEBEB;
        5. scrollbar-arrow-color:black;
        6. scrollbar-shadow-color:#C0C0C0;
        7. scrollbar-dark-shadow-color:#C0C0C0;
      2. Chrome (pseudo selectors):
        1. ::-webkit-scrollbar {width:10px;height:10px;}
        2. ::-webkit-scrollbar-button {background-color:#666;}
        3. ::-webkit-scrollbar-track {background-color:#999;}
        4. ::-webkit-scrollbar-track-piece {background-color:#ffffff;}
        5. ::-webkit-scrollbar-thumb {height:50px;background-color:#666;border-radius:3px;}
        6. ::-webkit-scrollbar-corner {background-color:#999;}
        7. ::-webkit-resizer {background-color:#666;}
      3. Firefox (didn't get it working):
        1. scrollbar {
-moz-appearance:none !important;
background:rgb(0,255,0) !important;}
  1. thumb,scrollbarbutton {
-moz-appearance:none !important;
background-color:rgb(0,0,255) !important;}
  1. thumb:hover,scrollbarbutton:hover {
-moz-appearance:none !important;
background-color:rgb(255,0,0) !important;}
  1. scrollbarbutton {
display:none !important;}
  1. scrollbar[orient="vertical"] {
min-width:15px !important;}

  1. Position element in the page center
    1. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px; /* half the image's height */
margin-left: -100px; /* half the image's width */
}



Backlinks: