CSS3 lasers | Hacker News Reader

CSS3 lasers

motherfuckinglasers.com

112 pointsevilhackerdude35 comments

CSS3 offers a lot; essentially it can let you programmatically draw whatever you want fairly easily. While it's cool to see demos and fun things made with it, I'm about as impressed by most "look what I can do with CSS3" things as I am with "look what I can do with <insert graphical design software here>". That's not to say that neither can create amazing things; I'm just noting that since it's apparent CSS3 is quite powerful, it'll take more to impress me. Regardless, it's always fun to see these things :)

Source Code for the curious...

lasers.coffee http://github.com/evilhackerdude/lasers/blob/master/lasers.c...

lasers.sass http://github.com/evilhackerdude/lasers/blob/master/lasers.s...

btw, laser.sass is now at http://github.com/evilhackerdude/lasers/blob/master/sass/las... (moved it for compass)

It would be nice to have them animated with CSS transitions...

There were webkit animations in the beginning though the framerate was too low.

Is CoffeeScript available? I wanna marry it.

Let me google that for you...

http://jashkenas.github.com/coffee-script/

I think he was using "available" in the colloquial sense of "a potential partner for a romantic relationship." Thus the desire to "marry it." Pretty sure he knows you can download it, seeing as how, y'know, jashkenas just linked to some CoffeeScript that he wrote.

Zak was linking to the "fork me" button. Best to take a test drive before you marry it.

Forking before marriage? You kids these days!

I was disappointed when I realised there was no background electronic MIDI music.

Refresh — I added some deep Hans Zimmer for hearing pleasure while watching the lasers.

Hans Zimmer, my colon. You really are evil, evilhackerdude.

How about this as a modern alternative: http://soundcloud.com/shamantis/j-biebz-u-smile-800-slower

Woah: I recognize these exact laser patterns and colors. I feel like there are school photos of my cousins from the late 80s or early 90s which have this pattern as a backdrop. Did you have a reference image?

I don't mean the undermine the skill required to achieve this but why would you use CSS to do something like this? I've also seen stuff like pure CSS logos, pure CSS fail whale, etc. and I have no doubt it helps you understand CSS inside out but what is the practicality of it? I love it, but I just want to know why you'd prefer pure CSS over images or some other way to display similar effects.

This is effectively a vector image. It can fit any window without losing quality. Something like this could also be done with an actual vector image (and there should eventually be good SVG support in all browsers), but I think CSS might give you more control in some situations.

From http://ipinfo.info/netrenderer/index.php?url=http://motherfu... to http://ipinfo.info/netrenderer/index.php?url=http://motherfu.... At least the font got better.

Oh jeepers! - definitely not work safe. My boss was pretty much directly behind me when "MOTHERFUCKING LASERS" appears on my 24" screen in massive letters.

This is the one time I'm glad the place I'm working is so backward web-wise, as the lasers didn't work - no CSS3 for me! - and thus my screen wasn't turn into even more of a profanity-emblazoned eye-magnet.

So thankfully, she didn't notice. Phew.

My boss walked by and said "That's cool!"

Lawks, it must suck to work in a factory where scented water is puffed onto doilies by baby deer with adorable eyes (I am guessing). But seriously - "motherfuckinglasers.com" didn't alert you?

Well. Yeah, I guess it kinda did. Sorreee muuum. :)

And you guessed right. Someone has to make all those liquid-center scented baby-dolls, right? And it just so happens that doe-eyed deer are particularly capable. Just a bit work-shy, which is where I come in and whip them into shape.

Edit: Hey! Why do I lose karma?! Was it the whipping part...?

Edit: Thanks. :)

Impressive effects without using images.

Unfortunately: There are rendering problems in Firefox. It's a fixed size and doesn't scale with the browser window resolution. The same page can be achieved in a widely compatible way with a simple image.

It's a tech demo, not a cross browser compatible widget.

The cut-off glow effect in Firefox? I guess the reason for that is a bug in the viewport calculation for the laser’s box-shadow. I mostly focused on webkit. If anyone knows a fix, code is here http://github.com/evilhackerdude/lasers

About resolution independence: I believe we could hack the CSS to use appropriate percentage values for the laser rays. Basically calculate a percentage for width or height in JS and apply that so it scales with the window automatically.

Scientifically proven thanks to modern laser technology: According to Google Analytics adding “Rick Astley - Never gonna give you up” decreases Avg. Time on Site by 2 seconds.

I was expecting more pewpew

So, I don't see anything. I'm guessing many others don't as well.

So, I see something, but feel I must be missing the pièce de résistance here. There's a background covered with parallelograms and the words "Mother-Fucking Lasers" that flash every once in a while.

Should I be seeing something else? (I'm using Chrome on Ubuntu.)

Can you make the audio loop?

No, that’s just wrong.

Ok, I couldn’t resist.

Apparently, I Rickrolled the managers standup today by tweeting this. Thank you.

You are now a god.

Needs more CSS3 sharks

<strikeout>sharks</strikeout> cowbell.

Reply on news.ycombinator.com