Sabemos que consejos para blogs hay muchos por Internet. Por eso Blogconsejo trabaja directamente en lo que tu quieras. Si quieres que escribamos sobre algún detalle, consejo o modificación para tu blog, ¡¡Escríbenos!!

20 jun 2009

Efecto movimiento en el Header

Irene nos consultó a través del correo lo siguiente:

"Me gustaría saber como se logra el efecto para que el header se mueva cada vez que apoyas el cursor encima"

El efecto se logra de una manera muy sencilla, ya que los cambios que tenemos que hacer en nuestra plantilla, son mínimos.

Si os habeis fijado en los blogs de Yenodeblogs, en todos se ha incluido ese efecto, pero, además de afectar al header, afecta a los enlaces del blog (Titulos de las entradas, enlaces a las entradas, links, etc.)


En primer lugar, buscaremos donde se encuentra el código que afecta a los links.
En la mayoría de las plantillas lo encontraremos en


/* Links

----------------------------------------------- */


Una vez localizado, nos colocaremos después de a:hover {


Y justo ahí es donde debemos añadir el código que definirá el movimiento de nuestros links. Para ello, debemos elegir las direcciones en las que queremos que el movimiento se realice. Por ejemplo, en Blogconsejo, el efecto va hacia la izquierda y hacia abajo.

position: relative;


Y ahora añadiremos los valores que le daremos al movimiento. Escribiendo en una segunda linea el valor de "top" , "left", "bottom" o "right"

Con top estamos añadiendo el movimiento hacia abajo.
Con left hacia la derecha.
Si queremos que el efecto sea hacia arriba pondremos bottom.
Y si lo queremos hacia la izquierda pondremos right.

Además podremos elegir lo marcado que queremos que se vea este efecto. En nuestro caso el valor que le hemos dado es de 1px, pero si quieres que el efecto se note más, deberas darle un valor de 2px, o más.


Un ejemplo de esto seria:
top:1px;


- En el caso de blogconsejo, el movimiento se realiza con top y con left. Debeis tener en cuenta que si poneis top, no podeis poner bottom, y si poneis left no podeís poner righ, ya que no existiría movimiento alguno.

- Si quereis que el movimiento solo afecte al header, debereis realizar los mismos pasos pero en el codigo que afecta al header :)

- Solo será visible en el header si la cabecera está incluida en el elemento de la cabecera que nos muestra en - Elementos de Página-, si la imagen de nuestra cabecera está incuida en el código de la plantilla no se verá el movimiento.

4 comentarios:

  1. Un detallito más para mejorar nuestros blogs :))
    Gracias Uve ^^
    También gracias a Irene por solicitarlo.

    ResponderEliminar
  2. Veo que ya lo tienes puesto en tu blog Emma ^^
    Además le has añadido un color diferente para cuando pasas el ratón por encima de esos enlaces. Genial :)

    Si quieres que el movimiento solo se vea como lo tienes, hacia abajo... el left que tienes sin valor puedes eliminarlo :)

    Besitoss y me alegro de que te haya sido util la entrada ^^

    ResponderEliminar
  3. Dicho así suena un poco raro que poniendo "top" el desplazamiento sea hacia abajo, y con "bottom" hacía arriba.

    Ésto se debe a que lo que se está haciendo realmente es añadir un margen (o un padding, no lo tengo muy claro), por lo que el movimiento siempre es hacia el lado contrario al que se le añaden esos píxeles.

    Así que os habéis equivocado ligeramente , con left el movimiento es hacia la derecha y con right hacia la izquierda (si, acabo de ojear vuestro código de Blog Consejo para confirmarlo)

    Saludos!

    ResponderEliminar
  4. Corregido.
    Olvidé editar algunos datos al copiar los valores de otra entrada donde sí se cumplen las posiciones.

    Saludos

    ResponderEliminar

Recuerda que puedes ponerte en contacto con nosotros directamente mediante otras formas de contacto.