1/12/12

[Tutorial]Dale a tu Scroll Bar un efecto kawaii

Hola no se si sera este el tuto que me pediste pero se me acumulan los tutos bueno espero que sea este el tuto que me pediste bueno lo que euiero esplicar es como cambiar tu Scroll Bar n.,n hay dos formas de cambiarlo una por color y otra con fondos os lo voy a esplicar todito n.n
Esto es la Scroll Bar




Forma en color
1.Ve a plantilla
 HTLM>>CTRL+F>>Buscar  ]]></b:skin>
Y lo pegamos arriba de ]]></b:skin>



::-webkit-scrollbar {
height: 12px;
width: 15px;
background: #FA58D0;}
::-webkit-scrollbar-thumb {
background: #00BFFF;-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;}
Editemos :3
Verde--Es el color de tu scroll bar
Azul--es el tipo de scroll bar

HTLM>>CTRL+F>>Buscar  ]]></b:skin>

Scroll Bar con fondos 

Y lo pegamos arriba de ]]></b:skin>
::-webkit-scrollbar {
height: 12px;
width: 15px;
background-image:url(URL Kawaii);
}
::-webkit-scrollbar-thumb {
background-image:url(URL Kawaii);
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
}
Editemos:
Rosa--La url del fondo kawaii
Azul--el tipo de scroll bar n.n 


Aqui los tipos de scroll bars


(esto es del blog de anniz)


  1. -Moz-border-radius: 5px; border-radius: 5px;
  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;
  3. -Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
  4. -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px; -Moz-border-left-bottomleft: 50px; border-bottom-left-radius: 50px;

Creditos
Anniz-blog

13 comentarios:

  1. ¡Gracias! La pondré cuando tenga tiempo.

    ResponderEliminar
  2. Waaa,que util^^ gracias:) por cierto,tienes dos premiso en mi blog,los estoy acabando,asi que si te metes y no están,es porque estoy en ello,pero para hoy los tendré^^
    Besitos de miel^^y me gusta mucho tu blog!!
    Alicia

    ResponderEliminar
  3. Respuestas
    1. sera ke tienes una plantilla clasica o lo hiciste mal

      Eliminar
    2. hola lorena :3
      yo tengo un truco cuando los gadgets html no me sirven :3
      Bueno Primero tienes que buscar ]]> despues e subiendo poco a poco haste encontrar el primer codigo que agregaste o hasta llegar a
      .mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
      )
      pegas el codigo de bajo de eso y listo ;3
      border-$startSide: 1px solid $(tabs.border.color);

      Eliminar
  4. Yo tengo Picture Window y no me funciona :$

    ResponderEliminar
    Respuestas
    1. pues eso no se como arreglarlo mmm no se x.x sorry

      Eliminar
  5. que feliz soy me salio!!!!! mil gracias por el tuto me encanto.Amo tu blog

    ResponderEliminar
  6. Hola! Gracias por el tuto, lo utilicé para un blog que estoy creando.

    Ja ne! ♥ (Muy bonito tu blog n.n)

    ResponderEliminar
  7. hola reina soy una principiante y si te digo la verdad no entiendo ni la mitad de las cosas que me dices jejej, pero voy cogiendo. ahora solo quiero saber que es un Scroll Bar y para que sirve. gracias y felicidades por tu blog

    ResponderEliminar
    Respuestas
    1. Hola lo primero gracias por visitarme y lo de que es una scroll bar tienes una imagen arriba que te dice lo que es esto es solo para decorarla y que no quede mal o fea :)

      Eliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com