Foros del Web - Ver Mensaje Individual

furoya · #14 (**permalink**) 25/08/2011, 11:19

Y lo siguen haciendo.

Iba a escribir este post hace varios años, pero entre que me cerraron el tema donde quería ponerlo, y que después algún ejemplo ya comenzaba a parecer por toda la web, pensé que quizá no valí ala pena. pero hace poco se habló del asunto éste de las barras coloreadas ¿otra vez más!, y entonces comprendí que seguimos como entonces. Y que resulta que en FdW (al menos según Google) faltaban ejemplos que no fuesen para IE.
Para no seguir desparramando el punto, al fin voy a dejar unos códigos para estudiar aquí, que es un tema donde debatimos y explicamos bastante.
Digo "estudiar", porque son muestras (nadie espere un cut&paste) que necesitan perfeccionarse, adaptarse y combinarse en un mismo documento. Por supuesto, Moz-FF sigue en su capricho y aún no podemos cambiar sus scrollbars desde CSS.

Para Opera.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>

<style type="text/css">
body, html {height:100%; width: auto; margin:0; padding:0;} 

html {overflow: hidden; }

body {overflow: scroll; background-color: silver; }

h1 {
width: 150%;
background-color: white;
margin: 20px;
}

div {
//overflow:scroll; 
//height: 10%;
margin: 20px;
padding: 0 25%;
background-color: white;
color: black;
font-family: Verdana, sans-serif;
font-size: 120%;
text-align: center;
line-height: 160%;
}
 
span {
font-size: 200%; 
}

</style>
</head>
<body style="scrollbar-face-color: red; scrollbar-track-color: pink; " >
<h1>Para Opera 11.</h1>

<div>

Este ejemplo es para <b>Opera</b>. Como usa las mismas propiedades CSS que Internet Explorer 5.5 al 8.x también se ve en esos navegadores. El inconveniente (y la queja) es que solamente las acepta in-line, y es un poco forzado meterlas en la etiqueta <tt>&lt;html></tt>, así que en esta versión le di una vuelta para meterlas en <tt>&lt;body></tt>. <br>
Funciona, hasta que alguien encuentre un método o truco mejor.

<span>
☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br>
</span>
</div>
</body>
</html>

Para IE 9.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>

<style type="text/css">
html {
-ms-scrollbar-face-color: red; 
-ms-scrollbar-track-color: pink; 
}

body {
background-color: silver;
}

h1 {
width: 150%;
background-color: white;
}

div {
//overflow:scroll; 
//height: 10%;
padding: 0 25%;
background-color: white;
color: black;
font-family: Verdana, sans-serif;
font-size: 120%;
text-align: center;
line-height: 160%;
}
 
span {
font-size: 200%; 
}

</style>
</head>
<body>
<h1>Para Internet Explorer 9.</h1>

<div>

Este ejemplo usa el prefijo <tt>-ms-</tt> para <b>Internet Explorer 9</b>. Aunque no lo probé porque no conseguí ninguno, por comentarios en FdW sé que la versión que funcionaba desde IE 5.5 ya no es válida y no la reconoce. <br>

<span>❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br>
</span>
</div>
</body>
</html>

Para Chrome 5.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<style type="text/css">
html {
margin: 0; 
padding: 0;
overflow: scroll;
}

body {
background-color: silver;
overflow: none;
}

h1 {
width: 150%;
background-color: white;
}

div {
//overflow:scroll; 
//height: 10%;
padding: 0 25%;
background-color: white;
color: black;
font-family: Verdana, sans-serif;
font-size: 120%;
text-align: center;
line-height: 160%;
}
 
::-webkit-scrollbar {
width: 16px;
height: 16px;
}
 
::-webkit-scrollbar-corner {
background-color: pink;
border: outset black;
border-width: 0 2px 2px 0;
}
 
::-webkit-resizer {
background-color: black; 
border: solid 20px red;
}

::-webkit-scrollbar-button:horizontal:increment {
border-style: solid;
width: 16px;
height: 16px;
font-size: 1px;
overflow: hidden;
background-color: red;

border-left-width: 15px;
border-top-width: 8px;
border-right-width: 1px;
border-bottom-width: 8px;

border-left-color: black;
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
}

::-webkit-scrollbar-button:vertical:increment {
border-style: solid;
width: 16px;
height: 16px;
font-size: 1px;
overflow: hidden;
background-color: red;

border-left-width: 8px;
border-top-width: 18px;
border-right-width: 8px;
border-bottom-width: 1px;

border-left-color: red;
border-top-color: black;
border-right-color: red;
border-bottom-color: red;
}

::-webkit-scrollbar-button:horizontal:decrement {
border-style: solid;
width: 16px;
height: 16px;
font-size: 1px;
overflow: hidden;
background-color: red;

border-left-width: 1px;
border-top-width: 8px;
border-right-width: 16px;
border-bottom-width: 8px;

border-left-color: red;
border-top-color: red;
border-right-color: black;
border-bottom-color: red;
}

::-webkit-scrollbar-button:vertical:decrement {
border-style: solid;
width: 16px;
height: 16px;
font-size: 1px;
overflow: hidden;
background-color: red;

border-left-width: 8px;
border-top-width: 1px;
border-right-width: 8px;
border-bottom-width: 18px;

border-left-color: red;
border-top-color: red;
border-right-color: red;
border-bottom-color: black;
}

::-webkit-scrollbar-button:vertical:increment:hover {
border-left-color: #ff8080;
border-top-color: black;
border-right-color: #ff8080;
border-bottom-color: #ff8080;
}
 
::-webkit-scrollbar-button:horizontal:increment:hover {
border-left-color: black;
border-top-color: #ff8080;
border-right-color: #ff8080;
border-bottom-color: #ff8080;
}
 
::-webkit-scrollbar-button:vertical:decrement:hover {
border-left-color: #ff8080;
border-top-color: #ff8080;
border-right-color: #ff8080;
border-bottom-color: black;
}
 
::-webkit-scrollbar-button:horizontal:decrement:hover {
border-left-color: #ff8080;
border-top-color: #ff8080;
border-right-color: black;
border-bottom-color: #ff8080;
}
 
::-webkit-scrollbar-button:vertical:increment:active {
border-left-color: lime;
border-top-color: black;
border-right-color: lime;
border-bottom-color: lime;
}
 
::-webkit-scrollbar-button:horizontal:increment:active {
border-left-color: black;
border-top-color: lime;
border-right-color: lime;
border-bottom-color: lime;
}
 
::-webkit-scrollbar-button:vertical:decrement:active {
border-left-color: lime;
border-top-color: lime;
border-right-color: lime;
border-bottom-color: black;
}
 
::-webkit-scrollbar-button:horizontal:decrement:active {
border-left-color: lime;
border-top-color: lime;
border-right-color: black;
border-bottom-color: lime;
}
 
::-webkit-scrollbar-thumb:horizontal {
background-color: red; 
border: outset 2px;
}
 
::-webkit-scrollbar-thumb:horizontal:hover {
background-color: #ff8080; 
}
 
::-webkit-scrollbar-thumb:horizontal:active {
background-color: lime; 
}
 
::-webkit-scrollbar-thumb:vertical {
background-color: red; 
border: outset 2px;
}
 
::-webkit-scrollbar-thumb:vertical:hover {
background-color: #ff8080; 
}
 
::-webkit-scrollbar-thumb:vertical:active {
background-color: lime; 
}

::-webkit-scrollbar-track {
border: none;
background-color: pink;
}

 
span {
font-size: 200%; 
}

/*

::-webkit-resizer {}
::-webkit-scrollbar {}
::-webkit-scrollbar-button {}
::-webkit-scrollbar-corner {}
::-webkit-scrollbar-thumb {}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-track-piece {}

*/

</style> 

</head>
<body> 
<h1>Para Chrome 5.</h1>

<div>
Este ejemplo es para <b>Safari / Chrome</b>. Hay varias combinaciones de pseudo elementos para lograr el efecto, y yo elegí estas. Un problema que no tuve tiempo de resolver es el de la desaparición de la imagen de la flecha en cada botón. Seguramente la original es un *.png con fondo transparente, lo que permitiría darle nuestro color de fondo; pero si no hay manera de recuperarla tendremos que agregar la propia como <tt>background-image</tt>.<br>
Ya intenté poner dentro un caracter "►", pero obviamente no me salió. Zafé casi dignamente usando botones con formato de flecha.<br>
Con <tt>webkit</tt> se pueden crear "<i>seudoeventos</i>" CSS que no se me ocure cómo ponerle a <tt>scrollbar-color</tt>; con javascript algún invento hay ... pero es hacer trampa.<br>

<span>
↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨
</span>
</div>
</body>
</html>