•  

    Para la barra de desplazamiento de página y HTML
    Usan escala hsl
    Generador rgba, hlsa
        a. http://www.workwithcolor.com/hsl-color-picker-01.htm



    CSS

    #PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}

    #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

    }

    #PopularPosts1 img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:33px;height:33px;padding:3px}

    ::-webkit-scrollbar {width:19px;}
    /* Track */
    ::-webkit-scrollbar-track {box-shadow:inset 0 0 5px rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.3);-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
    /* Handle */
    ::-webkit-scrollbar-thumb {-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#b8cbec;box-shadow:0 0 6px #b8cbec;-webkit-box-shadow:0 0 6px #b8cbec;-moz-box-shadow:0 0 6px #b8cbec;}
    ::-webkit-scrollbar-thumb:window-inactive {background: #b8cbec;}
    ::selection {background:#d4d3d5; color:#FFF;}
    ::-moz-selection {background:#d4d3d5; color:#FFF;}
    ::-webkit-selection {background:#d4d3d5; color:#FFF;}
    body::before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    z-index: 100;
    -webkit-box-shadow: 0 0 10px hsla(0, 93%, 52%, .8);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.8);
    box-shadow: 0 0 10px hsla(0, 93%, 49%, .8);
    }
    body::after {
    content: "";
    position: fixed;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    z-index: 100;
    -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, .8);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.8);
    box-shadow: 0 0 10px hsla(0, 91%, 57%, .8);
    }
    @-webkit-keyframes zoomnav{from{-webkit-transform:translate(-1000px,0px);opacity:0}
    to{-webkit-transform:translate(0px,0px);opacity:1;}}
    @-moz-keyframes zoomnav{from{-moz-transform:translate(-1000px,0px);opacity:0}
    to{-moz-transform:translate(0px,0px);opacity:1;}}
    @-ms-keyframes zoomnav{from{-ms-transform:translate(-1000px,0px);opacity:0}
    to{-ms-transform:translate(0px,0px);opacity:1;}}
    @keyframes zoomnav{from{transform:translate(-1000px,0px);opacity:0}
    to{transform:translate(0px,0px);opacity:1;}}
    #PopularPosts1 h2 {border-bottom: 3px solid orange;text-align: center;padding-top: 10px;font-size: 15px;font-weight: bold;letter-spacing: 5px;color: hsl(0, 0%, 28%);}
    #BlogArchive1 h2 {border-bottom: 3px solid hsl(115, 44%, 47%);text-align: center;padding-top: 10px;font-size: 15px;font-weight: bold;letter-spacing: 5px;color: hsl(0, 0%, 28%);}
    #HTML1 h2 {border-bottom: 3px solid hsl(197, 31%, 75%);text-align: center;padding-top: 10px;font-size: 15px;font-weight: bold;letter-spacing: 5px;color: hsl(0, 0%, 28%);}
    #bottom h6 { border-left: 5px solid #babbc4; background: #fafafa; }
    #bottom ul li { display: block; padding: 7px 15px; color: rgb(209, 56, 56); font-size: 16px;margin-left: 0px; } #bottom ul li:hover { background: #babbc4; color: #fff; }