Selector de portadas, o como hacer que las portadas se luzcan

El sitio web hecho por encargo de una querida amiga porque la echaron a patadas de Wattpad y necesitaba donde colgar su material subido de todo (Kahime, te quiero, es con cariño ❤) necesitaba algo mas para llamar la atención inmediatamente desde la misma pagina de inicio, pero no sabiamos que añadirle para lograr este cometido hasta que…

© 2017 Kahime. Imagen con autorización de la autora.

… esta imagen fue hecha y subida a Facebook, a modo de imagen de portada, por la misma artista, y fue entonces cuando se encendio el foco, ¡era eso!, precisamente eso, lo que necesitabamos en la pagina principal de la web, pero obviamente en HTML y CSS, y no como imagen, para que las personas pudieran hacer click en cada portada por separado.

Entonces, manos a la obra, Codepen listo para recibir código, Bruno Mars sonando de fondo, y a recrear esa imagen en HTML y CSS.

Primero, el sitio web que ya habiamos preparado, esta usando un diseño basado en bootstrap, asi que decidi no reinventar la rueda y apoyarme de eso mismo. Sino saben lo que es bootstrap, basicamente es un conjunto de herramientas que facilita el desarollo de un diseño web ya que contiene una extensiva cantidad de clases para realizar grillas, formularios, botones, etc, puede ver esa maravilla en su sitio web oficial.

Trabajamos primero en el codigo HTML, y para el uso correcto de bootstrap, necesitamos un contenedor grande, usando la clase .container, luego un contenedor para la fila en si misma, usando la clase .row y luego cada uno de los enlaces con la clase .col-2. Pueden verlo a continuación.

[codepen_embed height=”460″ theme_id=”light” slug_hash=”jBBymW” default_tab=”html,result” user=”seba”]See the Pen <a href=’http://codepen.io/seba/pen/jBBymW/’>Test Cover</a> by Sebastian Contreras (<a href=’http://codepen.io/seba’>@seba</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Ok, tenemos las imagenes, pero se ven muy grandes, y se sobreponen unas a otras, ¿que se hace ahora? Facil amigo, primero vas a decirle a nuestro querido sistema, que TODAS las imagenes dentro del contenedor #comics deben ocupar el ancho del mismo.

[codepen_embed height=”160″ theme_id=”light” slug_hash=”LWWxQB” default_tab=”css,result” user=”seba”]See the Pen <a href=’http://codepen.io/seba/pen/LWWxQB/’>Test Cover (2/x)</a> by Sebastian Contreras (<a href=’http://codepen.io/seba’>@seba</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Mucho mejor, pero ahora vemos otro problema, las imagenes estan muy separadas entre si, esto se debe a un asunto especifico de bootstrap, en que cada columna tiene un relleno (padding) de 15px por lado, haciendo que cada imagen este separada por 30 pixeles entre si, esto es demasiado para este ejemplo, asi que vamos a sobreescribir esta propiedad.

[codepen_embed height=”230″ theme_id=”light” slug_hash=”qrrRYy” default_tab=”css,result” user=”seba”]See the Pen <a href=’http://codepen.io/seba/pen/qrrRYy/’>Test Cover (3/x)</a> by Sebastian Contreras (<a href=’http://codepen.io/seba’>@seba</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Genial, pero las portadas en la imagen a reproducir estan ligeramente giradas, ¿eso se puede hacer con CSS? Personas, gente, amigos, con ustedes la propiedad transform que permite no solo rotar, sino que otras maravillas mas que no toca comentar ahora mismo. (de paso, le añadimos un poco de relleno arriba y abajo al contenedor, para que se aprecie mejor el efecto)

[codepen_embed height=”304″ theme_id=”light” slug_hash=”KWWaBN” default_tab=”css,result” user=”seba”]See the Pen <a href=’http://codepen.io/seba/pen/KWWaBN/’>Test Cover (4/x)</a> by Sebastian Contreras (<a href=’http://codepen.io/seba’>@seba</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Y basicamente allí esta, ahora pueden darle estilos a su gusto, cambiar colores, añadirle otras propiedades :hover (cuando el mouse esta encima del elemento), etc, etc, el cielo es el limite y no entrare en detalles sobre los cambios para este diseño en particular, porque bueno, la idea es que se les ocurran ideas bonitas a ustedes 😀

Reemplazamos las portadas por las definitivas, añadimos un poco de color y magía (intenten pasar el mouse sobre las portadas) (si, no es magia, lo se ❤)

[codepen_embed height=”264″ theme_id=”light” slug_hash=”NppdON” default_tab=”result” user=”seba”]See the Pen <a href=’http://codepen.io/seba/pen/NppdON/’>Test Cover (FINAL)</a> by Sebastian Contreras (<a href=’http://codepen.io/seba’>@seba</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

© 2017 Kahime. Portadas utilizadas con autorización de la autora.

Por ultimo lo integramos a la web, y ¡ta-dah! Pueden verlo funcionando en xkahime.com

Personalmente, se que no soy el mejor enseñando o dando explicaciones, pero espero que alguien si entendiera algo de todo lo que escribi, y le sirva para algun proyecto futuro. El codigo de los ejemplos se entrega “como esta” y si tienen problemas integrandolo en sus locuras, mucho animo y suerte, google es su mejor amigo ❤.