12 de febrero de 2014
Personalizando la Scrollbar
0 message(s) / comment ?★☆
hola nenis. hoy traigo un tutorial que es muy sencillín. hoy les enseñaré a
personalizar el scrollbar de 2 maneras que les parece ^^? ¿pero qué es la scrollbar?
es la barra de desplazamiento. aquí una imagen:
(click para ver en tamaño completo)
Todos la tenemos de ese modo↑pero si sigues las instrucciones de este tutorial,
conseguirás una scrollbar muy cute.
Scroll Bar con 2 colores:
Para personalizarla, debes ir a Diseño
PlantillaEditar HTMLPresiona CNTRL+F y buscamos:
PlantillaEditar HTMLPresiona CNTRL+F y buscamos:
]]></b:skin>
Justo arriba de eso, pegamos:
Ahora, donde dice background: #FA58DO, (que es el color en HTML) escribe el color que
quieras. y donde dice background: #00BFFF, escribe otro color que te guste. Yo lo dejé del modo en que está porque me gustaba, pero lo voy a cambiar. En donde dice -Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px, puedes cambiar la forma del scrollbar. Si la quieres más curva... bueno, después del segundo scrollbar, pondré algunas formitas ;)
Scroll Bar con 2 fonditos o backgrounds:
Lo mismo, nos vamos a:
Diseño
PlantillaEditar HTMLPresiona CNTRL+F y busca:
PlantillaEditar HTMLPresiona CNTRL+F y busca:
]]></b:skin>
Y pegamos el
siguiente código:
En donde dice -Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px;
-Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px; va la forma que quieras para tu scrollbar.
Aquí algunas formas:
Forma 1:
-Moz-border-radius: 5px; border-radius: 5px;
Forma 2:
-Moz-border-radius-bottomRight: 50px 25px; border-bottom-right-radius: 50px 25px; -Moz-border-radius-topLeft: 50px 25px; border-top-left-radius: 50px 25px;
Forma 3:
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
Forma 4:
-Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px; -Moz-border-left-bottomleft: 50px; border-bottom-left-radius: 50px;
Ahora si le quieres agregar un Borde a la forma del scroll bar como este ejemplo:
(así está en mi blog :)
Si quieres que te quede así, solo tienes que pegar este código abajo de ::-webkit-scrollbar-thumb {
border: 2px dashed #190707;
Donde dice dashed, puedes cambiarlo por dotted, solid, grove y otros en esta imagen:
Espero que hayan disfrutado del tuto eso fue todo!!! XD
Etiquetas: #Tutoriales, ♥HTML, ♥Recursos, ♥todo para tu blog
Name : Josefina
Location : Argentina
Sexuality : idk, i'm doubting about it lmao
Fandom: anime, imagine dragons
