Como Personalizar las Barras de Scroll de un Sitio Web con CSS
ฝัง
- เผยแพร่เมื่อ 17 ก.ย. 2024
- En este videotutorial te enseñare como personalizar las barras de desplazamiento de tu sitio web utilizando CSS.
🚀 Blog de diseño web:
www.falconmast...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
--
♦ Código del Video
github.com/fal...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters
Si te gusto el video por favor dale manita arriba y suscribete para mas videos como este.
FalconMasters se puede hacer un scroll horizontal?
y poner imágenes para hacer como una galería.
FalconMaster, contigo empecé a aprender HTML y CSS con los cursos de TH-cam, hoy en día parte de donde estoy también es tuyo el mérito, por enseñarme... Gracias.
Yo he pagado tu curso de diseño web en Udemy y no me arrepiento del dinero invertido, te lo mereces. Todo bien explicado y sintetizado, explicas agradablemente y da ganas de seguir en el vídeo. Actualmente estoy estudiando en un centro privado desarrollo de apps multiplataforma, y el contenido de tu curso me ayuda bastante a diario, muchas gracias desde España, un saludo! 🤣
likeeee men yo llevo meses buscando esto jaja
yo igual
@@jhosteen1792 y yo lo vengo buscando hace como 2 años 😂😂😂😂😂
Estos dos últimos vídeos son muy geniales, sigue así :)
Muchas gracias
Gracias, Dios bendiga tu vida y cada día alcances mas conocimiento.
Este video es sencillo pero MUY UTIL! Gracias de nuevo Falcon
Que chido encontrar buen contenido en español. Gracias bro!
Muy bueno falcón! Lo voy a emplear. Gracias.
eres el mejor muchas gracias, soy novato y apenas voy aprendiendo muchas gracias bro
Como siempre siendo un crack jejejeje
Excelente dato Falcon!! Saludos desde Venezuela!! :D
Código CSS
body::-webkit-scrollbar
{
width: 7px;
background: #021b79;
}
body::-webkit-scrollbar-thumb
{
background: rgba(255,255,255,0.2);
border-radius:10px;
border-right: 2px solid #021b79;
}
Grande maestro. Cada video aprendo mucho
Ehhh ave María te Felicito parcero... Lo que estaba buscando ... Espectacular
Más vídeos así!!!!
Que hermoso!!! xD siempre quise esto :3
falcoooooooon me salvaste la vida gracias
Excelente vídeo amigo me ayudaste mucho Gracias :D
Excelente Carlos. Saludos desde Aracataca.
Saludos igualmente!
Buen video, sigue asi 😌
Lo esperaba hace un año tio falcon :'c gracias por tu contenido
¡Muchas gracias!
Falcon, primero que nada te amo we xD
Una pregunta, cómo haces esas líneas decorativas como la que tienes color naranja debajo de tu título?
Hola.
Son simplemente un con un alto de unos 5px me parece.
Muchas gracias agosto 2022 super funcional
Muy buen video, gracias por la info.
Muy buen tutorial! podrias hacer uno de la propiedad webkit en profundidad? gracias!
Excelente material, muchas gracias !!!
Me ayudaste mucho gracias.-
Gracias Falcon!
Excelente video!! Será de gran ayuda...
Hola carlos, buen video! podrias hacer tutoriales de C++
like para que lo vea o vea
Muchas gracias!! Buen Tutorial..
Excelente video, sigue adelante amigo
Eres muy bueno. Gracias
Nuevo sub 😎, excelente contenido!
1:20 Yo aun sigo utilizando el opera mini, muchos lo usan aún xd
Excelente! gracias muy util
es magnífico :D
El unico que sirvio rey ... gracias
Gracias !
Felicidades por los 200.000 subs :D
Muchas gracias Falcon, por lo que veo leiste mi comentario pidiendo este tutorial, ojala y sigas activo con tu canal porque es de mucha ayuda, algo que me gustaria es que hagas videos de javascript puro, no me refiero a un curso si no mas bien haciendo efectos como por ejemplo un slideshow que sea infinito y que vaya de izquierda a derecha o viceversa!!! Saludos : )
Por cierto, que bueno que estes usando Visual Studio Code, es un excelente editor!!!! : )
Si leí tu comentario, por eso hice el video. Voy a tener en cuenta esos videos, aunque ya tengo una lista de videos que van a ir antes. Y si VS esta genial, es muy buena opción.
Genial, muchas gracias : )
Que buen contenido bro, ademas super bien explicado :DDD
buen video me ayudo con un proyecto
Carlos haz un video mostrando los cursos que tienes en TH-cam y en udemy. yo compré el de PHP y me fascinó, de verdad que si lo dictas tú no lo pienso dos veces para comprarlo
Mis cursos de Udemy son: El curso de PHP y MYSQL, Curso de Diseño Web Profesional, Curso de Bootstrap 4.
Excelente! Me has ayudado mucho FalconMasters muy útil tu contenido like...
Gracias!
brother te quiero
genial amigo saludos desde peru
Saludos igualmente
Hola Falcon, muy buen video me gusto mucho y es bastante importante para agregar estilo a las páginas web, fijate esto es una petición mia, yo se que puede sonar extensa y aburrida pero varios de mis colegas y yo (claro jejeje) estamos interesado en ver un tutorial tuyo de como hacer una tienda online (porque los tutoriales que hay en internet la verdad no son muy completos) y pues que si hicieras ese tutorial explicaras como agregar los datos de la compra a una base de datos, y que cuando alguien compre algo llegue al gmail del propietario de la página (osea el dueño de la empresa) una notificación, que se agregue a la página de perfil del usuario que compro, una "cola" o algo de ese estilo. Gracias, disculpa la molestia y sigue asi, vamos a por los 500K.
Pequeño consejo pero genial!
Gracias persona :D me sirvió de ayuda
Buen video Ojala subas mas tips :D
genio!
Como siempre al único que le entiendo al 100...mucho éxito falcon eres un crack!
Esta genial!! 👍
Gracias crack!
Excelente!!!
Mas videos por favoooooooor!
Que bien
Buen día Carlos, hago una simple pregunta, que carrera estudiaste? O que carrera seguiste? Por que me interesa mucho lo que tu haces para poder trabajar en un futuro, es más eh aprendido bastante de tus videos y ya dominó el html y CSS, gracias espero una respuesta.
Hola amigo, existe o conoces alguna manera en la que la scrollbar horizontal pueda ponerse en la parte superior del contenedor??... Saludos y gracias.
wtf
Sii porfin un video que buscaba :0 gracias
De nada para eso estamos :)
como que estamos :v? son diferentes personas :v?
Haha, si soy solo yo en el canal de youtube, pero es una forma de decirlo.
Ah ok ya iba a decir este men ya tiene su propia empresa alv :,v
Podrias hacer un video de estadisticas o charts en bootstrap u otra modalidad que conozcas. Gracias.
El ancho lo pueden cambiar con la propiedad: height: 9px;
Bien
/* Scroll Personalizado */
.contenedor::-webkit-scrollbar {
width: 7px;
}
.contenedor::-webkit-scrollbar-thumb {
background: #ff9d00;
border-radius: 5px;
}
Oye bro buen vídeo like siembre esperándote y keria saber si puedes ser un vídeo para personalizar la raya cuando carga una paguina no se como se llama o me puedes decir porfas gracias
No entiendo muy bien a que raya te refieres.
mira la raya roja que sale aqui como se llama o si puedes hacer un tuto te lo agradeceria fastdroidgen.net/xtempmail/
Muy bien, muy bonito pero, Y LA FLECHITA!! Hay alguna manera de seguirla viendo aunque se pase el css por la scroll bar?
O hay una manera de refrenciarla dentro del DOM? Gracias de antemano a cualquiera que tenga una referencia de esto.
Buenísimo el video, pero una pregunta, ¿Se puede poner una imagen como barra de scroll ?
Y otra cosa, ¿se puede dividir el background-color del -webkit-scrollbar para que por ejemplo la primer mitad tenga un color y la segunda mitad tenga otro color?
Gracias.
Puedes darle en vez de un color normal, darle un degradado/gradiante con 2 colores
no me funciona porque? :/ se lo pongo al body y me funciona pero se lo pongo a una clase y no coge.
The king is back
D:
buen video, me gusto el poder personalizar la barra de scroll, sabes si tambien es posible aplicar el hover en la barra? me gustaria darle un efecto de trasparencia
Si se puede amigo, pero por lo que veo el transition no funciona, entoces se mira muy brusco pero este seria un ejemplo body::-webkit-scrollbar-thumb:hover{
background: rgb(234, 68, 68, .9);
}
Ayuda ! Es posible ocultarlo? ,que funcione solo con el deslizador del mouse, algo haci como lo hacemos en los móviles
Cambiaste el Sublime por Visual studio :-( ---- Has caído en el Lado oscuro Carlos Arturo :'(
D: Esto no es lo que parece!
Siendo bastante honesto vs code es muchísimo mejor. El echo que su código sea open source y puedas crear plugins lo hace especial al igual que Atom. SublimeText quedará en olvido si no hacen algo pronto
Lo mejor es que tiene terminal integrada xddd
Creo que el software utilizado es algo secundario lo que realmente importa son tus conocimientos 😉
@viktor giraldo yo también uso ambos y brackets también 👌
@FalconMaster y cono puedes modificar las flechitas de la parte superior e inferior?
FalconMaters puedes hacer un tutorial de un loading y luego q ingrese a la pagina :)
Muito...Muito...Muito...Muito...Muito...Muito...Muito... BOM!!!!
Buen video Carlos // quiera saber si pudeiras hacer un video de unity?? Saludos
No conozco de Unity, por lo que la verdad no creo sacar un video de ello pronto.
Muy bien es una plataforma para crear Videjuegos espero que tomes en cuenta este punto. para futuros proyectos ,ya que yo quisiera saber mas, no tengo ni idea por donde se empieza jeje Gracias.
saludos desde Guatemala
bendiciones :D
Con esto pude hackear la nasa 😎
o quiero que cuando abra una nueva ventana vaya para abajo sola hasta la mitad de la pagina peo en html eso e puede algun codigo?
me aparecio de la nada la barra de scroll en el navegador y no se como se quita !! siempre usaba la ruedita del mouse o las flechas del teclado .... ayudaaaa !!! gracias
me sirvio mucho pero porque no funciona al momento de verlo en tamaños de telefonos moviles ??
Ya no hay mas tutoriales con la consola del ordenador?
hola hola y mil gracias....pregunta: se puede en firefox hacer que desaparezca el scroll sin perder la función o, al no aceptar ninguna propiedad simplemente aparece y ya? :) thanks!
Como se puede personalizar la barra de toda la página, es decir completamente y no dentro de un contenedor ?
como se hace con la barra de abajo
arias un curso sobre cómo hacer una red social por favor
quiero poner el scroll al lado izquierdo sabes como hacerlo ?
No es compatible con Firefox, alguna ayuda extra por favor , el video esta muy bueno solo falta la compatibilidad con otros navegadores porfa dateame esa info, gracias y que sigan los exitos.
Hola y como hago para aparecer y desaparecer el scroll es decir el uso de efecto de desvanecer.... no se si es lo correcto en decir.
Lamentablemente no podemos aplicarle una transición como a cualquier otro elemento. Yo he intentado y no lo he logrado.
ok gracias
capo, un espectaculo tutorial, pero me gustaria que me ayudaras con un inconveniente que tengo, no puedo conseguir que mi contenedor me permita usar porcentaje en lugar de pixeles, asi se adapta a diferentes pantallas, podrias decirme como puedo hacerlo? o si tenes algún tutorial ya echo decirme. muchas gracias
saben porque no puedo quitar laesquina de el scrooll???
Carlos no me reconoce el -webkit-scrollbar que puede hacer..
utilizo mozilla y google chrome actuales...
Mozilla no soporta esta propiedad, en chrome es donde si te debería salir. Revisa bien el código, puedes compararlo con el mio que puse para descarga en la descripción del video.
cuando harás un video sobre como usar font awesome versión 5
Sabes como quitar las barras de scroll de abajo para que no hagan zoom y que quede en un tamaño fijo
Con Sass como seria ?
body
&:-webkit-scrollbar
width: 7px
algo asi o estoy mal?
Que extenciones tienes en Visual Studio?
De momento no tengo ninguna, solo el theme Ayu.
1:22 "Android para Chrome"
- FalconMasters
Hola disculpa como podría agregarle una imagen al scroll