elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ¿Cómo hago este efecto: con CSS, con javascript...?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ¿Cómo hago este efecto: con CSS, con javascript...?  (Leído 3,523 veces)
Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
¿Cómo hago este efecto: con CSS, con javascript...?
« en: 1 Octubre 2013, 10:12 am »

Estoy diseñando una web de telas y quiero aprovechar los muestrarios que tienen los sastres y diseñadores para que el cliente elija las telas, esos bordes dentados son muy habituales, a los usuarios les resultará una visión muy familiar.

Mi idea es que cada gama, por ejemplo la siguiente:


...tenga asociada una ficha que aparezca con hover. Igual que en un menú, el retal donde se ponga el cursor tendrá un efecto que lo resalte (quizás aparezca un marco, o las restantes piezas se difuminarán un poco), y al pulsar quedará visible la pieza entera, como abajo:


Al lado aparecerá un tooltip con el nombre del color, tipo de tejido, gramaje, precio por metro, etc. Quizás haga una ficha infomativa reuniendo imagen y texto para cada modelo (¡glub!).

Mi pregunta es: ¿cómo os parece que debería hacerlo, con tooltips mediante javascript, directamente con CSS...?

¡Muchas gracias de antemano por la ayuda!  :)


En línea

Shell Root
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.724


<3


Ver Perfil WWW
Re: ¿Cómo hago este efecto: con CSS, con javascript...?
« Respuesta #1 en: 1 Octubre 2013, 21:25 pm »

Se puede generar la imagen con dicho borde, y tener una imagen en transparente resaltando los bordes y en la clase de css llamarlo en el :hover

No se si me explique bien :p


En línea

Te vendería mi talento por poder dormir tranquilo.
Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
Re: ¿Cómo hago este efecto: con CSS, con javascript...?
« Respuesta #2 en: 2 Octubre 2013, 12:18 pm »

O sea que entonces con CSS, sin javascript, ¿no?  :) ¡Gracias!
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: ¿Cómo hago este efecto: con CSS, con javascript...?
« Respuesta #3 en: 2 Octubre 2013, 13:21 pm »

Suponiendo que tienes varias imágenes (con fondo transparente) como la ultima que has puesto... con z-index y margin negativo es facil.

Código
  1. <div id="pruebas">
  2.  <ul>
  3.    <li class="rojo"></li>
  4.    <li class="amarillo"></li>
  5.    <li class="azul"></li>
  6.    <li class="verde"></li>
  7.  </ul>
  8. </div>

Código
  1. #pruebas {}
  2. #pruebas ul {list-style:none;}
  3. #pruebas ul li {
  4.   display:inline-block;
  5.   width:300px; height:393px;
  6.   margin-left:-200px;
  7.   position:relative;
  8.   transition:margin 0.2s ease-in;
  9. }
  10. #pruebas ul li:hover {margin-left:0 !important; cursor:pointer;}
  11.  
  12. .rojo {margin-left:0px !important; z-index:900; background:url(rojo.png);}
  13. .amarillo {z-index:800; background:url(amarillo.png);}
  14. .azul {z-index:700; background:url(azul.png);}
  15. .verde {z-index:600; background:url(verde.png);}

Aquí tienes un demo: http://www.drvy.net/cnt/demo/piezas.html

Saludos
En línea

Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
Re: ¿Cómo hago este efecto: con CSS, con javascript...?
« Respuesta #4 en: 3 Octubre 2013, 08:35 am »

¡¡Caramba, un millón de gracias!!  ;-) :)  ;-) ;-) ;-)
En línea

Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
Re: ¿Cómo hago este efecto: con CSS, con javascript...?
« Respuesta #5 en: 3 Octubre 2013, 08:42 am »

Una cosa: he mirado el código, y hay bastante javascript. ¿Entonces ambas cosas, CSS y javascript?

¡Gracias de nuevo! :)
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: ¿Cómo hago este efecto: con CSS, con javascript...?
« Respuesta #6 en: 3 Octubre 2013, 16:20 pm »

javascript ? donde ? Si dices el "demo" eso no lo mires.. es cloudflare que agrega automáticamente google analytics. El "código" es lo que he puesto aquí en el post.

Saludos
« Última modificación: 3 Octubre 2013, 16:23 pm por @drvymonkey » En línea

Linton

Desconectado Desconectado

Mensajes: 239



Ver Perfil
Re: ¿Cómo hago este efecto: con CSS, con javascript...?
« Respuesta #7 en: 3 Octubre 2013, 17:29 pm »

Ah bien, aclarado mi error, muchas gracias  :)
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
¿Como hago este efecto?
Diseño Gráfico
Freeze. 5 4,002 Último mensaje 24 Marzo 2008, 13:45 pm
por Freeze.
Como hago este efecto??
Diseño Gráfico
Hades_Hell 3 3,202 Último mensaje 24 Marzo 2009, 03:42 am
por Darioxhcx
Como hago este efecto.
Diseño Gráfico
DaRk_EyeS 6 3,892 Último mensaje 9 Abril 2009, 19:09 pm
por Yasmesita
Cómo hago este efecto??? « 1 2 3 »
Diseño Gráfico
Hades_Hell 21 16,655 Último mensaje 10 Abril 2009, 07:10 am
por Hades_Hell
[Pregunta]: ¿Cómo hago un htmlspecialchars_decode usando javascript?
Desarrollo Web
Leguim 1 3,206 Último mensaje 7 Agosto 2021, 11:09 am
por TickTack
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines