AnshiG
Bienvenidos a AnshiG.!!

Conectarse

Recuperar mi contraseña


Afiliados Elite


Normales
Kimi wa Petto TOP
Pagerank

Últimos temas
» Blog de Renders!
Dom Ene 03, 2016 2:36 pm por Sakura92

» Hemos vuelto!!
Dom Ene 03, 2016 2:31 pm por Sakura92

» Actualización FEBRERO 2015
Vie Feb 27, 2015 10:22 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:42 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:41 am por Sakura92

» Materias favoritas... y no tanto!
Jue Feb 12, 2015 10:47 am por Sakura92

» Que mascotas tienen, tuvieron y les gustaria tener?
Jue Feb 12, 2015 10:38 am por Sakura92

» Redes sociales
Jue Feb 12, 2015 10:09 am por Sakura92

» PS3: Juegos!
Jue Feb 12, 2015 10:03 am por Sakura92

» Consolas o PC?
Jue Feb 12, 2015 9:55 am por Sakura92

» BUSQUEDA DE STAFF
Mar Feb 10, 2015 7:18 pm por Sakura92

» Requisitos y Datos
Mar Feb 10, 2015 12:03 pm por Sakura92

» Limpieza de afiliados
Mar Feb 10, 2015 9:36 am por Sakura92

» Ola ke Ase?
Lun Dic 09, 2013 8:07 pm por Tetsumi

» Guia 7: Reglamento Administracion
Vie Nov 22, 2013 1:05 pm por Sakura92

» Ideas
Vie Nov 22, 2013 1:02 pm por Sakura92

» Puntos
Vie Nov 22, 2013 12:59 pm por Sakura92

» Reglamento Soporte
Vie Nov 22, 2013 12:58 pm por Sakura92

» Reglamento Tutoriales
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Galerias
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Recursos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Reglamento Talleres y Pedidos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Incumplimientos
Vie Nov 22, 2013 12:52 pm por Sakura92

» Wings of Freedom [Elite]
Lun Sep 30, 2013 2:28 pm por Invitado

» Yugi Oh! RPG [Élite]
Miér Ago 07, 2013 2:36 am por Invitado

» OMEGA NEW WORLD [Afiliación Élite ]
Miér Jul 31, 2013 6:08 pm por Invitado

» Creando Mundos [Élite]
Vie Jul 26, 2013 12:22 am por Invitado

» World´s Inuyasha RPG [Normal]
Miér Jul 24, 2013 11:46 pm por Invitado

» Fatal Liberty Rol [Élite]
Mar Jul 16, 2013 10:30 am por Invitado

» Fairy Tail Sekai || Re-Apertura! || Afiliación Elite
Miér Jul 03, 2013 1:50 am por Invitado

» Hi(: !
Lun Jul 01, 2013 3:47 am por #Re Sound

» Hola, Hola, ¿hay alguien ahi?
Lun Jul 01, 2013 3:37 am por #Re Sound

» Bleach: Shadow Of Seireitei [Cambio de dirección]
Sáb Jun 29, 2013 11:52 am por Invitado

» Volvi... nose si para siempre pero volvi xD
Vie Jun 28, 2013 9:08 am por Sakura92

» Me extravié en el cielo, ¿qué puedo hacer?
Vie Jun 28, 2013 8:55 am por Sakura92

» Roma Antiqua {Afiliación Normal}
Dom Jun 23, 2013 3:07 pm por Invitado

» Saint Seiya Cosmos Rebellion Rol [Afiliación Élite]
Dom Jun 16, 2013 12:13 am por Invitado

» Buck Tick Fans [Élite]
Jue Jun 13, 2013 1:49 am por Invitado

» End of Silence [Cambio de dirección y botones]
Vie Mayo 31, 2013 5:54 am por Invitado

» Campamento mestizo [Afiliación Elite]
Miér Mayo 29, 2013 6:11 pm por Invitado

» Render Universe - Elite
Dom Mayo 19, 2013 3:58 pm por Invitado

» Love orange and cyan (tutorial9
Jue Mayo 16, 2013 3:51 pm por Loki

» AVISO
Jue Mayo 16, 2013 8:49 am por Sakura92

» Code Geass: Endless Dark [Élite]
Miér Mayo 01, 2013 2:22 am por Invitado

» Creative Designs (normal)
Mar Abr 30, 2013 12:48 am por Invitado

» Ultimate Inazuma Rol -Cambio de banner-
Jue Abr 25, 2013 1:26 pm por Invitado

» Buenas...
Mar Abr 16, 2013 3:58 pm por Naggar

» Actualizacion de Abril
Mar Abr 16, 2013 2:00 pm por Sakura92

» Texuras y Png hechas por mi (Sueltas) - Actu 13/04
Lun Abr 15, 2013 8:16 am por Jotaro Kujo

» AVISO DE AUSENCIA TEMPORAL
Vie Abr 12, 2013 2:46 pm por Zec



Las imagenes e historias que se posteen en este foro son de sus respectivos dueños, cada uno tendra el link correspondiente a la pagina donde lo ubico su creador originalmente.Todo el materia ya se encuentra bajo licencia por favor si quieres tomar algo comunicarse con la administración del foro, o el dueño del post.
Creative Commons License
Crear
foro
Codigos CSS-HTML-JS

APRENDO EN...
Estudio en Eternal Designs Melody Graphics School ise-graficos

TOMO RECURSOS DE...

RESEÑAS...


Barra de Desplazamiento Personalizada

Ver el tema anterior Ver el tema siguiente Ir abajo

Barra de Desplazamiento Personalizada

Mensaje por Sakura92 el Sáb Abr 06, 2013 6:56 pm

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE


Barras de Desplazamiento Únicas

Oye! Espera un segundo.
No sé si me recuerdas pero soy esa tonta persona que no pide crédito por sus tutoriales. Así que si estás pensando en dejar link para autentificar el crédito y colocarme en algún rincón de tu foro ¡alto, humano! No es necesario (: Tampoco es necesario postear para ver los codes ni nada de eso.

Este código permite modificar en su totalidad el aspecto de tus barras de desplazamiento para Google Chrome, manipulando cada uno de los elementos que las componen. No funciona en otros exploradores, pero de todos modos, tanto Mozilla como IE son bastante malos a la hora de abrir foros de Foroactivo así que deberías aconsejar a tus usuarios que usen Chrome ... En todo caso, no desconfigura nada para los otros exploradores.

Aquí te dejo una muestra de cómo se ve el resultado en uno de los foros que padeció mi estadía como admin:
Spoiler:
Como verás, la barra ya no es esa cosa normal y aburrida que usan los simples mortales...

1. Códigos

El código es un CSS que cortaré en muchos pedacitos para que puedan ver los elementos por separado y vean qué quieren modificar y cómo hacerlo. Todos los códigos van en PA > Visualización > Colores > CSS

CÓDIGOS DEFAULT
Código:
body  {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: XXpx;
overflow-y: auto;
overflow-x: auto;
}

::-webkit-scrollbar {
width: 10px;
height: 10px;
}​
Aquí hay que modificar una sola cosa: donde dice right: XXpx; puedes elegir qué distancia tendrá la barra del borde derecho del foro. Si colocas 0px quedará pegadita al lado derecho del foro.


BOTONES PARA SUBIR Y BAJAR
Código:
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
height: 30px;
display: block;
background: #EL COLOR DE FONDO QUE QUIERAS EN HEX;
}
A esto le puedes agregar todo lo que se te ocurra, aquí te dejo algunas ideas básicas:
- Para que no se vean, puedes cambiar donde dice block por none;
- Bordes: agrega la línea "border: 1px solid #COLOR;"
- Redondeo: agrega la línea "border-radius: TAMAÑO DEL REDONDEADO px;". Recuerda que si el redondeado es igual a la mitad del ancho y alto del botón, quedará un círculo Wink
- Imagen de fondo: reemplaza el color en "background" por "url('LINK DE TU IMAGEN');" (quedaría background: url('LINK DE TU IMAGEN');)

Aquí hay algo que puedes hacer que queda bien, puedes poner tus propias flechas si tienes las imágenes. En vez de poner el código como está ahí arriba, tendrás que separarlo y te quedará así:
Código:
::-webkit-scrollbar-button:end:increment  {
height: ALTURA DE TU IMAGEN px;
width: ANCHO DE TU IMAGEN px;
display: hidden;
background-image: url('LINK DE TU IMAGEN PARA SUBIR');
}

::-webkit-scrollbar-button:start:decrement {
height: ALTURA DE TU IMAGEN px;
width: ANCHO DE TU IMAGEN px;
display: hidden;
background-image: url('LINK DE TU IMAGEN PARA BAJAR');
}


EL AREA SOBRE LA QUE SE MUEVE EL SCROLL
Código:
::-webkit-scrollbar-track-piece  {
background: #COLOR DE FONDO QUE QUIERAS;
}
Al igual que la anterior, puedes ponerle lo que quieras: una imagen de fondo, bordes, darle un poco de forma, o puedes hacer que se vuelva invisible colocando "background: transparent;" y "display: hidden;".


¡EL SCROLL! (es decir, la barrita que se mueve)
Código:

/*barrita vertical*/
::-webkit-scrollbar-thumb:vertical {
height: ALTURA DESEADApx;
background: #COLOR DE FONDO EN HEXADECIMALES;
border: 1px solid #COLOR DE BORDE;
}

/*barrita horizontal*/
::-webkit-scrollbar-thumb:horizontal {
width: ANCHO DESEADOpx;
background: #COLOR DE FONDO EN HEXADECIMALES;
border: 1px solid #COLOR DE BORDE;
}
Al igual que las anteriores, puedes ponerle lo que quieras: una imagen de fondo, bordes, darle un poco de forma. Algo interesante que puedes hacer es reemplazarle por una imagen, colocándola de fondo con el código de background-image que ya te mostré antes y poniendo "display: hidden;".

2. Notas de uso

- Reitero: éste código no sirve para Mozilla Firefox ni para Internet Explorer.
- El código afecta todos los scrollbars de tu web. Si quieres que sólo afecte a algunos, se puede hacer una versión diferente, pero eso sería completamente otro tuto porque es largo de hacer xD
- En caso de que el código no ande, tengan dudas, quieran modificar algo y no puedan, etc. NO DUDEN en dejar mensaje aquí, mandar MP, lo que sea. Me tardo porque vivo ocupada, pero eventualmente respondo.
Cualquier dato que sepas que falte o consulta que quieras hacer, deja un aviso aquí ^^


​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
avatar
Sakura92
Webmaster
Webmaster

Mensajes : 175
Puntos : 178942
Reputación : 2
Edad : 25

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.