Email Camera

In 1998, Nintendo released the Game Boy Camera. It was a cartridge mounted with a digital camera. It could take pictures in four levels of grey with a resolution of 128 × 112 pixels. And it came complete with games, filters, and was compatible with the Game Boy Printer. The Game Boy Camera turned any Game Boy into the ultimate selfie machine.

It’s a dynamic image colorizing demo that uses the system color picker and lets you change the color of a car in a picture. And it doesn’t use any JavaScript. This is just raw HTML and CSS. And it’s possible thanks to the following element.

What’s great about color input types in HTML is that it uses your system color picker. And browsers usually give you a small preview of the color chosen.

Using a little bit of CSS and proprietary pseudo selectors like ::-webkit-color-swatch and ::-webkit-color-swatch-wrapper, we can remove borders and paddings around the <input>. Then using a bit more styles, we can size this input full screen. And then we can place the image below it. And using the CSS mix-blend-mode:hue; property, we can achieve the desired effect.

What has any of this to do with emails and the Game Boy Camera?

Well, turns out we can achieve something quite similar using the following element.

A file input lets you upload files on the Web. And there are two things especially great about it:

So again, using CSS and proprietary selectors like ::-webkit-file-upload-button, we can hide the default “Choose file” button, crop the input to show only the image, and use a CSS transform to make it much bigger.

Related posts:

The man smirked creepily at the crowd while being put in the cop car. He knew everyone was staring. He knew what he did would change his life forever. But he did not care. Sitting in the cop car…

Parenting is hands down the hardest job there is. Everybody has a good sense of what to do or what to say to their kids but no one truly has the right answer. Kids these days grow up under a…

I have the privilege of hosting Avi (VP — Data Sciences, AI & ML, InMobi), Hong Ting (CEO and Cofounder, Botbot.AI) and Kenny (Head of R&D Singapore, DataRobot) during the recent Tech in Asia…