Grow your CSS skills. Land your dream job.

A Blue Box

Published by Chris Coyier

A little meme went around CodePen the other night. A Blue Box. I'm not sure how it started, but lots of people started posting code of different ways to draw a blue box. It's weird, it's funny, but it's also rather amazing there is as many ways as there are for doing something so simple.

Let us count the ways:

Pretty wild hey? Surely this isn't a comprehensive collection of methods either (different image formats, dataURI's, etc). Are all of them good to have and know about it? Does this make it intimidating for beginners or can they safely ignore many of them and learn them in time as needed?

Comments

  1. name (required)
    Permalink to comment#

    waste of space

  2. Cp
    Permalink to comment#

    Waste of a comment ^^

    It’s fun, it’s creative, you’re missing the point, chump.

  3. Permalink to comment#

    That’s hilarious. What an unexpected way for something like Codepen to be used. If I tried to explain to a non-web friend why this is funny it would sound so stupid, haha.

  4. Maegashira
    Permalink to comment#

    What, no Flash?

  5. Permalink to comment#

    and why only 1 blue box? xD ;-)
    http://codepen.io/Kseso/pen/kDzoa

  6. blue box blue screen of death

  7. It pretty funny, but according to me its a confusion. I think what saves them is that they in most cases only know one language may be css is the right one for them,

  8. Joe
    Permalink to comment#

    How about spamming the Google logo in the background. The google logo apparantly has a slight gradient, though. http://codepen.io/anon/pen/twsyA

  9. Joe
    Permalink to comment#

    Links are blue by default: http://codepen.io/joseph_rissler/pen/LhkFp

  10. Lucian Zamfira
    Permalink to comment#

    html {
    border-top: 40em solid blue;
    margin: 10% 20%;
    }

  11. Lisa
    Permalink to comment#

    What about flex-box?

    http://codepen.io/lemnis/pen/erHis

  12. Permalink to comment#

    Oh, come on, people!

    Multi-column rule FTW! :)

  13. Gabriel Valfridsson
    Permalink to comment#

    Haven’t seen this one yet

    You’ll have to click it once to show it in edit mode but works on load in full page mode

  14. metai
    Permalink to comment#

    A blue box becomes the JAPH of 2013. Who would’ve thunk.

  15. Permalink to comment#

    Overlapping white slides http://cdpn.io/ekAov

    Box height with padding-bottom percentage http://cdpn.io/htnCa

    Funny!

  16. Permalink to comment#

    Yo Dawg, I herd you like blue boxes… http://cdpn.io/sycLd

  17. Permalink to comment#

    I love the large dash character, good play!

  18. Arjun
    Permalink to comment#

    Web designers too need memes!

  19. Autofocus input edition: http://codepen.io/HugoGiraudel/full/ivcbl. Not working in editor mode though. :(

  20. Permalink to comment#

    What? No love for ASCII?

  21. Permalink to comment#

    Nothing at HTML, only this at CSS

    1) Only border

    body {
    border: 100px solid blue;
    }

    2) And “without blue”:

    html {
    border: 200px solid white;
    padding-bottom: 30%;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYPj/HwADBwIAcbCYagAAAABJRU5ErkJggg==);
    }

  22. Merri
    Permalink to comment#

    SALE! Ten in one pen!

  23. Ryan McKay
    Permalink to comment#

    Insert blue-box example here using mp4/ogv/webm video loops
    :)

  24. Guanting
    Permalink to comment#

    done, use css content property. lol

  25. Permalink to comment#

    While it would be great to know all of these by memory and be able to apply techniques as needed, I don’t think it is necessary for a beginner. They can just learn as they go and need.

  26. Daniel
    Permalink to comment#

    You missed the one in old versions of Windows – where the whole screen goes blue for no apparent reason :).

  27. What about @font-face vector icon fonts?

    .myBox {
    font-family: ‘fontello';
    color: blue;
    }

    .boxOrigin:after {
    content:’';
    font-family: ‘fontello';
    color: blue;
    }

    .boxOrigin:beefore {
    content:’';
    font-family: ‘fontello';
    color: blue;
    }

  28. .boxOrigin:before*……..

  29. Elias
    Permalink to comment#

    Amazing

  30. Mike
    Permalink to comment#

    Why not use yellow to get blue…(with a little bit of filter sprinkled on)

    http://codepen.io/pxfunc/pen/CdgsI

  31. noahgelman
    Permalink to comment#

    How about a div with some very big letters? Mess with the indentation and letter-spacing and BAM, you got yourself a blue rectangle.

  32. Permalink to comment#

    Thanks :)

  33. Permalink to comment#

    There’s also the very practical use of merging two triangles.

    I dare someone to merge four triangles.

  34. Permalink to comment#

    Probably done already! Bit late to the game..

  35. Kim
    Permalink to comment#

    Coming from a background in desktop programming where you normally value clean and lean APIs, I some times find it hard to deal with the hackish and frankensteinish nature of web development.

    Don’t mean to spoil the christmas spirit here, just thought i’d ask if web developers see it as problematic (or maybe a benefit) that there are so many ways of achieving the same effect?

  36. Francky
    Permalink to comment#

    Not seen yet: http://codepen.io/francky/full/eCoKL.

    @post December 6, 2013
    Illustration with a demo: merging of 4 triangles in a square http://clba.nl/bluebox-demo-4triangles-merging.htm

  37. Francky
    Permalink to comment#

    Another blue box story (CSS only): http://codepen.io/francky/full/birzG

  38. Kim
    Permalink to comment#

    Tribute to Ralp Barclay :)

    html { 
       width:100%; 
       height:100%; 
       background:url('http://upload.wikimedia.org/wikipedia/commons/5/5f/Blue_Box_in_museum.jpg') center center no-repeat;
    }
    

    http://codepen.io/anon/pen/bnAmx

  39. Horst
    Permalink to comment#

    Maybe just include a picture “bluebox.jpg”, which is actually a blue box?

  40. These sort of things drive me insane :)

    I’ll stick to creating a small blue JPG and resizing it I think. Aside from it being a separate entity, it’s also smaller in filesize than some of the code provided in the comments!

    I just love how being a web developer gives you the need to be able to create things in 2000 ways though :D

    • francky
      Permalink to comment#

      “These sort of things drive me insane :)”

      Ah, I see. Guess the smallest in file size is just a background-color (and no separate http-request for a jpg). Like the original blue box ! ;-)

This comment thread is closed. If you have important information to share, you can always contact me.

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