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:
- You can create a
<div>and style it with CSS. Immortalized here by Tim Holman. - But CSS is old school right? You could use Sass to help you write it.
- But to be totally hip you would make a @mixin in SCSS that you could call.
- It wouldn’t have to be a
<div>either, it could be a<table>(or literally any other HTML element) and it could have the styles inlined directly on the element. - Or you could not even use HTML at all but just a pseudo element on the implied body or simply a border on the implied root.
- You could even skip CSS of any kind entirely going for spacing via HTML elements and old school attributes.
- Maybe a giant dash character?
- CSS gradients could draw a box if you have color stops with no space between them. Might as well use Sass eh?
- Don’t forget about box-shadow also.
- Certainly a drawing-specific language like SVG could do the trick.
- Or a drawing-specific language like Canvas could as well.
- Pfff, canvas? How pedestrian. How about WebGL?
- Certainly some vanilla JavaScript could handle the job.
- Might as well make that a bookmarklet.
- But why do that when you could write a jQuery plugin?
- We’re just drawing to a screen after all, the web isn’t the only place you can do that. How about an iPhone app that draws a box in Objective C?
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?
waste of space
Lighten up…it’s nearly Christmas
Waste of a comment ^^
It’s fun, it’s creative, you’re missing the point, chump.
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.
What, no Flash?
and why only 1 blue box? xD ;-)
http://codepen.io/Kseso/pen/kDzoa
.model tiny
.code
blue box blue screen of death
http://codepen.io/sillero/pen/pcedh
http://codepen.io/NSDCars5/pen/vALFy
Another blue box. Thought you’d like it. ;)
I’ll try and keep the collection updated.
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,
Surely generated content is the way to go. http://codepen.io/codepo8/pen/DFfzC
http://codepen.io/anon/pen/tBzjg
Definitely a weird one. I like it.
How about spamming the Google logo in the background. The google logo apparantly has a slight gradient, though. http://codepen.io/anon/pen/twsyA
Links are blue by default:
I clicked the link, and it turned purple. It’s a PURPLE BOX!
(http://imgur.com/LBhXwPI)
What about flex-box?
http://codepen.io/lemnis/pen/erHis
Oh, come on, people!
http://codepen.io/impressivewebs/pen/JHnko
Multi-column rule FTW! :)
I can see this text:
http://codepen.io/anon/pen/wvmFd
How dare you reveal my secrets! :)
Haven’t seen this one yet
http://codepen.io/GabbeV/pen/GDBHg
You’ll have to click it once to show it in edit mode but works on load in full page mode
A blue box becomes the JAPH of 2013. Who would’ve thunk.
Overlapping white slides http://cdpn.io/ekAov
Box height with padding-bottom percentage http://cdpn.io/htnCa
Funny!
Yo Dawg, I herd you like blue boxes… http://cdpn.io/sycLd
OK, I went through the collection and no one has yet used Data URIs. Which are of course the most sensible solution for embedding tiny graphics in your page.
Two versions:
Base-64 encoded one pixel png: http://codepen.io/AmeliaBR/pen/gvlIs
Human-readable svg: http://codepen.io/AmeliaBR/pen/xijuv
And by the way, I don’t think this is a useless exercise — it demonstrates some of the basic attributes of the different graphic (or pseudo-graphic) methods for comparison. Canvas, in particular, results in a nasty blurred edge when I view the examples on Chrome.
For an interesting example of using coloured divs of determined size in a practical graphical application, folks might be interested in this intro-to-D3 tutorial: http://bost.ocks.org/mike/bar/
I love the large dash character, good play!
Web designers too need memes!
Autofocus input edition: http://codepen.io/HugoGiraudel/full/ivcbl. Not working in editor mode though. :(
What? No love for ASCII?
http://codepen.io/GRSimon/pen/teCcH
Actually looks like someone did try that ^. So here’s another contribution:
http://codepen.io/GRSimon/pen/ahKCk
Hey, why not?
http://codepen.io/v42/pen/izxev
Nothing at HTML, only this at CSS
1) Only border
body {
border: 100px solid blue;
}
http://codepen.io/oloman/pen/pnlCd
2) And “without blue”:
html {
border: 200px solid white;
padding-bottom: 30%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYPj/HwADBwIAcbCYagAAAABJRU5ErkJggg==);
}
http://codepen.io/oloman/pen/EmyGB
SALE! Ten in one pen!
http://codepen.io/Merri/pen/kxchj
Insert blue-box example here using mp4/ogv/webm video loops
:)
done, use css content property. lol
http://codepen.io/anon/pen/bGgEa
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.
You missed the one in old versions of Windows – where the whole screen goes blue for no apparent reason :).
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;
}
.boxOrigin:before*……..
Amazing
Why not use yellow to get blue…(with a little bit of filter sprinkled on)
http://codepen.io/pxfunc/pen/CdgsI
If anyone is interested in the origin of this ridiculous stream of Blue Boxes, ’twas I who created the original.
I threw it on CodePen and tweeted about it as a joke to share with some ex–colleagues from Fantasy Interactive (Justin Windle, Paul Lewis and Thodoris Tsiridis). When I first started at Fi, I ONLY knew Flash, so had to learn HTML, CSS & JS from the ground up.
Believe it or not, Blue Box was an “experiment” I created when I was first getting to grips with CSS… No joke.
Anyway, as a homage to where my journey began with learning browser technologies, and as a bit of nostalgia, I decided to immortalise Blue Box on CodePen.
Never expected it to get such a response – needless to say, it just goes to show how expressive you can be with the browser!
Keep those Blue Boxes coming :-)
How about a div with some very big letters? Mess with the indentation and letter-spacing and BAM, you got yourself a blue rectangle.
http://codepen.io/anon/pen/gdwJs
Thanks :)
There’s also the very practical use of merging two triangles.
http://codepen.io/GRSimon/pen/iaDdm
I dare someone to merge four triangles.
Here you are: http://codepen.io/francky/full/yfFrD
:-)
And a variation: http://codepen.io/francky/full/xbIyB
(In this way all triangles are separately hoverable / clickable)
Probably done already! Bit late to the game..
http://codepen.io/gregorypratt/pen/pvLhF
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?
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
Another blue box story (CSS only): http://codepen.io/francky/full/birzG
body border FTW : http://codepen.io/gabssnake/pen/xgrkt
Tribute to Ralp Barclay :)
http://codepen.io/anon/pen/bnAmx
Maybe just include a picture “bluebox.jpg”, which is actually a blue box?
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
“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 ! ;-)