Grow your CSS skills. Land your dream job.

A Random Saturday CSS Challenge

  • # May 11, 2013 at 9:42 am

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

    # May 11, 2013 at 10:23 am

    > Make npm logo in CSS only.

    Only CSS? Or is HTML allowed too.

    # May 11, 2013 at 10:59 am

    http://codepen.io/scottnix/pen/gexdj

    Easy mode – Box Shadow Method

    Elapsed time 26 min.

    Whoops, messed up, fixing… [fixed]

    # May 11, 2013 at 12:57 pm

    @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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".