Imprimir Página - ¿Cómo hago este efecto: con CSS, con javascript...?

Título: ¿Cómo hago este efecto: con CSS, con javascript...?
Publicado por: Linton 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:

(http://imageshack.us/a/img820/9163/76vi.jpg) (http://imageshack.us/photo/my-images/820/76vi.jpg/)

...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:

(http://imageshack.us/a/img842/2212/1cf2.jpg) (http://imageshack.us/photo/my-images/842/1cf2.jpg/)

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! :)

Título: Re: ¿Cómo hago este efecto: con CSS, con javascript...?
Publicado por: Shell Root 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

Título: Re: ¿Cómo hago este efecto: con CSS, con javascript...?
Publicado por: Linton en 2 Octubre 2013, 12:18 pm

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

Título: Re: ¿Cómo hago este efecto: con CSS, con javascript...?
Publicado por: #!drvy 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

<div id="pruebas">
  <ul>
    <li class="rojo"></li>
    <li class="amarillo"></li>
    <li class="azul"></li>
    <li class="verde"></li>
  </ul>
</div>

Código

#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.html

Saludos

Título: Re: ¿Cómo hago este efecto: con CSS, con javascript...?
Publicado por: Linton en 3 Octubre 2013, 08:35 am

¡¡Caramba, un millón de gracias!! ;-) :) ;-) ;-) ;-)

Título: Re: ¿Cómo hago este efecto: con CSS, con javascript...?
Publicado por: Linton 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! :)

Título: Re: ¿Cómo hago este efecto: con CSS, con javascript...?
Publicado por: #!drvy 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

Título: Re: ¿Cómo hago este efecto: con CSS, con javascript...?
Publicado por: Linton en 3 Octubre 2013, 17:29 pm

Ah bien, aclarado mi error, muchas gracias :)

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Linton en 1 Octubre 2013, 10:12 am