Foros del Web » Creando para Internet » CSS »

Camuflar scroll bar con CSS

Estas en el tema de Camuflar scroll bar con CSS en el foro de CSS en Foros del Web. Como podria darle estilo a un scroll bar para que solo se pueda ver las dos flechas de arriba y abajo, esto viene a razon ...
  #1 (permalink)  
Antiguo 20/04/2009, 17:09
 
Fecha de Ingreso: septiembre-2008
Mensajes: 137
Antigüedad: 9 años, 2 meses
Puntos: 0
Camuflar scroll bar con CSS

Como podria darle estilo a un scroll bar para que solo se pueda ver las dos flechas de arriba y abajo, esto viene a razon de que tengo que integrar un scroll bar en mi web y quiero disimularlo lo maximo posible, agradeceria cualquier consejo, muchas gracias y un saludo.
  #2 (permalink)  
Antiguo 21/04/2009, 01:22
 
Fecha de Ingreso: febrero-2009
Mensajes: 580
Antigüedad: 8 años, 10 meses
Puntos: 13
Respuesta: Camuflar scroll bar con CSS

Pues bueno,

ya que agradeces cualquier consejo; yo uso:

Cita:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
background: url(../img1/fondo.jpg) no-repeat;


scrollbar-arrow-color: #cccccc;
scrollbar-base-color: #000000;
scrollbar-dark-shadow-color: #222222;
scrollbar-track-color: #666666;
scrollbar-face-color: #999999;
scrollbar-shadow-color: #333333;
scrollbar-highlight-color: #FFE3B9;
scrollbar-3d-light-color: #FFFFFF;
background-color: #B0BECB;



}
con eso le das algo de estilo, pero a mi solo me va en IE (firefox, ni se entera..)
  #3 (permalink)  
Antiguo 21/04/2009, 05:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Camuflar scroll bar con CSS



No me hagas mucho caso, mariaanie, pues es una idea a bote pronto y sin evaluarla.

Si lo que quieres es tapar la "guía de recorrido" y dejar sólo visibles las flechas superior e inferior, se me ocurre ¿se podría lograr "tapando" la guía con un div colocado en posición absoluta sobre ella?

Pero ya te dije que es solo una idea, lógicamente sólo sería util para scrolls de elementos contenidos en la página.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 21/04/2009, 12:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Camuflar scroll bar con CSS

Me pudo la curiosidad y aquí va el código para "tapar la guía" del scroll:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>ocultar scroll</title>
  4.  
  5. <style type="text/css">
  6. * {margin: 0; border: 0; padding: 0;}
  7. body {background: #fff;}
  8. #contenedor {width: 200px; height: 200px; overflow: auto;}
  9. #tapa {position: absolute; width: 20px; height:166px; left: 183px; top: 17px; background:#fff;}
  10. p {color: #000}
  11.  
  12. </head>
  13. <div id="contenedor">
  14. <p><p>Lorem ipsum dolor sit amet consectetuer nunc convallis nunc nulla tincidunt. Id Curabitur gravida ac senectus condimentum Phasellus Aliquam condimentum ante nibh. Nullam condimentum nunc commodo elit dolor urna metus Fusce ipsum volutpat. Rhoncus metus Curabitur et laoreet Phasellus tempus dignissim est pellentesque adipiscing. Eget suscipit magna pretium facilisi justo Curabitur sit mattis sit eget. Dictumst Maecenas et.</p>
  15. <p>Vel Vestibulum Duis congue laoreet vestibulum elit quis aliquam tincidunt in. Pellentesque dui a turpis pellentesque sed Vestibulum vitae nibh nibh adipiscing. Nec a Vivamus velit consectetuer wisi nibh et Donec eros magna. Quisque dui semper Nunc laoreet Vestibulum vitae sit Nam enim laoreet. Wisi Vestibulum auctor id Sed est et turpis sociis fringilla at. Nunc penatibus pede et Morbi tortor justo.</p>
  16. <p>Et non sit Aenean dictum risus pretium tortor nulla amet sed. Id parturient quis Sed vitae risus ridiculus pretium Integer interdum volutpat. Lorem Cras est molestie in tortor vitae sociis interdum libero justo. Integer Nulla Donec ipsum tristique Morbi urna pede a malesuada Phasellus. Dui justo magna nibh molestie laoreet ullamcorper semper Suspendisse et Praesent. Suspendisse Ut ornare felis ultrices tristique a sapien et sed ac. Magnis hac.</p>
  17. <p>Mauris dolor sit est sem justo tortor Phasellus ac eros libero. Nascetur semper Sed ipsum Pellentesque ut laoreet wisi Integer adipiscing eros. Vestibulum ligula eu suscipit neque lacus accumsan In Quisque ligula Aliquam. Id lacinia Mauris lacus fringilla eros facilisi sapien tristique tempor pede. Tempor Vestibulum auctor nonummy augue ut Vestibulum interdum sed eu Pellentesque. Id platea pretium semper Nunc dolor Nunc Aenean sit Proin et. </p>
  18. </p>
  19. </div>
  20. <div id="tapa"></div>
  21. </body>
  22. </html>

y este es el resultado en opera 9, FF 3 e IE 7:


Pero otra cosa es que sea práctico y funcional en otras situaciones.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 22/04/2009, 01:58
 
Fecha de Ingreso: febrero-2009
Mensajes: 580
Antigüedad: 8 años, 10 meses
Puntos: 13
Respuesta: Camuflar scroll bar con CSS

wow, pero a ver, has calculado la posición de la 'tapa' a ojo o cómo?

me gusta :D
  #6 (permalink)  
Antiguo 22/04/2009, 08:22
 
Fecha de Ingreso: septiembre-2008
Mensajes: 137
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Camuflar scroll bar con CSS

Gracias por la respuesta me ha sido de gran ayuda, un saludo a todos
  #7 (permalink)  
Antiguo 22/04/2009, 11:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Camuflar scroll bar con CSS

Cita:
Iniciado por Bam_Margera Ver Mensaje
has calculado la posición de la 'tapa' a ojo o cómo?
En este caso es sencillo calcular la posición de #tapa, pues al tener posición absoluta y ser hijo directo del body, su punto 0,0 (el origen) es el mismo que #contenedor del que sé las medidas y por lo tanto su final.

mariaanie, me alegra que este "divertimento" te haya servido.

Pero en un documento más complejo y con una posición más incierta habría que currarlo algo más.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 21/09/2009, 17:28
 
Fecha de Ingreso: septiembre-2009
Mensajes: 130
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Camuflar scroll bar con CSS

oie pero si mi fondo digamos que tiene decoracion!
  #9 (permalink)  
Antiguo 21/09/2009, 17:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Camuflar scroll bar con CSS

Gabriel, si ya tienes un tema abierto por ti, no disperses la ayuda que puedas obtener rescatando éste.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:09.