Grow your CSS skills. Land your dream job.

Happy Halloween

Published by Chris Coyier

HTML, CSS, and JavaScript got invited to a halloween party. They decided they would all dress up as each other!

HTML went as JavaScript:

<div id="pumpkin" onclick="alert('Boo!');"></div>

JavaScript went as CSS:

var jackolantern = document.getElementById('pumpkin');
jackolantern.style.color = "orange";
jackolantern.style.backgroundColor = "black";

CSS went as HTML:

#pumpkin:before {
   content: "Happy Halloween!";
}

Happy Halloween everyone!

Comments

  1. Permalink to comment#

    Boo!

  2. Permalink to comment#

    Funny idea! :-) Happy halloween too..boohoooo!

  3. Permalink to comment#

    cute =)

  4. Permalink to comment#

    haha! nice

  5. Permalink to comment#

    Nice costumes ;) Happy Halloween =D

  6. Permalink to comment#

    I don’t understand it. Why you post this nonsense post?

    • Permalink to comment#

      He used html to call a javascript function (aka html dressed as javascript). He used the javascript to style the div (aka javascript dressed as css) and finally he used CSS to put the text in the html tag (aka css dressed as html).

    • Permalink to comment#

      Thanks. Now I got it.

    • for a bit of Holiday fun i’d imagine :)

  7. Permalink to comment#

    That’s pretty good :p

  8. Russ
    Permalink to comment#

    Nicely done, I tip my hat, sir.

  9. Permalink to comment#

    Lol, this is super-geek stuff.

    Happy Halloween Chris

    :)

  10. Permalink to comment#

    Ha, clever.

  11. Happy Geeky-Halloween to you too, Chris !

  12. Haha, very good :)

  13. haha thats awesome!

  14. Happy Halloween! Thanks for the geek ‘costume’! :D

  15. Haha I can imagine this as a terribly geeky children’s storybook. :)

  16. jack
    Permalink to comment#

    this seems like its probably pretty funny…but…i have to say…i dont get it…please someone explain it to me…i think im just not nerdy enough…im trying…im trying

    • Permalink to comment#

      Refer to Adam’s earlier comment: “He used html to call a javascript function (aka html dressed as javascript). He used the javascript to style the div (aka javascript dressed as css) and finally he used CSS to put the text in the html tag (aka css dressed as html).”

  17. A very geeky and happy Halloween to you :)

  18. Haha, that’s great! Good idea, Chris!
    But I hope, everyone who reads this, gets the deeper sense behind it; If you mix everything, it gets really scary – for others to read and for you to read (and to debug) your code – especially some time after coding.
    Happy Halloween!

  19. Permalink to comment#

    This is great! Happy Halloween.

  20. Permalink to comment#

    LOL, funny !

    For all the spanish people out there:

    —————————————

    El HTML, CSS, y JavaScript fueron a una fiesta de Halloween. Decidieron que irían vestidos cada uno como uno de sus amigos, asi que…

    El HTML fue de JavaScript:

    El JavaScript de CSS:

    var linterna = document.getElementById(‘calabaza’);
    linterna.style.color = “orange”;
    linterna.style.backgroundColor = “black”;

    Y el CSS fue de HTML:

    #calabaza:before {
    content: “Feliz Halloween!”;
    }

  21. Permalink to comment#

    Great one, Happy Halloween.

  22. Tanya
    Permalink to comment#

    Super idea!

  23. Permalink to comment#

    I actually laughed out loud…does that officially make me a nerd? Haha, nice one Chris!

  24. Permalink to comment#

    Nice. Very chuckle-worthy. :)

  25. Delorie
    Permalink to comment#

    I enjoyed this post very much.

  26. Permalink to comment#

    I think even my inner geek is cringing just a little bit…

  27. Permalink to comment#

    how about the PHP as Mail ?

    :-)

  28. Permalink to comment#

    It doesn’t work in IE!
    Just kidding :)

  29. Happy Halloween!!!

  30. Ha, nice.

  31. Permalink to comment#

    Your black pumpkin should maybe be orange with black font? If not I don’t get it.

  32. Permalink to comment#

    hahahaa funny idea! COngrats

  33. Permalink to comment#

    I lol’d. Very clever. :)

  34. This is a cute, im not sure how user friendly this is for a site that may get picked up by a person who didn’t build it, But i love the humor behind it, making the mundane a little more interesting

  35. Ha ha. And what will you come up with for Thanksgiving? Love being your neighbor in Nerdville. = )

  36. Permalink to comment#

    Um, wow. This has to be one of the oddest setups I’ve ever seen. This goes against all the rules of web programming you learn in school, and gives you just the tinniest peek into what a really good web programmer is capable of. Really scary.

Leave a Comment

Current day month ye@r *

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