-
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; }