Autor
|
Tema: ¿Cómo hago este efecto: con CSS, con javascript...? (Leído 3,541 veces)
|
Linton
Desconectado
Mensajes: 239
|
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
|
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
Mensajes: 239
|
O sea que entonces con CSS, sin javascript, ¿no? ¡Gracias!
|
|
|
En línea
|
|
|
|
#!drvy
|
Suponiendo que tienes varias imágenes (con fondo transparente) como la ultima que has puesto... con z-index y margin negativo es facil. <li class="amarillo"></li>
#pruebas {} #pruebas ul {list-style:none;} #pruebas ul li { display:inline-block; width:300px; height:393px; margin-left:-200px; position:relative; transition:margin 0.2s ease-in; } #pruebas ul li:hover {margin-left:0 !important; cursor:pointer;} .rojo {margin-left:0px !important; z-index:900; background:url(rojo.png);} .amarillo {z-index:800; background:url(amarillo.png);} .azul {z-index:700; background:url(azul.png);} .verde {z-index:600; background:url(verde.png);}
Aquí tienes un demo: http://www.drvy.net/cnt/demo/piezas.htmlSaludos
|
|
|
En línea
|
|
|
|
Linton
Desconectado
Mensajes: 239
|
|
|
|
En línea
|
|
|
|
Linton
Desconectado
Mensajes: 239
|
Una cosa: he mirado el código, y hay bastante javascript. ¿Entonces ambas cosas, CSS y javascript? ¡Gracias de nuevo!
|
|
|
En línea
|
|
|
|
#!drvy
|
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
Mensajes: 239
|
Ah bien, aclarado mi error, muchas gracias
|
|
|
En línea
|
|
|
|
|
Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
¿Como hago este efecto?
Diseño Gráfico
|
Freeze.
|
5
|
4,005
|
24 Marzo 2008, 13:45 pm
por Freeze.
|
|
|
Como hago este efecto??
Diseño Gráfico
|
Hades_Hell
|
3
|
3,203
|
24 Marzo 2009, 03:42 am
por Darioxhcx
|
|
|
Como hago este efecto.
Diseño Gráfico
|
DaRk_EyeS
|
6
|
3,902
|
9 Abril 2009, 19:09 pm
por Yasmesita
|
|
|
Cómo hago este efecto???
« 1 2 3 »
Diseño Gráfico
|
Hades_Hell
|
21
|
16,697
|
10 Abril 2009, 07:10 am
por Hades_Hell
|
|
|
[Pregunta]: ¿Cómo hago un htmlspecialchars_decode usando javascript?
Desarrollo Web
|
Leguim
|
1
|
3,231
|
7 Agosto 2021, 11:09 am
por TickTack
|
|