

CSS3 lasers - evilhackerdude
http://motherfuckinglasers.com/

======
photon_off
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 :)

------
jashkenas
Source Code for the curious...

lasers.coffee
[http://github.com/evilhackerdude/lasers/blob/master/lasers.c...](http://github.com/evilhackerdude/lasers/blob/master/lasers.coffee)

lasers.sass
[http://github.com/evilhackerdude/lasers/blob/master/lasers.s...](http://github.com/evilhackerdude/lasers/blob/master/lasers.sass)

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

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

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

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

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

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

------
snprbob86
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?

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

~~~
nzmsv
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.

------
bialecki
From
[http://ipinfo.info/netrenderer/index.php?url=http://motherfu...](http://ipinfo.info/netrenderer/index.php?url=http://motherfuckinglasers.com/&browser=ie6)
to
[http://ipinfo.info/netrenderer/index.php?url=http://motherfu...](http://ipinfo.info/netrenderer/index.php?url=http://motherfuckinglasers.com/&browser=ie8..).
At least the font got better.

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

~~~
confuzatron
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?

~~~
wihon
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. :)

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

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

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

------
albemuth
I was expecting more pewpew

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

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

------
Ganthor
Can you make the audio loop?

~~~
evilhackerdude
No, that’s just wrong.

Ok, I couldn’t resist.

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

------
ludwig
Needs more CSS3 sharks

~~~
Groxx
<strikeout>sharks</strikeout> cowbell.

