Resultados 1 al 7 de 7

Tema: Resaltar elemento sin mover elementos contiguos

  1. #1
    Pajarito Nuevo Avatar de clockwork
    Fecha de ingreso
    08 Nov, 09
    Mensajes
    116

    Resaltar elemento sin mover elementos contiguos

    Estimados :

    Quiero ver la forma de que al pasar el mouse sobre un elemento ( imaginense una nube de tags ) de texto, pueda resaltar este, aumentando su tamaño y agregando otras propiedades ( sombra por ejemplo ). todo esto sin mover el resto de las palabras.

    Cuando agrando un elemento mediante CSS o animandolo con jquery o html, este hace que el resto de las palabras fluyan con respecto al tamaño, y lo que quiero es que el elemento se superponga al resto, dando un efecto de profundidad.

    cualquier dato se agradeceria
    Última edición por clockwork; 22/11/2012 a las 15:23

  2. #2
    I r srs Avatar de Serious Cat
    Fecha de ingreso
    25 Jul, 07
    Ubicación
    Concepción
    Mensajes
    1,135

    Re: mover a foro webmaster porfavor! - Resaltar elemento sin mover elementos contiguo

    encerrando la palabra en un span, darle position: absolute y ahi juegas con los margin, en jquery se hace super facil, pa la sombra con text-shadow

  3. #3
    pajarón nuevo Avatar de Monibal2
    Fecha de ingreso
    15 Jun, 07
    Ubicación
    Viña del Mar
    Mensajes
    1,011

    Re: mover a foro webmaster porfavor! - Resaltar elemento sin mover elementos contiguo

    Podrias usar css, creo que es la alternatíva de mejor rendimiento.

    hay propiedades que se dan cuando el mouse está sobre ellas, por ejemplo:
    Código:
    a:hover
    { 
    background-color:yellow;
    }
    Aqui un link de ejemplo, y aqui un demo

    Dentro de esas propiedades css les puedes dar sombra, cambio de color, cambio de tamaño de letra, todo con las propiedades CSS.

    Código:
    a:hover
    { 
    font-size: 120%;
    font-weight:bold;
    text-shadow: 0.1em 0.1em 0.2em black;
    }
    Lo que no estoy seguro es si le sirve a todas las etiquetas, pero googlea un poco, si tienes mas dudas te ayudo más

  4. #4
    Desarrollador Avatar de waiflih
    Fecha de ingreso
    27 Jul, 08
    Ubicación
    Santiago
    Mensajes
    551

    Re: mover a foro webmaster porfavor! - Resaltar elemento sin mover elementos contiguo

    Como dice Serious Cat, cada uno de los elementos déjalos con position absolute, con eso no se moveran. Lo que tienes q recordar es que al hacer esto, al padre de esos elementos tienes q dejarlo con position:relative, para que los hijos se posicionen en forma absoluta en referencia al padre
    W̢͎̳̞̲͈̪̳̻ͮͩȁ̟̳ͬ̔͒̈́ͦ͠i̞̤̝̟ͫ̽̂̈́ͪ͐͘f͕͐͑ͪ͐ͦ͋ͮ̅l͚̗̎ͫ̌ ̙î̗̬͓͍͍̳̥͆̕͠h

  5. #5
    pajarón nuevo Avatar de Monibal2
    Fecha de ingreso
    15 Jun, 07
    Ubicación
    Viña del Mar
    Mensajes
    1,011

    Re: mover a foro webmaster porfavor! - Resaltar elemento sin mover elementos contiguo

    Pucha la lesera, dando una releída me doy cuenta del meollo del asunto, los dos cumpitas están bien, yo malentendí el problema (estoy con los cables cruzados, no se que diablos me pasa)

  6. #6
    Usuario Avatar de xblitzk
    Fecha de ingreso
    19 May, 11
    Ubicación
    Santiago
    Mensajes
    310

    Re: Resaltar elemento sin mover elementos contiguos

    Deberia funcionar con z index en hover, mira este ejemplo(aunque no es en hover)

    CSS z-index property

  7. #7
    Pajarito Nuevo Avatar de clockwork
    Fecha de ingreso
    08 Nov, 09
    Mensajes
    116

    Re:Resaltar elemento sin mover elementos contiguo

    Cita Iniciado por waiflih Ver mensaje
    Como dice Serious Cat, cada uno de los elementos déjalos con position absolute, con eso no se moveran. Lo que tienes q recordar es que al hacer esto, al padre de esos elementos tienes q dejarlo con position:relative, para que los hijos se posicionen en forma absoluta en referencia al padre
    Bingo. me ayudo todo lo que me dijieron.

    Muchas gracias a todos, aca el pequeño ejemplo de lo que queria lograr.
    Última edición por clockwork; 26/11/2012 a las 21:10

Etiquetas para este tema

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •  
*