A Random Saturday CSS Challenge

[Merri]

Make [npm logo](https://npmjs.org/) in CSS only. The logo is very simple as it has only two colors and is practically pixel art.

**Easy mode**: use only one HTML element. You can use whatever HTML syntax you find useful for that one element. No images allowed.

**Hard mode**: do not use linear-gradient, box-shadow or text-shadow. Your HTML is limited to this:

Node Packaged Modules

My first attempt at hard mode: http://codepen.io/Merri/pen/ygsLf (works in Firefox, IE9+ and Opera 12. Chrome fails.)

[Senff]

> Make npm logo in CSS only.

Only CSS? Or is HTML allowed too.

[Merri]

@Senff: http://codepen.io/Merri/pen/kgfri

body:before {
color: #CB3837;
content: “██████████████████A █ █ █ █A █ █ █ █ █ █ █ █A █ █ █ █ █ █ █ █A █ █ █ █ █ █ █ █A █ █ █ █ █ █ █A ██████ ██████████A ████”;
display: inline-block;
font-family: monospace;
line-height: 1;
white-space: pre;
}

Easy mode, linear-gradient and some traditional stuff:

http://codepen.io/Merri/pen/IbwgF

[Author]

Posts