22/10/14

[Tutorial]Scroll Bar Efecto Bisel!



Holaaaque tal??? espero que fenomenalya veis como os dije para compensaros que no publique ni el viernes ni el sábado el tutorial y los recursos, hoy y mañana tendréis las dos entradas que no hiceimageNo tengo nada mas que decir bueno que todavía no tengo bien clara la temática del concursoaparte de esto tengo que decir que voy a hacer un especial cuando lleguemos a los 1.000 subscriptoresya se ya se lo veo muy muy lejos pero podemos conseguirloimage
Otra cosa que tengo que decir es que participo en este sorteo


Se puede colocar de dos formas

  1. Forma 1:En un gadget
  • Diseño
  • Añadir gadget jabascrip

<style>
::-webkit-scrollbar{ width:7px;height:7px;} /* Largura da barra */
::-webkit-scrollbar-track-piece{background-color:#fff;} /* Fondo de la barra larga */
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#6b8bba; /* Estilos da barra vertical */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#6b8bba; /* Estilos de la barra horizontal */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
</style>

  1. Forma 2:Incrustada en el código HTLM
  •  Plantilla
  • Editar HTLM 
  • Crtlr+F & buscar & colocar antes de ]]></b:skin> 

::-webkit-scrollbar{ width:7px;height:7px;} /* Largura da barra */
::-webkit-scrollbar-track-piece{background-color:#fff;} /* Fondo de la barra larga */
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#6b8bba; /* Estilos da barra vertical */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#6b8bba; /* Estilos de la barra horizontal */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
}
Esas son las dos formas de colocarlo si os falla una la ponéis de la otra forma y solucionado <3 
Espero que este tutorial os haga gustado es un tutorial muy muy fácil que deja bonitos resultados un beso enorme desde aquí :D y que paséis una gran semana


DUDAS & MAS

10 comentarios:

  1. se ve super la nueva scroll bar esta muy linda :), gracias

    ResponderEliminar
  2. Muchas gracias por el tuto, es un efecto muy bonito para el scrolll bar.

    ResponderEliminar
  3. Hola me gusta el tuto pero no me sirve el truco b skin ¿se puede remplezar por otro? Gracias :D

    ResponderEliminar
  4. Gracias por el tutorial!! se ve muy bonito ese scroll.
    Besos

    ResponderEliminar
  5. Arigato!!! amiga este gatget es muy mono muchas gracias por el tuto

    ResponderEliminar
  6. Muchas gracias por el tutorial :)
    Saludos.

    ResponderEliminar
  7. ¡Me encanta! Ya lo tengo colocado en mi blog :) Muchas gracias por compartirlo.

    Un saludo.

    ResponderEliminar

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