DEV Community

Marta Rey
Marta Rey

Posted on

CSS tiene planes para ti - Polaroid funcional con CSS y JavaScript

Cuando acabé el bootcamp tenía ganas de hacer cosas, no sabía qué cosas, pero cosas. Me pasé varias semanas enganchadísima a Hackerrank y sus retos de código: los primeros días es un tormento (al menos para mí lo fue), pero poco a poco vas cogiéndole el punto, vas ganando medallitas, te sueltan confetti para celebrar tus avances y es un mundo de fantasía del que no quieres salir.

Pero un día por algún motivo entré en Codepen, descubrí la pestaña de "trending" (esa pestaña para mí ahora mismo es un pozo donde tiro horas del día al nivel "lupa de Instagram"), y vi la primera Polaroid hecha en CSS. Aluciné. Y después de alucinar me apunté lo de la polaroid para que no se me olvidara hacerla algún día con tanto alucine.

Total, que esta semana me encontré un pen de hace meses con una prueba rápida de cómo abrir la cámara y sacar fotos utilizando HTML y JavaScript y, aun siendo millennial y junior y todo, me di cuenta de que era el momento perfecto para intentar LA POLAROID (siento el grito, de alguna forma tenía que enfatizarlo después de la chapa introductoria).

CSS Polaroid screenshot

A parte de estar tremendamente emocionada con esta creación por el resultado final en relación a mis expectativas, tengo que decir que ha sido uno de los proyectos CSS más agradecidos que he hecho hasta el momento. Obviamente me ha llevado su buen tiempito (demasiados detalles en la foto para tan poca experiencia en CSS), pero para nada ha sido la tortura que me había imaginado.

Tanto es así que me he permitido el lujo de volver a hacer una cheat sheet con las partes que me resultan más complicadas o "difíciles de simplificar":

CSS Polaroid cheat Sheet

Dejo por aquí el link a Codepen donde está todo el código que he usado para hacerla: https://codepen.io/martreyz/pen/ExNvbGd

Cualquier feedback (si es con amor o gatos) es bien recibido! :)

Top comments (0)